Spicing up a Feedburner Feed with Pure CSS

Feeds are very common in sites nowadays, so it’s good to be able to incorporate your design feel to how your feed looks. This tutorial will show an example of how you can customize your Feedburner feeds on your website, using only CSS to create a stylish design.
The goal: The goal of this tutorial is to create a design based on CSS using the preconfigured Feedburner code. The end result I want to display is a feed with a “modern,” more minimalist flair (in the realm of West Elm).

Let’s start with the Feedburner HTML code. You will find this on the Feedburner tutorial page when you view your feed statistics.

 <div class="feedburnerFeedBlock" id="myfeeduri1234">
     <p class="feedTitle">Feed Title Goes Here</p>

     <ul>
       <li><span class="headline"><a href="#">First item headline
       here</a></span>

       <p class="date">Jan 22, 2005</p>
       <div>Aliquam delenit enim nostrud autem velit eum aliquip
       lobortis consectetuer eum volutpat vero autem et. Tincidunt consequat
       illum quis suscipit dolor nonummy in dolore.</div>
       <p class="enclosure"><a href="#">Download podcast</a></p></li>

            .
            .
            .
     </ul>

     <div id="creditfooter"><a href="http://www.feedburner.com" target="_blank">
     <img src="http://www.google.com/help/hc/images/feedburner/buzzboost-pwrd.gif"
alt="Headlines by FeedBurner" /></a>
   </div>

</div>

**NOTE** Unfortunately, the .gif that I got doesn’t seem to be working

Thankfully, Feedburner is gracious to give us the code, so all we have to do is to work with CSS. The Feedburner site provides a breakdown of the code, but for illustration purposes, I’m going to include a very brief breakdown of the code.

• <div class=”feedburnerFeedback”> div hosts the whole content of the feed.
• <p class=”feedTitle”> hosts the title
• <span class=”headline”> displays each headline item in a link form (<a href=”#”>) within an unordered list.
• <p class=”date”> displays the date of each line item
• <div> displays the descriptive contents of the item
• <p class=”enclosure”> displays any links pertaining to the item, showing them in link form (<a href=”#”>)
• <ul> closes out the unordered list
• <div id=”creditfooter”> displays the credits for the feed in link form
• First </div> closes out the “creditfooter” div
• Second </div> closes out the “feedburnerFeedBlock” div

With the code set in place, let’s code the plain Feedburner code with CSS. You can conduct this with either an inline style CSS or through an external CSS file. Here, I conducted the CSS inline:

<style type="text/css">
body {font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;}
ul {padding:0; margin:0;}
li {list-style:none; border-bottom:#000 solid 1px; border-top:#2c2c2c solid 2px; margin:0px auto; padding:15px 5px 35px 5px;}
li:hover {background:#3e3e3e;}
a {color:#930; text-decoration:none;}
a:hover {color:#fc3;}
.headline {padding:10px; margin:10px;  }
.headline a {margin:25px auto;}
.feedburnerFeedBlock {background:#232323; border:#000 solid 3px; width:450px;}
.feedTitle, #creditfooter {font-size:20px; font-weight:bold; color:#cdcdcd;  margin:0 auto; text-align:center; background:#1e1e1e; border:#000 solid 1px; padding:10px;}
.date {float:left; padding:10px; margin:-10px 10px 5px 10px; background:#1e1e1e; border:#2e2e2e solid 1px; color:#f2f2f2;}
 ul div {padding:0 10px 10px 10px; margin:15px 5px  10px auto; font-size:13px; float:right; color:#f2f2f2;}
.enclosure {text-transform:uppercase; background-color:#1b1b1b; padding:0; margin:35px 10px 5px 10px; text-align:center; font-size:12px; width:420px; border-bottom:#000 solid 1px; border-top:#1c1c1c solid 1px; clear:both;}
.enclosure a {display:block; color:#c30; padding:10px; }
.enclosure a:hover {color:#930; background-color:#000;}
</style>

Let’s break down the CSS:

body {font-family:”Lucida Sans Unicode”, “Lucida Grande”, sans-serif;}
    > The body generates the type of font to be used. You can choose whatever font you want.
ul {padding:0; margin:0;}
    > The unordered list within the body has no padding and no margins.
li {list-style:none; border-bottom:#000 solid 1px; border-top:#2c2c2c solid 2px; margin:0px auto; padding:15px 5px 35px 5px;}
    > The individual listing within unordered list will have specific characteristics such as a bottom border, set padding and set margins.
li:hover {background:#3e3e3e;}
    > The mouse hover state within the individual listing will change to color specified.
a {color:#930; text-decoration:none;}
    > Universal URL will have set color and text decoration.
a:hover {color:#fc3;}
    > Universal mouse hover state will display color specified.
.headline {padding:10px; margin:10px; }
    > Gives the headline padding and margin widths.
.headline a {margin:25px auto;}
    > Gives the headline URL margins.
.feedburnerFeedBlock {background:#232323; border:#000 solid 3px; width:450px;}
    > Gives the overall bg a specific color, border and width.
.feedTitle, #creditfooter {font-size:20px; font-weight:bold; color:#cdcdcd; margin:0 auto ; text-align:center; background:#1e1e1e; border:#000 solid 1px; padding:10px;}
    > Gives both the feedTitle class and creditfooter div the same CSS configurations. Both feedTitle class and creditfooter div will share the same font size, weight, and color, background color, border, etc.
.date {float:left; padding:10px; margin:-10px 10px 5px 10px; background:#1e1e1e; border:#2e2e2e solid 1px; color:#f2f2f2;}
    > The date field is an option to Feedburner, but if you choose to have one, you can create CSS specified to view this field.
div {padding:0 10px 10px 10px; margin:15px 5px 10px auto; font-size:13px; float:right; color:#f2f2f2;}
    > Gives the description of each headline padding, margins, colors.
.enclosure {text-transform:uppercase;background-color:#1b1b1b; padding:0; margin:35px 10px 5px 10px; text-align:center; font-size:12px; width:420px; border-bottom:#000 solid 1px; border-top:#1c1c1c solid 1px; clear:both;}
    > Gives any call-to-action (like “download podcast”) the configurations listed.
.enclosure a {display:block; color:#c30; padding:10px; }
    > Gives the call-to-action URL padding, color.
.enclosure a:hover {color:#930; background-color:#000;}
    > Displays call-to-action the mouse hover state.

As you can see, it is very easy to play around with the look and feel of your feed. It takes a little bit of knowledge and a lot of creativity to make things happen.

Happy coding!

Related posts:

1. Snazzy CSS Double Border Effect
2. Creating Semantic CSS Navigation
3. CSS/JavaScript Hover Menu (screencast)
4. Google Feedburner has Rough Start…
5. Photoshop Slicing & CSS Coding

Written by Brenley Dueck