Adding a CSS StyleSheet to your RSS Feed

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

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

Trackbacks

Trackback Address: 208/D23E099BBF53AD9C31E96B96E828934A

Comments

On 03/07/2005 at 5:53:06 AM EST Evagoras wrote:
1
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

On 04/20/2005 at 4:37:13 PM EDT Umang wrote:
2
Excellent work. Implementing the tutorial, and probably the same layout on my site. :)

On 06/05/2005 at 11:28:47 AM EDT Vitaly Friedman wrote:
3
Thanks for an interesting technique! Added to Web-Dev-Bookmarks.

On 06/06/2005 at 4:51:12 AM EDT Octavian wrote:
4
Your Feed is not valid ;) feedvalidator.org indicates that the docs tag must be a full and valid URL

On 07/18/2005 at 3:34:49 AM EDT derek wrote:
5
Dont work in firefox at all>

On 07/18/2005 at 1:24:41 PM EDT Pete Freitag wrote:
6
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.

On 08/05/2005 at 12:20:16 PM EDT Wan Hsi Yuan wrote:
7
works great thanks you for the help

best reguard http://www.openposting.com

On 09/23/2005 at 11:01:55 AM EDT Joe Lencioni wrote:
8
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.

On 11/02/2005 at 12:46:43 PM EST imran wrote:
9
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

On 11/10/2005 at 5:52:21 PM EST jesse wrote:
10
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

On 11/20/2005 at 11:16:26 AM EST Ty Gossman wrote:
11
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...

On 12/26/2005 at 5:19:02 AM EST 552523 wrote:
12
http://www.google.com/search?q=Blog+Post+Comment+-Login+-Password+-

registered&hl=zh-CN&lr=&newwindow=1&start=390&sa=N

On 01/06/2006 at 3:27:10 PM EST Mike wrote:
13
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.

On 01/16/2006 at 11:41:23 AM EST Jim wrote:
14
> 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.

On 01/25/2006 at 5:16:20 AM EST Neil wrote:
15
Will someone please repeat this for an Atom feed!

On 02/06/2006 at 3:30:10 AM EST Heureka wrote:
16
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)

On 02/10/2006 at 3:54:40 PM EST Blake West wrote:
17
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.

On 02/28/2006 at 2:06:55 PM EST leorg wrote:
18
where does this go?

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

On 03/12/2006 at 7:48:22 AM EST Anonymous wrote:
19
Blake West: Thanks, the url is updated.

On 05/15/2006 at 12:30:39 AM EDT hoodia wrote:
20
You surely have one of the most interesting sites in net. This gave me so much information indeed! http://users.domaindlx.com/h57hoodia/

On 07/17/2006 at 10:24:38 AM EDT NEWS wrote:
21
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

On 07/17/2006 at 6:28:19 PM EDT NEWS wrote:
22
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

On 07/18/2006 at 7:50:41 AM EDT NEWS wrote:
23
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

On 07/19/2006 at 2:49:04 PM EDT NEWS wrote:
24
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

On 07/21/2006 at 4:23:49 AM EDT NEWS wrote:
25
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

On 07/26/2006 at 5:26:09 AM EDT A.C. wrote:
26
very good site I am surprised call at see on my site I have not worse my site available here is on this reference:

On 07/27/2006 at 8:54:00 PM EDT Ben wrote:
27
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,

On 07/28/2006 at 8:10:03 PM EDT Ravennauta wrote:
28
Beautiful and usefull site!

http://www.ravennauta.net Ravenna Directory

On 07/29/2006 at 11:41:56 AM EDT Eric wrote:
29
Wow!!! Good job. Could I take some of yours triks to build my own site?

On 07/29/2006 at 2:54:17 PM EDT Nike wrote:
30
Lucky to find you, keep on the good workk guys! Best of luck.

On 07/29/2006 at 3:31:42 PM EDT Bush wrote:
31
Your site is very convenient in navigation and has good design. Thanks!

On 07/29/2006 at 9:32:01 PM EDT Den wrote:
32
I enjoyed your page. Keep up the good work! Feel free to visit my page. It\'s cool too.

On 07/30/2006 at 1:42:33 AM EDT Elizabeth wrote:
33
Looking for information and found it at this great site...

On 07/30/2006 at 10:47:18 AM EDT Genry wrote:
34
Thank you for your site. I have found here much useful information...

