Submit Hint Search The Forums LinksStatsPollsHeadlinesRSS
14,000 hints and counting!

Customize Safari's RSS feed with CSS Web Browsers
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.
    •    
  • Currently 2.00 / 5
  • 1
  • 2
  • 3
  • 4
  • 5
  (6 votes cast)
 
[8,573 views]  

Customize Safari's RSS feed with CSS | 3 comments | Create New Account
Click here to return to the 'Customize Safari's RSS feed with CSS' hint
The following comments are owned by whoever posted them. This site is not responsible for what they say.
Customize Safari's RSS feed with CSS
Authored by: vertigo on Jul 15, '09 10:19:13PM

These are great! I figured you *could* do this, and it's nice to see how.



[ Reply to This | # ]
Customize Safari's RSS feed with CSS
Authored by: hypert on Jul 19, '09 09:24:35PM

Great hint, but it didn't work for me. Created the file, applied the CSS, restarted Safari. RSS feeds still work the same. I'm familiar w/ CSS (and with copy-paste!), so I don't think it's a problem with the CSS file. I'm using Safari 4.0 w/ 10.4.11 + Glims, etc.

Any thoughts?



[ Reply to This | # ]
Customize Safari's RSS feed with CSS
Authored by: tedw on Jul 20, '09 08:48:03AM
interesting... I would normally assume that the CSS used on 10.4 and 10.5 would be the same, but since it's actually part of the PubSub system (not part of Safari) it might use different keys. did you check the PubSub CSS file (or view the page source) to see if the keys are the same?

the other thing to try is to right-click on an unread feed and choose the 'Inspect Element' option (which may only be there if you have Safari's debug menu enabled). this usually gives you a decent idea of where cascades go wrong. open the Computed Style section on the left: either you won't see your CSS style sheet listed (meaning something's gone wrong: your sheet isn't being loaded or you have the wrong keys), or you will see it and the important bits will be struck out (meaning that some other style element is superseding it).

[ Reply to This | # ]