Customize Safari Reader!

[lionheartednyhc]

Found out how to customize safari reader. I have always been fond of instapapers inverted colors (white text on black) as I find it easier to read. Here is how to get the same effect on reader:

browse to safari.app/contents/resources/reader.html

Open it in your favorite editor (you will need to change permissions to allow you to edit it)

Find the CSS area that begins with .page {

Change "background" and "color" to whatever suits you!

To change link color, it is under .page a { at the top of reader.html


Here is mine:

 

[lionheartednyhc]

Sorry to Necropost my own post, but I noticed that reader.html no longer exists in Safari 5.1, therefore there is no way (that I am aware of) to customize reader anymore.

Im wondering if anyone who is more capable than me has any ideas?

Thanks!

 

[miknos]

File is now in /System/Library/PrivateFrameworks/Safari.framework/Versions/A/Resources.
I would love to make Reader look like Reeder app (brownish background with dark grey text) which is easy on the eye (contrary to the setup you mentioned). You could make your text grey instead of (bright) white.

More info:
http://schutt.org/blog/2011/08/customizing-safari-reader-in-5-1-the-solution/


Reeder app example below:

 

[lionheartednyhc]

File is now in /System/Library/PrivateFrameworks/Safari.framework/Versions/A/Resources.
I would love to make Reader look like Reeder app (brownish background with dark grey text) which is easy on the eye (contrary to the setup you mentioned). You could make your text grey instead of (bright) white.

More info:
http://schutt.org/blog/2011/08/customizing-safari-reader-in-5-1-the-solution/


Reeder app example below:

Awesome, thank you so much for posting this update! Its great to have my old reader back. What you want seems like it should be easily doable, just need to update those two spots in the css. Let me know if you need help.

 

[miknos]

Actually I might need help. Reeder is much more pleasant to the eye than Reader.

Could you make the adjustments to the CSS to have the same typography and background (this noisy beige, similar to paper)?



This is the css inside Reeder.app: