Customize Safari's RSS feed with CSS

Jul 15, '09 07:30:00AM

Contributed by: tedw

This follows up on an older hint about changing Safari's RSS appearance. If you find it hard to distinguish between unread and read articles in Safari's RSS feeds, or if you're just tired of looking at pastel shades of blue, you can change the appearance of RSS pages fairly easily. All you need to know is a little CSS. For example, if you want unread articles to be highlighted in an easy-to-spot sage green color, make a plain text file with the following text and save it with a .css extension:

@media screen {
	div.apple-rss-unread { 
		background-color: rgb(202, 255, 157) !important; 
	}
}
Save that file somewhere convenient, open Safari preferences, choose the Advanced tab, and use the "Style Sheet" pull-down menu to select the new file as your style sheet. After you restart Safari you'll see the new colors.

There's a lot more you can do, if you want to experiment a bit. For instance, this code will change the highlight color of unread items, and also change the blue header bar to whatever image you have in path/to/an/image:

@media screen {
	div.apple-rss-unread { 
		background-color: rgb(202, 255, 157) !important; 
	}
	#apple-rss-banner {
		background-image: url(path/to/an/image) !important;
	}
}
The CSS file for RSS pages is located at:

System/Library/Frameworks/PubSub.framework/Versions/A/Resources/PubSubAgent.app/Contents/Resources/Main.css

You can look through that to see what elements of the RSS pages you can modify. You could modify that file directly, as it suggests in the older hint, but it's easier and safer to make a separate file and set it as your style sheet.

Comments (3)


Mac OS X Hints
http://hints.macworld.com/article.php?story=20090710125758451