NetNewsWire meets Web Kit

Posted
6:56 PM 24 August 2003
Updated
8:51 PM 29 May 2011

Brent Simmons of NetNewsWire fame introduced us to the implications of utilising the Safari Web Kit in the latest beta of this wonderful RSS aggregator.

The fun really starts by allowing a custom style sheet to be specified:

inessential.com: Weblog

Another new feature in NetNewsWire is the ability to specify a custom style sheet to customize how HTML is displayed.

Keen to see this in action I had a go making my own NetNewsWire style sheet. The most interesting aspect of the CSS below is the use of fixed positioning to keep the title of the entry visible in the non-combined view.

/* 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 */
.newsItemTitle {
	font-family: "Lucida Grande";
	font-size: 1.1em;
	}


/* make titles stay at the top of the pane when scrolling */
/* and clickable all over */
.newsItemTitle a {
	display: block;
	width: 94%;
	padding: 0.2em 1% 0.2em 5%;
	position: fixed;
	top: 0;
	left: 0;
	}


/* 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;
	}

blockquote {
	background-color: #ddd;
	}

Here is a screenshot:
nnwscreen.jpg

If you are developing your own stylesheet it's probably worth mocking up a html "typical post" file and testing the rendering in Safari. The frequent quit then restart technique I used to refresh the rendering in NetNewsWire had the unfortunate effect of getting my reader banned from the feed at the top of my list.

Don't forget to include the divs class="newsItemTitle" and class="newsItemDescription" and let Brent know of your creation.

Further thoughts

Check out my Improved version.

Elsewhere

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
24 August 2003
Logjammin
Next entry
2 September 2003
No more archives