New NetNewsWire CSS
- Posted
- 12:24 AM 27 October 2004
- Updated
- 8:51 PM 29 May 2011
NetNewsWire first provided the facility to style your incoming news feeds with CSS over a year ago. Back then I created a stylesheet for NetNewsWire that kept the news item title visible while you scrolled the page. Version 2 of NetNewsWire (currently in beta) provides a bunch of new elements for a custom stylesheet to get a handle on. The possibilities provided by these new elements, and the fact that my old CSS is broken in this new version, motivated me to create a fresh style for NetNewsWire 2.
Here’s a screenshot:
.
If you are running the beta - install my style and let me know what you think:
Download Ollicle Crisp
Unzip and place ‘Ollicle Crisp’ with your other styles in:
~/Library/Application Support/NetNewsWire/StyleSheets/
The styles bundled with the NetNewsWire 2 beta give a good taste of what’s possible. Presenting a broad spread between fun and clean utility. I set out to create a design for everyday reading, one that sits back and lets the text do the talking.
I’ve attempted to make the styles respond appropriately to your selected font size and favoured layout. Technically the only new element to my CSS is the display of the URI of the source of the feed. This attribute is made visible with this bit of CSS:
.newsItemSource a:after {
content: attr(href);
}
When a favicon is available a second <a> is generated, as a result the above CSS will create the URI twice. This redundancy is removed with a little more CSS that may be unfamiliar to designers accustomed to accommodating the limitations of Internet Explorer. :
.newsItemSource a + a:after {
display: none;
}
I have included some basic comments in the CSS file if you’re interested in reverse engineering the design any further.
Further thoughts
27 October 2004
Update:
Fixed an small spacing issue when particularly long Author names wrapped onto a second line.
Does NNW Lite not support the addtional info (author, etc)? I’m not seeing it.
The mouseover blue flash of the headline is a little distracting.
Doesn’t produce the same results as your snapshot with NNW Lite 2.0b6.
Great job. This is my favorite NNW style so far.
Love the style! It narrows the text area in the traditional view to make reading a lot easier. Any thoughts to a wide-screen specific version?
Doesn’t work in NNW Lite for me either, but I like the blue mouseover.
Jonathon, Marc, Neil: no the Lite version doesn’t display the additional info in the feed content - as a result this style will not look much different to my previous design unless you are running the full version.
Alex: I think you have shown me up as a traditional view user! The style does display differently in widescreen view - the meta information appears underneath rather than to the right of the description. Perhaps I should ask the question of widescreen users; How wide (in pixels) do you keep your news pane?
I have the regular (purchased) version of NNW but my entries don’t display as per the screen shot. Am using the Combined view. Any particular settings I need to change?
Steve - check out the link above “Version 2 of NetNewsWire”. It is still in beta but seems solid.