The Open Sourcerer Gets A New Theme

I’ve been meaning to do this for some time now. It is time for a small face-lift.

I spend quite a bit of my time doing work for clients on Joomla! including building clean templates from a graphic designer’s images. But I haven’t needed to build a template (theme) for WordPress before which felt like I’d been missing out on or something.

So, here is my first – from scratch – WordPress theme. I’ve called it “Open Sourcerer”. I hope you like it and it works in your browser; please do tell me if it doesn’t although any IE6 users will have to put up with a fixed width layout because I really can’t be arsed to hack around that oh-so-crappy browser when I’m not being paid. Another great “feature” of IE 6 & 7 from my tests is that apparently Microshit are unable to make the text cursor (I-beam) adapt to the environment it finds itself in, so consequently it is very hard to see it against this dark brown background colour. Honestly, is it really so bloody hard to get right? Firefox seems to manage it fine, as does Midori, a “lightweight” Webkit based browser. So if you are reading this with IE and wonder where your cursor has gone, go and get a proper browser for pete’s sake. Anyway, enough of trying to pander to bad commercial software.

This theme is a flexible-width layout from 800-1200px wide which should be fine for most users. The sidebar with the widgets is fixed at 215px currently. If there are any WordPress gurus out there I’d appreciate any feedback on what’s missing or important from this theme. Comparing “Open Sourcerer” to the Default theme there are quite a few other php files in there which I saw no need for. Perhaps overriding the defaults is only necessary if you have a specific kind of layout?

After reading a bit and getting nowhere regarding how to create a WordPress theme from scratch, I came across this gem of a how-to. It’s concise, clear, straightforward and simple. That suited me fine and got me started; thank you Sam Parkinson for sharing your knowledge with us.

Ubuntu Desktop with the Dust ThemeI really like dark backgrounds for blogs. The inspiration for this one started by stumbling across this Dark Smoke theme quite by accident and then thinking about the colours of the “New Wave” and “Dust” themes for Gnome that are supplied in Ubuntu 9.04 (Jaunty Jackalope). Here is my desktop using the Dust theme (yes I know I shouldn’t have all those files lying around!).

So, what you see here is a fairly simple 2 column theme, that is flexible in width between 800 and 1200px. The lovely dark brown [almost black] background colour is the same as used in the Dark Smoke theme mentioned above. The other browns are simply lighter shades of the same I achieved in Gcolor2 by just shifting the brightness value. The red is The Open Learning Centre‘s logo colour (#D40000) and the main text colour is taken straight from the Gnome windows and panels in a default Ubuntu desktop using the Dust theme. As for typefaces, if you have the free and open Liberation fonts installed, which I strongly recommend, that will be the font-type rendered. Alternatives are (in order) Arial, Helvetica, sans-serif;

The graphic at the top is a section cut from one of the fantastic Hubble telescope images that are freely available. This one in fact.

One aspect of template creation and maintenance I am very keen on is the separation of stylesheets by function. In the main style.css file in my theme, you won’t find much actual styling other than some global resets. What you will see however is this:

/* Make it easy to alter stuff... */
@import url("css/layout.css");
@import url("css/header.css");
@import url("css/menu.css");
@import url("css/content.css");
@import url("css/sidebar.css");
@import url("css/footer.css");
@import url("css/wordpress.css");
@import url("css/tweeks.css");

Hopefully the names of the stylesheets are enough to identify what styling they contain. To my mind this makes it so much easier to navigate when you want to make a change as opposed to trawling through one very long and usually randomly ordered stylesheet.

You can download the theme from here and can modify, hack and/or edit as you wish. It is released under the GPLv3 License.

Update: I made a few small changes to the theme in the vain hope that it may be acceptable for the WordPress.org Theme Directory. Thanks Kirrus for making the suggestion. It was a good idea and made me test my theme more thoroughly too!

Update 2: It worked. This theme has been accepted and is now being hosted on the Theme Directory. I wrote a short piece about that here.

Tags: , , , , , , ,

10 Comments

  • Kirrus says:

    Nice theme!
    Can you put it on wordpress.org/extend ? :)

  • Martyn says:

    Nice one Alan

    Martyn

  • Jack Hughes says:

    nice. love the new theme! :)

  • Victor says:

    Ow. White text on black background? Anyone else’s eyes hurt? x_x

    This is generally not a good idea for web pages as most web pages are black-on-white, instead of like this. Going from black-on-white to white-on-black is a real eye-fudger, and vice versa. It would be nicer if all web pages were the same as it is common to flip between pages. Even going from black-on-white to looking out the window is a pain for most.

    No complaints about the aesthetics, however! It looks awesome to me, black and white are great complements to each other, but the contrast is just too great for lenghty reads.

    • Kirrus says:

      Personally, I am a great proponent of the dark background, light text. I just find it easier to read… Mad maybe, but there it is…

      Would be nice if the buttons and field entry boxes could be similarly coloured, but it’s fine as it is.

      • Alan Lord says:

        @Kirrus, many thanks again. These comment boxes are coloured right. The only one I can think you are referring too is the search box? Is that right?

        It’s a good idea about the buttons. I’ll have a play around with Inkscape when I get chance and see if I can come up with some that match better. If you have any suggestions please feel free :-)

  • [...] passer by called Kirrus suggested I submit it to the WordPress Theme Directory. Which I thought was a cracking idea and one that [...]

Leave a Reply

XHTML: You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>