New NetNewsWire CSS

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:

  1. Download Ollicle Crisp

  2. 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.

Posted by: Oliver Boermans

Further thoughts and discussion

Update: Oct 27, 2004 Fixed an small spacing issue when particularly long Author names wrapped onto a second line.

Trackbacks

TrackBack URL for this entry:
http://www.ollicle.com/cgi-bin/mt/mt-tb.cgi/59

Comments

    • Posted by: Jonathan Lundell
    • Posted at: 5:15 AM 28 October 2004

    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.

    • Posted by: Marc Bizer
    • Posted at: 5:41 AM 28 October 2004

    Doesn’t produce the same results as your snapshot with NNW Lite 2.0b6.

  1. Great job. This is my favorite NNW style so far.

    • Posted by: Alex
    • Posted at: 6:19 AM 28 October 2004

    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?

    • Posted by: Nell[TypeKey Profile Page]
    • Posted at: 10:19 AM 28 October 2004

    Doesn’t work in NNW Lite for me either, but I like the blue mouseover.

    • Posted by: ollie[TypeKey Profile Page]
    • Posted at: 11:19 PM 28 October 2004

    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?

    • Posted by: Steve D
    • Posted at: 3:26 AM 19 November 2004

    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?

    • Posted by: ollie
    • Posted at: 7:34 AM 19 November 2004

    Steve - check out the link above “Version 2 of NetNewsWire”. It is still in beta but seems solid.

About the author

Oliver Boermans works as an interactive media designer in Adelaide, South Australia. This is his web interface — a place for Ollie to rant, reflect and share. Read more about Ollie

Home

Previous entry:
11 October 2004
A dream delicious client
Next entry:
15 November 2004
Inside-out NetNewsWire stylesheet