Common BuzzBoost Styling Tricks

We've gotten a fair number of requests for similar styling effects with BuzzBoost, and it's high time we finally summarized some of the basic CSS techniques required to achieve these effects. We have a couple of popular favorites here and we will add additional tips over time.

Remove Default Bullets
This is by far the most popular request. On most sites, the surefire way to remove bullets of any kind from BuzzBoost is to add the following snippet to your existing CSS stylesheet:

Code:

div.feedburnerFeedBlock ul { 

        margin-left:0; 

        padding-left:0; 

        list-style-type: none 

        }

To remove bullets just on BuzzBoost headlines and leave bullets in item content intact, try this code:

Code:


div.feedburnerFeedBlock ul {

margin-left:0;

padding-left:0;

list-style-type: none

}



div.feedburnerFeedBlock ul ul {

list-style-type: disc;

}



div.feedburnerFeedBlock ul ol {

list-style-type: decimal;

}

Put Additional Space between Titles and Headlines
If the standard spacing between post titles and headlines seems a bit tight, you may want to give the headline itself characteristics similar to a full paragraph. This technique should work well whether or not you have chosen to display post dates. You can re-style the Headline <span> with an instruction like the following example:

Code:

div.feedburnerFeedBlock ul li span.headline { 

        font-weight:bold; 

        display:block; 

        margin:12px 0 0 0; 

        }

Box in BuzzBoost
Some have asked how to style BuzzBoost so that it stands out from other elements on the page. You can easily "box in" BuzzBoost by adding the following snippet:

Code:

div.feedburnerFeedBlock { 

        border:2px solid #ddd; 

        background-color:#ffe; 

        padding:12px; 

        }

You're free to change the hex color codes in "border" and "background-color" to other values to your liking, or even use color literals, such as "gray" and "green", if you prefer to keep things more readable.

Item Headings in Boldface
To have the links back to your original items appear in boldface text, try this snippet:

Code:

div.feedburnerFeedBlock ul li span.headline { 

        font-weight:bold; 

        }

BuzzBoost CSS Debugging/Exporing Tip: Use the source, Luke
All of the tips above work because the actual HTML our BuzzBoost script outputs has hooks in it that permit easy styling. A detailed discussion of CSS's intricacies is beyond the scope of this post (or any reasonable forum post anywhere, really), but if you know how to apply styles using CSS classes and IDs, you can put your creativity to good use with BuzzBoost.

The best way to view BuzzBoost's markup so you can view the classes/IDs available to you is to view the BuzzBoost JavaScript source directly in your browser. Heck, try it right now: view FeedBurner's own Burning Questions blog's BuzzBoost:

View Burning Questions BuzzBoost Source (new window)

As you can see, the "headline" class applied to the <span> that contains the item title link permits this block of text to be styled.