CODEWITHSUNDEEP
htmlcssjquery-mobilerss
DanielGeorge
DanielGeorge

Reputation: 47

Customize RSS Output from embedded Feedburner - Mobile App (HTML5)

Is it possible to pre-customize RSS output from Feedburner using CSS? I have a Tumblr blog and I use Feedburner to produce embedded HTML for my mobile app (jQuery Mobile, HTML5).

The following code from App simply pulls a link and displays my blogs RSS feed.

<script src="http://feeds.feedburner.com/Http/dfinantumblrcom?format=sigpro" type="text/javascript">

As the title, images, description of my blog is not yet visible... Is there a way I can style it so it will have CSS properties when it appears on my page?

Thanks.

Upvotes: 0

Views: 632

Answers (1)

ezanker
ezanker

Reputation: 24738

Yes. The output of your script creates a div with class feedburnerFeedBlock. It looks like this:

<div class="feedburnerFeedBlock" id="Http/dfinantumblrcomjei4v7r7lf8v4ajivdr2phormc">
    <ul>
        <li>
            <span class="headline">
                <a href="http://dfinan.tumblr.com/post/76321637203" class="ui-link">This is a test!
                </a>
            </span>
            <p class="date">Feb 11, 2014</p>
            <div>
                <p>This is a test!</p>
            </div>
        </li>
    </ul> 
    <div id="creditfooter"><a href="http://feedburner.google.com" target="_blank" class="ui-link">
        <a href="http://feedburner.google.com" target="_blank" class="ui-link">
            <img src="//feedburner.google.com/fb/images/buzzboost-pwrd.gif" alt="Headlines by FeedBurner" style="border:0">
        </a>
    </div>
</div>

You can createCSS rules that apply to feedburnerFeedBlock and all its children.

Here is a DEMO

.feedburnerFeedBlock ul
{
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}
.feedburnerFeedBlock li{
    border: 2px solid #444;
    padding: 0;
    background: #e2e2e2;
}
.feedburnerFeedBlock li .headline{
    background: #aaa;
    margin: 0;
    display: block;
    text-align: center;
}
.feedburnerFeedBlock li .headline a{
    color: white;
    text-shadow: none;
    font-size: 24px; 
}
.feedburnerFeedBlock li .date{
    background: #ccc;
    margin: 0;
    padding-left: 8px;
}
.feedburnerFeedBlock li div p{
    margin: 0;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 8px;
}
#creditfooter{
    text-align: center;
}

Upvotes: 2

Related Questions