Making Your RSS Feed Look Pretty in a Browser

As more and more non-techie websites offer syndication feeds, a growing number of non-technical readers are clicking on the links and filling their screens with confusing XML. The current method of subscribing to a feed--copying the URL from the link and pasting it into your newsreader application--isn't obvious to the new user. Filling their screens with markup or malformed text doesn't help endear your readers to your site's new feature.

But syndication content doesn't have to look like geeky markup or malformed text in your browser. You can make it look quite pretty, and give clues to what the feed is actually for.

How It Works

To make your RSS feed look pretty, you add a stylesheet to the feed. There are two types of stylesheets you could use here. The first, using XSL, is more complicated, but does give the potential for some powerful features; you could convert links within the feed into clickable links in the browser, for example.

The second, which we will explore here, uses CSS. CSS can't do anything but change the display of the feed, but it's much simpler, and most web designers know at least a little CSS.

In these examples, we will concentrate on skinning an RSS 2.0 feed. For RSS 1.0 and Atom feeds, the technique is exactly the same, but with different element names, as you will see.

To start off, we need to provide a pointer within the RSS feed to the stylesheet itself. Here I've called the stylesheet rss.css, and have it hosted at http://www.example.com.

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

Add that line to your RSS feed's template, save it, and rebuild the page (or whatever your own system needs to do).

Creating the Stylesheet

Remember, the simplest possible RSS 2.0 feed is this:

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/css" 
                    href="http://www.example.com/rss.css" ?>
<rss version="2.0">

<channel>
<title>The Simplest Feed</title>
<link>http://example.org/index.html</link>
<description>The Simplest Possible RSS 2.0 Feed</description>

<item>
<description>Simple Simple Simple</description>
</item>

</channel>
</rss>

First, we tell the browser to display all of the elements and define the typeface:

* {
display: block;
}

Then we give everything a nice margin. Notice how we're using the :root CSS selector here, and not the rss element.

:root {
margin: 50px;
}

Now we want to put the feed's name in big letters in the middle of the screen.

channel > title {
font-size: x-large;
text-align: center;
}

Here's the cunning bit. We want to tell people that they are not looking at a real web page, just a rendition of a feed. Here we use the advanced features of CSS to place a message after the title. I've styled it as a big grey box with the writing in the middle:

channel > title:after {
display: block;
padding: 50px;
content: "This is an RSS feed, designed to be read in an RSS application.";
background-color: grey;
color: white;
}

With the warning out of the way, we can display some of the information found in the RSS news items.

item {
margin: 25px 0 20px 0;
}

item > title {
font-size: medium;
margin-bottom: 20px;
}

item > link {
font-size: small;
margin-top: 6px;
margin-bottom: 6px;
}

item > description {
font-size: small;
}

item > pubDate {
font-size: small;
}

Of course, the feeds also contain a lot of other information. I don't want to display that stuff, so we use CSS to turn it off.

channel > link,
channel > copyright, 
channel > lastBuildDate, 
channel > generator, 
channel > docs, 
language, 
lastBuildDate, 
ttl, 
guid, 
category {
display: none;
}

Here's the complete code:

* {
display: block;
}

:root {
margin: 50px;
}

channel > title {
font-size: x-large;
text-align: center;
}

channel > title:after {
display: block;
padding: 50px;
content: "This is an RSS feed, designed to be read in an RSS application.";
background-color: grey;
color: white;
}

item {
margin: 25px 0 20px 0;
}

item > title {
font-size: medium;
margin-bottom: 20px;
}

item > link {
font-size: small;
margin-top: 6px;
margin-bottom: 6px;
}

item > description {
font-size: small;
}

item > pubDate {
font-size: small;
}

channel > link,
channel > copyright, 
channel > lastBuildDate, 
channel > generator, 
channel > docs,
language,
lastBuildDate,
ttl,
guid,
category {
display: none;
}

Final Thoughts

This technique is, of course, as hackable as CSS itself. Real CSS wizards can make RSS feeds look very beautiful indeed. The one downside to using CSS is that the links aren't clickable. Using XSLT instead of CSS would allow this. Indeed, XSLT would allow you to create a site made entirely out of RSS or Atom. But that is for another article.

Essential Reading What Are Syndication Feeds By Shelley Powers Table of Contents Syndication feeds have become a standard tool on the Web. But when you enter the world of syndicated content, you're often faced with the question of what is the "proper" way to do syndication. This edoc, which covers Atom and the two flavors of RSS--2.0 and 1.0--succinctly explains what a syndication feed is, then gets down to the nitty-gritty of what makes up a feed, how you can find and subscribe to them, and which feed will work best for you. Read Online--Safari Search this book on Safari:   Only This Book All of Safari Code Fragments only

Ben Hammersley is by day a mild-mannered author of Content Syndication with RSS, by night Crime Fighter. Ben Hammersley lives in Florence, Italy and at www.benhammersley.com.

Return to the O'Reilly Network