On 08/22/2006 at 2:02:32 PM EDT eilander wrote:
35
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.

On 08/28/2006 at 5:13:03 AM EDT Lover wrote:
36
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

On 10/09/2006 at 11:17:55 PM EDT myname wrote:
37
On 10/09/2006 at 11:47:20 PM EDT Pravat Lama wrote:
38
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.

On 10/09/2006 at 11:50:22 PM EDT Pravat Lama wrote:
39
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.

On 10/13/2006 at 2:06:51 AM EDT Albert wrote:
40
Is anybody here i do not see anyone

On 10/15/2006 at 2:31:58 PM EDT Albert wrote:
41
Help me please I want to find my friends

On 10/24/2006 at 9:55:23 AM EDT diana wrote:
42
I am found in google this good sites:

Visit! :) I am creat this sites.

On 10/28/2006 at 12:40:15 AM EDT Milkas wrote:
43
http://designerimages.net/_upload/ http://danlacey.com/_upload/

On 12/05/2006 at 5:28:29 PM EST Irene wrote:
44
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.

On 12/05/2006 at 9:57:00 PM EST britney spears nude picture wrote:
45
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.

On 12/06/2006 at 3:04:23 AM EST baby britney second spear wrote:
46
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.

On 12/11/2006 at 7:39:14 PM EST dental insurance agents wrote:
47
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.

On 12/13/2006 at 3:53:49 AM EST pussies milf wrote:
48
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.

On 12/25/2006 at 8:22:00 AM EST biggest milf wrote:
49
Hairless Blond MILF Sucks Dick & Gets Cum In Eyes

On 12/28/2006 at 4:39:40 AM EST Oarymy Lee wrote:
50
Holy hit, it happened again, so what to do

On 03/17/2007 at 6:30:32 AM EDT John wrote:
51
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

On 05/11/2007 at 10:50:32 PM EDT Medigap Insurance wrote:
52
There are too many, not enough handicapped parking spaces in our city

On 08/04/2007 at 11:23:17 PM EDT diller wrote:
53
nice site... look on my site http://www.desklamp.fora.pl - desk lamp http://www.lampshades.fora.pl - lamp shades

On 09/05/2007 at 4:35:41 PM EDT cxbf wrote:
54
thank you!u

On 10/29/2007 at 7:57:55 AM EDT Dental Care Music wrote:
55
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.

On 10/31/2007 at 2:30:04 AM EDT Natural Baby Care wrote:
56
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

On 01/20/2008 at 9:44:28 AM EST viio wrote:
57
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

On 01/31/2008 at 10:17:03 AM EST Atul wrote:
58
this is good

On 02/05/2008 at 1:35:38 PM EST captain stabbin adventures wrote:
59
Rural development is the main cause of wildfires

On 03/14/2008 at 4:09:02 AM EDT M Woolgar wrote:
60
Cool tip!

Adam Phones www.adamphones.com

On 04/07/2008 at 11:07:21 AM EDT Rapidshare wrote:
61
I completely agree with all that here is told So you can find the information on it on my search resource http://fileshunt.com

On 10/11/2008 at 10:45:04 AM EDT Peter wrote:
62
Thanks, Nice tutorial Does anybody know how can I convert html list into xml list?

On 10/29/2008 at 6:55:28 AM EDT vlad wrote:
63
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.

On 12/02/2008 at 2:55:48 PM EST Spletko wrote:
64
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.

On 07/21/2009 at 8:39:08 AM EDT samiulla shariff wrote:
65
dscdscdsczxdczxcsdc v

On 08/07/2011 at 7:03:45 AM EDT ??????????? ???????? wrote:
66
??????????? ????????? ?????? ?????? ????????, ???????????? ??????, ?????? ???????????? ????, ????????? ???? ??? ???

On 08/07/2011 at 6:45:59 PM EDT ??????????? wrote:
67
??????? ????????? ?????? ?????? ?? ?????????????, ??? ???????? ??????????? ????????, ????????? ??? ??????? ??????????? ????, ??????????? ???????????? ??????????? ??????

On 02/03/2012 at 8:00:59 PM EST Credit Card Processing Equipment Directory wrote:
68
POS payment processing - why choose us?

Post a Comment




  



Spell Checker by Foundeo

Recent Entries



foundeo


did you hack my cf?