Updated NetNewsWire stylesheet

Posted
1:04 AM 11 September 2003
Updated
8:51 PM 29 May 2011

After using my proposed CSS for NetNewsWire for a few weeks I’m very happy with it. Giving something back to the wonderful NetNewsWire was good for the warm fuzzies but has also improved my everyday experience using it.

My trial period with the new look RSS feed did have one hitch. The static positioning news item title worked wonderfully 99% of the time, but posts with particularly long titles would wrap causing the title to occupy two lines - obscuring the first line of the description below it.

The new improved stylesheet addresses this by fixing the height of the title. To reduce the chances of titles wrapping they now use a smaller text size. Thanks to the magic of ems the font sizes are proportional to what ever is set in your NetNewsWire preferences.

To cater for feeds that include full posts there is now a maximum width for the news item description. This prevents the text stretching the full width of the screen when the message pane is open wide to reveal the date, subject and creator columns. This narrower measure of text is much easier on the eye - a factor all too often forgotten by designers enamoured by their flexible layouts.

Download ollicle_nnw.css

Further thoughts

A number of people kindly informed me that my uploaded file was flawed. Hopefully it is okay now. As a standby here is the CSS to copy and paste:

/* Stylesheet for NetNewsWire */
/* http://ranchero.com/netnewswire/ */

/* CSS by Oliver Boermans */
/* http://www.ollicle.com */

/* Updated 25 Jan. 2004 */
/* Fixed positioning now works for non-linked titles */

/* remove page margins and add some line spacing */
body {
    line-height: 1.7em;
    margin: 0;
    padding: 0;
    }


/* Use background colour instead of link underlines */
a {
    text-decoration: none;
    background-color: #ddf;
    }


/* specify link colours - including rollover and visited */
a:link {
    color: #000;
    }
a:visited {
    color: #609;
    }
a:hover {
    color: #00c;
    }


/* assign specific font for titles - overrides NNW preferences */
/* also provides styling for unlinked titles */
.newsItemTitle {
    font-family: "Lucida Grande";
    background-color: #eee;
    color: #666;
    }

/* make titles stay at the top of the pane when scrolling */
.newsItemTitle {
    padding: 0.2em 1% 0.2em 5%;
    position: fixed;
    top: 0;
    left: 0;
    width: 94%;
    height: 1.8em;
    overflow: hidden;
    }

/* and clickable all over */
.newsItemTitle a {
    display: block;
    width: 100%;
    margin: -0.2em -1% -0.2em -5%;
    padding: 0.2em 1% 0.2em 5%;
    }


/* specifiy colours of title background - including a rollover */
.newsItemTitle a:link {
    background-color: #ccc;
    color: #333;
    }
.newsItemTitle a:hover {
    background-color: #37d;
    color: #fff;
    }


/* add some page margins back for description text */
.newsItemDescription {
    padding: 1em 5% 1em 5%;
    margin: 0;
    max-width: 40em;
    }

blockquote {
    background-color: #ddd;
    padding: 0.5em 2% 0.5em 2%;
    }

Update: Ollicle Crisp for NetNewsWire version 2

Comments

  1. Commented
    1:04 AM 11 September 2003

    Call me crazy, but I can’t distinguish any differences between content in NNW with or without this CSS file. Any chance you might be able to post a screenshot of what the result should look like? I think it’s possible that the line-endings of the CSS file were mangled somewhere along the way…

  2. Dan
    Commented
    1:04 AM 11 September 2003

    It might be more helpful to re-post this as straight ASCII — For me, it downloaded as a unicode (UTF-16) document, but it wasn’t recognized as such, probably because the first two bytes of the file weren’t the proper values.

  3. Ortwin Zillgen
    Commented
    1:04 AM 11 September 2003

    I love the old more and will stay with that :-)

  4. Commented
    1:04 AM 11 September 2003

    You’re right Dan - My bad - I have replaced the somewhat broken css file with one the should work. Sigh

  5. Commented
    1:04 AM 11 September 2003

    Third time lucky?

    Thanks Ortwin. That was not my intended result - the new stylesheet ought to look very similar to the first - with just the changes described above.

    I have learnt my lesson of the day. Test first. Upload second.

  6. Commented
    1:04 AM 11 October 2003

    Now updated for 10.2.8 :)

  7. Commented
    1:04 AM 25 January 2004

    Unlinked titles, left in the lurch by the previous version, are now also have fixed positioning and appropriate styling.

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
6 September 2003
Scientific literacy for designers
Next entry
14 September 2003
404 with more