Schinckel.net

I found a few sites around that give instructions on how to use CSS code to create those classy RSS icons. Using CSS is good for a couple of reasons – if you decide to change the style you only need to do it once, even if the code was used in a post, or page, not just a template. Secondly, some people live some of their life behind crappy corporate firewalls that block images from certain sources, and people using text-only browsers, or using text-to-speech features, will still be able to view what it was you intended them to see. This is what I have in my stylesheet:

 1     .rss
 2     {
 3         color:#FFFFFF;
 4         background-color:#FF6600;
 5         border-color:#FF6600;
 6         border-style:outset;
 7         text-decoration:none;
 8         margin:2em 0em 0em 0em;
 9         padding:0em 0.5em 0em 0.5em;
10         border-width:1px;
11         font-family:Arial;
12         font-size:0.8em;
13     }
14     .rss:hover
15     {
16         background-color:#FF9900;
17     }
18     .rss:active
19     {
20         border-style:inset;
21     }

Then, whenever or wherever you have a link that needs to look like an RSS button, just use class="rss" inside the a tag, and it will look classy! It is also possible to format a whole paragraph using a p tag with the class="rss". If it doesn’t work, then it’s likely that another CSS statement is vying with the class tag for precedence – for instance if your links are inside the sidebar, as part of a list, then the list, sidebar and a tags from the CSS may take precedence. In my case, removing the links from the list item (leaving them in the unordered list to keep positioning) fixed the problem. Note: I was originally using #rss in the stylesheet, and id="rss" in the pages, but should have been using .rss and class="rss" to be more compatible. The one I was using is intended that each tag appears only once in a document, I think.