Adding a CSS StyleSheet to your RSS Feed

February 02, 2005
web

It's pretty easy to add a CSS stylesheet to your RSS feeds. I created one in about 10 minutes for my RSS feed. You can do a lot more with an XSL stylesheet (turn links into clickable links, etc), but CSS can make your feed look much less scary for the non-technical crowd. And the good news is you probably already know CSS, so setting one up is trivial...

To start you need to add a xml-stylesheet tag to your RSS feed:

<?xml version="1.0" ?>
<?xml-stylesheet type="text/css" href="http://you.com/rss.css" ?>
...

Next you need to create a CSS file called rss.css, inside it you can define how each RSS tag is displayed. Here's an example that will work for an RSS 2.0 file, you may need to add a few more elements to the display: none rule:

rss {
display: block;
font-family: verdana, arial;
}
title {
display: block;
margin: 5px;
padding: 2px;
color: gray;
border-bottom: 1px solid silver;
}
link {
display: block;
font-size: small;
padding-left: 10px;
}
item {
display: block;
padding: 2px 30px 2px 30px;
}
docs {
display: block;
background-color: #ffffe6;
margin: 20px;
text-align: center;
padding: 5px;
color: #7f7f7f;
border: 1px solid silver;
}
/* all hidden elements */
language, lastBuildDate, ttl, guid, category, description, pubDate {
display: none;
}

You will notice that I use the docs tag to tell the user that they are looking at a RSS feed, and provide a url for more information. This is probably a good thing to do, you could include that info in the description tag, but that tag often is used by aggregators.

Digg this article



Related Entries

164 people found this page useful, what do you think?

Trackbacks

Comments

