Custom style sheets

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

This is a direct result of switching to use Web Kit for HTML display. (Have I said lately how much I love Web Kit? I do love it.)

Here’s a screen shot of my HTML prefs panel: note that I’ve chosen to use a custom style sheet.

Here’s my personal custom style sheet.

a {
	text-decoration: none;
	}
a:hover {
	color: red;
	}
body {
	line-height: 17px;
	}
.newsItemTitle {
	border-top-width: 0;
	border-bottom-width: 1px;
	border-right-width: 0;
	border-left-width: 0;
	border-style: dotted;
	border-color: #9999CC;
	}

Here’s a screen shot of the result.

What my style sheet does:

1. It turns off link underlining.

2. It makes it so links turn red when you mouse-over.

3. It adds some space between lines of text.

4. It puts a thin dotted border below the title.

Note that .newsItemTitle is special to NetNewsWire—it’s a div that wraps the title. There’s also a .newsItemDescription for the main part of the description.

(In Combined View, the title isn’t part of the HTML, so only .newsItemDescription is available there.)

This is definitely a power-user feature: most people probably won’t do this. And that’s cool. But it’s one of my favorites, anyway.

If you’re a NetNewsWire user, and you post your custom style sheet on the web, please send me the URL so I can link to it.