RSS feeds with a Safari CSS Theme
Safari RSS?
Safari RSS is Apple’s default web browser for Mac OS X Tiger. As indicated by its name, it now features a built-in RSS (and Atom) reader. Aside from the powerful feed indicator and notification functions, Apple has created an elegant design as an alternative to complicated-looking XML-based feeds. While the XML format is intended to be human-readable, Apple has coated it over with blue accent gradients and hidden all the tags. For many users, this will be the defining look of RSS/Atom feeds.
We can make our RSS/Atom feeds look similar to the Safari RSS look. All we need is the proper CSS file linked as a stylesheet from our RSS/Atom XML file.
Some Background
When you load an XML feed in a web browser, it’ll often display raw XML tags in a hierarchy tree. Users who unknowingly click on an orange RSS button experience this. Why confused people with a dead end page?
Other websites have began to style their XML feeds with CSS. Dive Into Mark’s Atom Feed mimics his website. Sam Ruby also posted an Atom+CSS example. All current Blogger/Blogspot Atom feeds are greeted with CSS-styled XML. In addition, Atom’s inclusion of an
Make it So!
Make a backup of your RSS/Atom templates.
Add the xml-stylesheet tag into the second line of your RSS or Atom feed.
RSS 2.0:
<?xml version=\"1.0\" encoding=\"utf-8\"?>
<?xml-stylesheet href="feed.css" type="text/css"?>
<rss version="2.0?>
<channel>
<title>starvingartist</title>
...Atom 0.3:
<?xml version=\"1.0\" encoding=\"utf-8\"?>
<?xml-stylesheet href="feed.css" type="text/css"?>
<feed version="0.3?
xmlns="http://purl.org/atom/ns#"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xml:lang="en">
<title>starvingartist</title>
...
This is a syndicated feed, designed to be read in a syndicated feed reader. I recommend BlogLines (web-based), SharpReader (Windows), or NetNewsWire Lite (Mac OS X). Just paste the address of this feed into the feed reader to "subscribe" to this feed, and you'll always be up to date with the latest news.
Upload the following customized CSS file (feed.css) and image files (bgside.png, bgtitle.png, info.gif) into the same directory as your RSS and Atom XML feeds. This styles your XML into the Safari look.
Load up your XML Feed files. Now, with the CSS file, your RSS 2.0 or Atom 0.3 should look like this:
So What?
At the very least, raw XML is not displayed to user. They’re presented with something much more simplified and helpful. It also shouldn’t affect syndicated feed readers, since the XML stylesheets aren’t usually applied. While this currently works only for RSS 2.0 and Atom 0.3 XML feeds, it can be modified to work with any other XML document. Client-side XSL Transformations could be used to modify the XML much further than CSS styles. It’s currently being used by services such as FeedBurner and is supported in IE5/Win, Mozilla and Opera 8.
Notes: There’s some extra padding issues with IE that are still unresolve. And I’m having problems styling RSS 1.0 feeds. Anyone have any ideas? Feel free to play around with it. 
July 6th, 2004 at 6:58 pm
That’s cool. I had never heard of XML style sheets.
July 30th, 2004 at 11:32 pm
Is it possible to get this style sheet to work in firefox Sage Rss Reader extension, I really like the design.
August 2nd, 2004 at 12:07 am
Ben: I haven’t used the Sage RSS/ATOM feed aggregator before, but I believe you can modify the HTML templates and the CSS file by editing the files under your Sage’s “chrome://sage/content/res/” folders (where ‘chrome’ is located depends on where you installed it).
You’ll find “template-html.txt”, “template-item.txt” and “sage.css” to modify.
August 14th, 2004 at 1:57 am
For those still looking for a Sage skin, there’s a Safari RSS Skin for Sage available for download at deviantART. Instructions notes are available in the artist’s comment area.
August 27th, 2004 at 1:49 pm
您们好，我的朋å‹ä»¬ï¼æˆ‘å¾ˆé«˜å…´èƒ½ä¸Žä½ ä»¬äº¤æµã€‚å¬ç€ï¼Œæˆ‘真诚的朋å‹ä»¬ï¼Œä½ 们的确åšå¾—很ä¸é”™ï¼Œæˆ–许å¯ä»¥è¯´æ˜¯æ£’æžäº†ï¼æˆ‘很希望能为google的未æ¥æœåŠ¡ã€‚
谢谢ï¼
November 15th, 2004 at 4:11 pm
I second what è§å³° said.
November 23rd, 2004 at 9:24 am
Very nice idea, im afraid I this might be the default stylesheet for my feeds now.
On another note, I just saw the minimal screenshot and I must say that looks very nice indeed. If this any news on when Joe Public will be able to play with it?
December 30th, 2004 at 11:08 am
Nice! My Sage is now über-Safari’ef up. w00t!
April 14th, 2006 at 7:24 am
The links seem to be down.
November 26th, 2006 at 3:04 pm
Awesome site by the way. I hope everyone gives you at least $20.00 like I have to keep this site up. Thank you!!
September 8th, 2011 at 2:40 am
This is a actually incredible potent source that you’re offering and you simply offer it away cost-free!! I enjoy discovering websites which can be conscious of the particular within providing you with an excellent studying source regarding absolutely no expense. We genuinely dearly cherished examining this website. Enjoy it!
September 10th, 2011 at 10:54 am
Thanks a lot for giving everyone remarkably splendid opportunity to read articles and blog posts from this website. It’s usually very terrific and as well , jam-packed with a lot of fun for me and my office friends to search the blog at minimum thrice in one week to see the newest things you have got. And indeed, I am actually pleased for the wonderful creative ideas you serve. Selected two areas in this article are essentially the simplest we’ve ever had.
September 10th, 2011 at 3:16 pm
I in addition to my pals came viewing the best secrets and techniques from the blog while suddenly I had an awful feeling I never expressed respect to the web blog owner for those strategies. All of the guys were excited to read them and have seriously been using those things. Many thanks for being indeed thoughtful and for figuring out this kind of incredible guides millions of individuals are really needing to know about. Our honest apologies for not saying thanks to sooner.
September 12th, 2011 at 6:04 pm
I and also my guys have already been looking through the good pointers found on your site and so immediately developed a terrible suspicion I had not expressed respect to the blog owner for those strategies. Those young men became for this reason joyful to learn all of them and have in effect really been loving them. Appreciate your simply being so helpful as well as for using this form of awesome topics millions of individuals are really wanting to discover. Our own honest regret for not expressing gratitude to you sooner.
September 12th, 2011 at 6:24 pm
I wanted to send you the bit of note so as to thank you very much as before for your striking opinions you have documented in this article. This is quite surprisingly open-handed of you to make extensively what a number of people could have distributed for an ebook in making some profit for their own end, specifically since you might well have tried it if you wanted. The inspiring ideas likewise worked to provide a easy way to realize that other people have similar dreams just as my personal own to see a whole lot more regarding this issue. Certainly there are several more enjoyable occasions in the future for those who read through your blog post.
September 13th, 2011 at 2:32 pm
I need a missing file for a program I have on my computer. I don’t know how it got deleted but it’s gone. I googled the file and found tons of websites to download the file I need, but I heard they may have bad viruses with them. Can anyone help me?
September 16th, 2011 at 7:14 pm
Great written content and great layout Your blog deserves all the positive feedback its been getting
January 4th, 2012 at 3:24 pm
I think you have remarked some very interesting details , thanks for the post.
January 22nd, 2012 at 7:34 am
anna laser tandblekninng…
[...]y Very few sites that happen to be detailed below, from our point of view are 4y[...]…