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:
Ollicle Crisp.

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.

Further thoughts

27 October 2004

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

Comments

  1. Jonathan Lundell
    Commented
    12:24 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.

  2. Marc Bizer
    Commented
    12:24 AM 28 October 2004

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

  3. Commented
    12:24 AM 28 October 2004

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

  4. Commented
    12:24 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?

  5. Nell
    Commented
    12:24 AM 28 October 2004

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

  6. Commented
    12:24 AM 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?

  7. Commented
    12:24 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?

  8. Commented
    12:24 AM 19 November 2004

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

Oliver Boermans is a design geek in Adelaide, South Australia: ollicle.com is a place for Ollie to rant, reflect and share. Feed

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