Custom Style RSS Feed

Give your RSS Feed a new look with CSS. If you have a website that has RSS feeds for comments, posts, updates or anything else you need to have it styled. Leaving your RSS Feed plain will make it blend in with all the other sites and even in some browsers make it difficult for users to read your sites RSS feed. Also giving your RSS feed a style that matches your site will show to your visitors that it’s part of the same company.

All you need to know to get started is CSS and possibly the knowledge to change how your RSS feed is rendered to change the location of some feed elements. Also you will have to add a line to your RSS feed generator to specify the stylesheet location.

Edit RSS Feed

The first part of the tutorial is to tell your XML Document (RSS Feed) where to load the stylesheet from. This will vary depending on what CMS you are using or if your site is custom coded. Hopefully if your site is custom coded you will easily be able to figure this out yourself.

Insert the following code to the top of your XML Document right after the XML opening tag.

<?xml-stylesheet type="text/css" href="rss-style.css" ?>

An example of how this will look is as follows.

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="rss-style.css" ?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">

WordPress Instructions

If you are using WordPress you will want to use the following instructions to modify the RSS feed. These instructions were written for WordPress 3.9.1. If you update WordPress these changes may be reverted and you will have to perform them again.

1. In your WordPress directory, open the file wp-includes/feed-rss2.php
2. Locate where the opening XML tag is. In version 3.9.1 it’s on line 11 inside of a PHP echo.
3. Replace the XML Opening tag with the following code, or just enter the new tag under it. Note that the PHP closing tag was at the end of the XML opening tag echo, you will have to move it as shown below.

	echo '<?xml version="1.0" encoding="'.get_option('blog_charset').'"?'.'>';
	echo '<?xml-stylesheet type="text/css" href="'.get_stylesheet_directory_uri().'/rss-style.css" ?'.'>';

This code will allow for you to place the file rss-style.css in your current theme directory and it will be used. So if you ever change templates you won’t have to modify this file again.

As for modifying the comments RSS feed you will need to open up the file wp-includes/feed-rss2-comments.php and make the same changes as we did above.

Creating The Style

Now to create the stylesheet. Depending on the platform and CMS you are using the location for this file will vary. If you are following the WordPress tutorial you will want to create the file rss-style.css and place it in your current templates directory.

The way the stylesheet works is like every other stylesheet. It uses CSS and doesn’t have any variations. But there are a few things that may throw you off.

• You will use the rss tag in place of the body tag now.
• All the elements are displayed as inline elements. You will need to specify them to be blocks.
• Making elements display type none is perfectly fine. The RSS clients will still be able to parse this data while making the end user not able to see the specific tag. This is a good method for hiding tags such as lastBuildDate, Language and GUID or Link.

Below is a very basic style you can use. It’s a modification of the style I am currently using for the GeekThis Feed Stylesheet.

* {
	padding: 0px;
	margin: 0px;
	display: block;
}
rss {
	display: block;
	font-family: sans-serif;
	background-color: #f2f2f2;
	color: #222222;
	font-size: 13px;
}
channel > title {
	font-size: 24px;
	font-weight: bold;
	margin: 10px 0px;
}
channel {
	width: 728px;
	margin-left: auto;
	margin-right: auto;
}
channel > item {
	background-color: #ffffff;
	border: 1px solid #d8d8d8;
	padding: 10px;
	margin-bottom: 15px;
}
	item > link, item > pubDate {
		color: #888888;
		font-size: 12px;
		border-bottom: 1px solid #f0f0f0;
		margin-bottom: 5px;
		padding-bottom: 5px;
	}
	item > link {
		float: right;
		text-align: right;
		width: 66.66%;
	}
	item > pubDate {
		float: left;
		width: 33.33%;
	}
	item > title {
		color: #00579B;
		font-size: 18px;
		margin-bottom: 5px;
	}
	item > description {
		margin-bottom: 10px;
	}
	item > category {
		background-color: #efefef;
		border: 1px solid #dadada;
		border-radius: 3px;
		padding: 2px 4px;
		display: inline-block;
		color: #888888;
		transition: color 0.3s linear;
	}
	item > category:hover {
		color: #222222;
	}

lastBuildDate, language, guid, channel > link {
	display: none;
}

Using the stylesheet above is very dependent on what RSS tags are present and the order they are in. For example copying and pasting the above will most likely cause your feed to look all jumbled until you make a few changes.

Known Issues

Sadly not all browsers “support” XML style sheets for example Firefox and Internet Explorer. They believe forcing their own styles for feeds is better for some odd reason. Because of this you can’t expect all users from seeing your styled RSS Feed.

There are some workarounds that people have found such as adding 512 bytes of empty space, such as spaces before the RSS tag but after the opening XML tag. This is because Firefox only parses the first 512 bytes of a file to figure out the type of file it is. Since it can’t figure it out the page is interpreted as a text/xml file and will follow the XML-Stylesheet tag. If you wish to use this method add the following code to your feed file. I place this code right after I specify the xml-stylesheet tag. I usually set the value to 1024 just in case some browsers parse more than the first 512 bytes.

echo str_repeat(' ',512);