Once more with style – Horizon

Returning visitors will notice the style sheet has changed again. This is because there are themes on WordPress.com that I like, and themes that allow 500px wide pictures in from Flickr, but very few that do both. Also a lot of the old content worked using styles which aren’t available in teh standard sheets. For instance labelling a div with the class illus made it centred with smaller text for captions. It also allows for larger text and Palatino for reading polytonic Greek. Mac users get Lucinda Grande I think.

Everything else like colours etc is there because the only editable style sheet for the theme sandbox comes with absolutely no styling whatsoever. I’ve cut down the number of posts that appear on the front page, but I can expand it out again if it’s a problem.

Below the fold is CSS stuff which may be of interest to WordPress.com users, but is of no use to anyone else. The style sheet is called Horizon and is based on the Kubrick/K2 sheet in the forum. What I wanted was something that could take 500px wide photos in the content section, list the archives and categories without interminable columns but also easy to use. The sheet is in three parts. The content section down the left, the primary sidebar and the secondary sidebar.

The primary sidebar uses text-1 to store a “return to home page” link. This is necessary because the header is textless, so if someone landed on a post page it would be redundant on the homepage to body.home li#text-1 is set to display:none. This means it appears everywhere except the homepage. Apart from that I think things can be dropped into primary as you like, though I’ve only tested it for my own needs.

The secondary sidebar is a bit of a fudge. It only carries the archives and categories listings and if you view the style sheet you’ll see it’s a bit messy. Every time I try and tidy it up it breaks. I’ve left it because I don’t think there’s a lot I’d want to put in there.

Problems * In a perfect world I’d be able to have a horizontal Flickr bar along the top of the secondary section. The Flickr widget forbids this as it includes breaks in the code. * The ABBR tags, which carry the post-date, don’t style in Internet Explorer. This is a feature of Internet Explorer. They do style in Mozilla and Opera. * Internet Explorer and Mozilla/Opera handle lists differently. There isn’t the large indent on the lists in IE that you see in Mozilla and Opera.

The Graphics

This is where I pull the graphics from. You’re welcome to use them if you want, apart from the header which I got from iStockphoto and I don’t have the rights to release. Sticking them in this post means they should be on the server and usable for the style sheet.

The background image – repeated horizontally but not vertically:

The black text background – used in the headers and meta

The blue text background – used in ABBR, navigation and secondary headers

The Secondary background, from the Absolute Background Textures Archive

..and the header – scaled to avoid breaking the style sheet.