Great read Pete! I took it upon myself to write something similar and added an XSL Transformation file as well. http://www.xefteri.com/articles/show.cfm?id=24
Excellent work. Implementing the tutorial, and probably the same layout on my site. :)
Thanks for an interesting technique! Added to Web-Dev-Bookmarks.
Your Feed is not valid ;) feedvalidator.org indicates that the docs tag must be a full and valid URL
Dont work in firefox at all>
Derek, It does work in firefox, but is probably depending on a few things. If you have setup a default CSS stylesheet that may break things? It probably also depends on the content type your serving your feed as.
works great thanks you for the help best reguard http://www.openposting.com
Pete, great resource. However I get errors in both IE and Firefox right now. It looks like in the title for CSS Techniques Roundup you forgot to make your ampersand the HTML entity which makes it all bork up because it's XML.
Hi Please can any one help me to manage a stick up footer on the website for IE 5.0 +. As you can see 1 on http://www.bmw.co.uk thanks Imran Hashmi
I been looking for this everyplace :) this is the best thanks so much, i googled and you were in the top 10. 3rd or 4th link. -Jesse lostseed.com
My RSS feed is being served to my webpage using XMLHttpRequest or AJAX if you'ld rather... what wrinkles is this going to cause w/ using CSS? I have a content:encoded element for example that use <p> tags and some other simple html...
http://www.google.com/search?q=Blog+Post+Comment+-Login+-Password+- registered&hl=zh-CN&lr=&newwindow=1&start=390&sa=N
Maybe I'm missing something but in IE 6.0 with the latest and "greatest" updates from Microsoft, all I see is a blank page when I click on the RSS link. No pretty formatted anything. I remember that prior to this year, my feeds using XSL worked but then they stopped working after a recent M$ update. Anybody else? Works fine in Firefox, though.
> To start you need to add a xml-stylesheet tag to your RSS feed: That's not a tag, it's a processing instruction. > inside it you can define how each RSS tag is displayed. No you can't, tags are never displayed. Furthermore, you don't define, you suggest. Things like user stylesheets can override your suggestions. So the accurate statement would be "you can suggest how elements are displayed". > you may need to add a few more elements to the display: none rule: No, you don't add elements, you add selectors. PS: your commenting system is broken. It rejects requests with blank Referer headers as if they were coming from another site.
Will someone please repeat this for an Atom feed!
Neil: This is working great for Atom feeds as well. Have a look my Atom feed at http://www.heureka.se/ (blue RSS feed icon)
Heureka, the URL in your Atom feed is not pointing to the stylesheet. There is a superfluous /localhost in the URL that should be removed.
where does this go? To start you need to add a xml-stylesheet tag to your RSS feed:
Blake West: Thanks, the url is updated.
You surely have one of the most interesting sites in net. This gave me so much information indeed! http://users.domaindlx.com/h57hoodia/
very good site I am surprised call at see on my site I have not worse my site available here is on this reference: http://wertex.info
very good site I am surprised call at see on my site I have not worse my site available here is on this reference: http://wertex.info
very good site I am surprised call at see on my site I have not worse my site available here is on this reference: http://wertex.info
very good site I am surprised call at see on my site I have not worse my site available here is on this reference: http://wertex.info
very good site I am surprised call at see on my site I have not worse my site available here is on this reference: http://wertex.info
very good site I am surprised call at see on my site I have not worse my site available here is on this reference:
I like this site. There are lots of comments, one of them very interesting. Pete please take a look at my site and tell me your thoughts:www.carrymoney.com Thanks,
Beautiful and usefull site! http://www.ravennauta.net Ravenna Directory
Wow!!! Good job. Could I take some of yours triks to build my own site?
Lucky to find you, keep on the good workk guys! Best of luck.
Your site is very convenient in navigation and has good design. Thanks!
I enjoyed your page. Keep up the good work! Feel free to visit my page. It\'s cool too.
Looking for information and found it at this great site...
Thank you for your site. I have found here much useful information...
How do you do! How do you do! How do you do! Very interesting site I liked if you want visit my site and leave review. How do you do! Very interesting site I liked if you want visit my site and leave review. Very interesting site I liked if you want visit my site and leave review.
Hello! Cool site! thank's! By the way at us similar hobbies. Visit my sites: http://1st-anniversary-gift.nspider.co.uk http://cheap-student-airfare.nspider.co.uk I'll very glad. Up to a meeting, the whole. End ^) See you
Work Full Time/ Part Time From And Start Earning Money 350-360 Dollars Twice A Month For Comfort Of Your Home. Do Not Panic For Your Utility Bills.
Work Full Time/ Part Time From And Start Earning Money 350-360 Dollars Twice A Month For Comfort Of Your Home. Do Not Panic For Your Utility Bills.
Is anybody here i do not see anyone
Help me please I want to find my friends
I am found in google this good sites: Visit! :) I am creat this sites.
http://designerimages.net/_upload/ http://danlacey.com/_upload/
I can't be bothered with anything recently. It's not important. More or less nothing noteworthy going on right now, but I don't care. I've pretty much been doing nothing. Shrug.
I have big tits ;-). More or less nothing seems worth doing. I've just been letting everything wash over me lately. I just don't have anything to say lately. Shrug. I can't be bothered with anything lately.
More or less nothing seems important. It's not important. Shrug. Whatever. I've just been hanging out doing nothing, but eh. I can't be bothered with anything lately.
I've just been staying at home waiting for something to happen. I've just been letting everything wash over me. I can't be bothered with anything recently. I've pretty much been doing nothing worth mentioning. I haven't gotten anything done today. I haven't been up to much , but oh well. I've just been staying at home waiting for something to happen, but so it goes. Pfft. I haven't been up to anything. My mind is like an empty room, but such is life. Maybe tomorrow. Today was a loss, but eh.
I can't be bothered with anything these days. I guess it doesn't bother me. What can I say? My mind is like a fog, not that it matters. I just don't have much to say these days. That's how it is. I haven't been up to anything recently. I've just been letting everything pass me by. Shrug. Basically not much notable going on lately.
Hairless Blond MILF Sucks Dick & Gets Cum In Eyes
Holy hit, it happened again, so what to do
Hi: I'm trying, with your good help, to get my head round this: I'm competent CSS, novice RSS user. I can create the feed itself, no problem. I've set it all up (sorry - I cut and pasted your stuff to get the basic in place) but two things puzzle me: One is that amndments to the stylesheet appear to ahve no effect on the broswer rendition and 2) I LOVe the standardised explanation at the top of the rendered page, but I don't understand where it's being generated. You say you've included a URL for further ino, but where does the text for that box come from. I can't see the URL anywhere. John An email explanation would REALLY help
There are too many, not enough handicapped parking spaces in our city
nice site... look on my site http://www.desklamp.fora.pl - desk lamp http://www.lampshades.fora.pl - lamp shades
thank you!u
http://www.naturalbabyproducts.com.auNatural Baby Products Welcome to Natural Baby Products - Dental Care Music , Natural Baby Products, Natural Baby Care, Natural Products visit at:http://www.naturalbabyproducts.com.
Natural Baby Products Welcome to Natural Baby Products - Dental Care Music , Natural Baby Products, Natural Baby Care, Natural Products visit at:http://www.naturalbabyproducts.com.au
Very useful rapidshare search. It includes over 4 000 000 files. Loadingvault.com is a best search engine designed to search files in various file sharing and uploading sites. You can find the files shared on uploading sites that the other crawlers miss. Loadingvault.com provides relevant search results. Loadingvault.com will definitely make it easy for you to search rapidshare files instead of using complex Google operators. Try Loadingvault.com in my opinion the best rapidshare search engine ever. \ http://loadingvault.com
this is good
Rural development is the main cause of wildfires
Cool tip! Adam Phones www.adamphones.com
I completely agree with all that here is told So you can find the information on it on my search resource http://fileshunt.com
Thanks, Nice tutorial Does anybody know how can I convert html list into xml list?
I would like you to recomend http://rapidlibrary.com to look for files you are interested in. Now it's the best rapidshare search engine in the web. More than 6 000 000 files indexed. Try it and i think you will be satisfied with search results. Use search string.
Yes i did it. I get my Rss if some one need any thing. Maby U2 new song. http://mario.spletno-mesto.com/?feed=rss2 http://www.spletno-mesto.com We are promotors for web hosting if any one need.
dscdscdsczxdczxcsdc v
??????????? ????????? ?????? ?????? ????????, ???????????? ??????, ?????? ???????????? ????, ????????? ???? ??? ???
??????? ????????? ?????? ?????? ?? ?????????????, ??? ???????? ??????????? ????????, ????????? ??? ??????? ??????????? ????, ??????????? ???????????? ??????????? ??????
POS payment processing - why choose us?

Post a Comment




  



Spell Checker by Foundeo

Recent Entries



foundeo


did you hack my cf?