Updated NetNewsWire stylesheet
- Posted
11 September 2003 - Updated
25 January 2004
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.
My first NetNewsWire stylesheet
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 */
/* https://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%;
}