NetNewsWire meets Web Kit

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:

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