Singapore Web DesignerCustomizing the FeedBurner Chicklet with CSS » AEN—Designer & Consultant

FeedCount is a cool way to promote your feeds. It is a dynamic graphic that always displays your feed’s current circulation, as calculated by FeedBurner. Many bloggers today use the FeedCount chicklet to display how many readers have subscribed to their RSS feeds, if their feeds are handled by FeedBurner.

FeedBurner provides a graphical chicklet which you can access from your FeedBurner account, and it looks like these. Alright, these are mine and I know I have very little subsbribers.

You can easily customize the colors by changing the “body” or “text” color either with the color picker or by typing in the hexadecimal rgb codes manually, to match your blog layout or background color. Wouldn’t it be great if we can customize that even further? Like removing that ugly pixel fontish “BY FEEDBURNER“? Now you can, with CSS.

2 days ago, I was looking for a way to prevent IE from clipping paragraphs whereby the bottom part (descenders and link underlines, etc) gets cut off in a single line of text. While Googling for an answer, I stumbled upon a very rarely used CSS property, “clip“.

The clip property sets the shape of an element. What happens if an image is larger than the element it goes inside? - The “clip” property lets you specify the dimensions of an element that should be visible, and the element is clipped into this shape, and displayed. (Taken from W3Schools)

With the clip property, we can basically clip parts of an element away, by specifying a rectangle with 4 values, top, right, bottom and left. It works like the margin property, except that it’s somehow reversed. Let me show you a simple example with how the clip property can be used on the FeedCount chicklet.

Here I have set the background and text colors to match my current blog layout and removed the pesky caption with the help of the clip property.

img.fc_custom01 {
position:absolute;
clip:rect(0px 88px 20px 0px); }

and attaching the CSS class to the FeedCount Widget

<img
xsrc=”http://feeds.feedburner.com/~fc/AenDirect?bg=f2f2f2&fg=545454&anim=0″ mce_src=”http://feeds.feedburner.com/~fc/AenDirect?bg=f2f2f2&fg=545454&anim=0″
alt=”FeedBurner Feed Count”
class=”fc_custom01″ />

The chicklet is 88 pixels wide and 26 pixels tall. By limiting the clipping area to only 20 pixels, we effectively removed the caption from view. Noticed I gave it an absolute position, the clip property only works on absolute positioned elements. If we play around with the clipping values further, we could have something like this:

No borders and unnecessary bits trimmed away nicely with these clip values:

img.fc_custom01 {
position:absolute;
clip:rect(0px 86px 18px 2px); }

Here’s how you can use a custom caption on the right, using a <span> for the caption:

I stripped down the chicklet and showed only the number. The caption is positioned with margins and given a matching font-size and color.

img.fc_custom01 {
position:absolute;
clip:rect(4px 40px 18px 4px); }

span.custom_caption {
position:absolute;
margin:13px 0 0 42px;
padding:0;
color:#555;
font-size:10px; }

The markup:

<img
xsrc=”http://feeds.feedburner.com/~fc/AenDirect?bg=f2f2f2&fg=545454&anim=0″ mce_src=”http://feeds.feedburner.com/~fc/AenDirect?bg=f2f2f2&fg=545454&anim=0″
alt=”FeedBurner Feed Count”
class=”fc_custom01″ />
<span class=”custom_caption”>Subscribers (Feedburner)</span>

So far I have tested it on Firefox 2, IE 6 and Safari on OS X. I don’t have Opera so I’m not too sure.

With CSS, you can go further and do stuff like attaching icons. It works on the animated version of the FeedCount Chicklet too. The only limit is your imagination. I hope you enjoyed this article. I’d love to know how you customize yours too.

LINKS
The clip property (CSS Reference)
Clip CSS
CSS Clip Property (W3Schools)