Styling FeedFlare With CSS

FeedFlare is probably one of the most widely used tools from FeedBurner after of course the feed service itself. This tutorial will show you how to stylize the FeedFlare for your blogs.

*This tutorial assumes you already know how to install FeedFlare.

Right, Now for the tutorial -

Feedburner makes it easy for us to style the flare we give all of our blog posts. They have already assigned a class to the way that the flares show up below your posts. The class is called feedburnerFlareBlock and there are a few things you should know about it first.

• FeedFlare is wrapped in a tag, so it will inherit the default paragraph styles in use on your blog. However, because it contains a class of feedburnerFlareBlock, you can style it however you want.
• By default, FeedFlare uses bullets (•) as separators. But each one is wrapped in a tag, so you can hide them, restyle them, or make them dance at your leisure.

As you can see on my blog, I’ve changed the way they show up and it’s quite easy {results may vary according to your blogs CSS stylesheet}. Here’s how -

Since the FeedFlare code is wrapped in the < p > tag we’re going to use the assigned class to style how they look. This is what I’ve done on my blog:

p.feedburnerFlareBlock{
font-family: ‘Lucida Grande’, Verdana, Arial, Sans-Serif;
font-size: 12px;
}

So far I’ve assigned the type of font I want to use and the size of it. You can add as many styles to it as you including bolding, italicizing and so on. Since they are links we can also style the < a > attribute. Here’s what I did:

p.feedburnerFlareBlock a{
color: #444444;
border: 1px solid #59641f;
padding: 3px;
background-color:#fff;
}

This will change the color of your link, give it a border, add some space around each individual flare and a different background color. Now you can either just end it here or go on to add things like a background image that can be repeated along the x axis and more. But one more attribute can be styled to give a nice effect, the a:hover effect. Here’s what I did:

p.feedburnerFlareBlock a:hover{
color: #000;
border: 1px solid #66b82f;
background-color:#fbfbfb;
}

Here I’ve given a different color to the text when someone places there mouse pointer over it, at the same time the border color will change along with the background color. Though for some odd reason my text doesn’t change to white. It probably has to do with the the other links being styled like that, so for the consistency to remain I’ve not bothered nailing the reason. But you get the general idea.

Styling your FeedFlare to look slightly different than the rest of your content can perhaps even encourage your readers to get more socially involved with your content. What I’ve shown you above is just a small example, for the expert CSS coder I’m sure more can be accomplished.

If you have styled your FeedFlare, leave a comment and link to your example. I’ll update this entry to give you some link love.

Subscribe to my full RSS feed.

Recommended Reading

• Feed Flares - Choosing The Right Feed Flare For Your Blog
• Creating Web 2.0 Buttons Just Got Easier
• Rolling in your 5.0