This Theme

This WordPress installation is running 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 (The WordPress Extend Theme repository) and you can modify, hack and/or edit as you wish. It is released under the GPLv3 License.

I have updated the theme a few times. The current version number is displayed in the style.css file and in the changelog.txt file as well as in the WordPress Theme administration screens. Here’s an i-frame pointing at the current changelog file:

If you can’t see it, here’s a link to the same file.

Any feedback gratefully received. If you use the theme and want to, send me a link here in the comments.

18 Comments

  • rustam says:

    Hi, i think i’m gonna try this one (but not in hurry i guess), i love dark theme, thanks for the good job. i’ll let you know if i have install it in.

  • Zombaya says:

    If you like theming, then you might want to check out thematic. It’s a clean theme which resets all css for browsers and generates a nice superfish-menu (dropdown with ajax). You can subtheme to that theme, so when thematic updates when additional features are added, you keep your adjustments. I used it and enjoyed it very much since I only had to adjust the css-file.

    You can find thematic at http://www.themeshaper.com

  • I quite like your theme. There is one problem with the way you’ve separated out the stylesheets: only the main css file can be edited within WordPress 2.8 editor – I need to pull the .css files down by FTP to update them. Kind of annoying if I want to make a small change or try something out quickly.

  • Alan Lord says:

    @Technical Bard,

    Thanks for dropping by and you make a good point. The way I access my WordPress install (ssh) this doesn’t give me a problem and I really like the way separation helps with maintenance. Perhaps this could be a “feature” of WordPress that should be addressed? A simple addition so you can browse the directory structure with the editor… I might jump on a forum and suggest it.

    Alternatively there is nothing stopping you from aggregating the individual files into the main style.css and then remove the @import lines. You could always add a /*Separator*/ of some kind between the various stylesheets so you can still find what you need easily I guess.

    FYI – I had to make 2 small changes to the stylesheet for WP2.8 that are in my changelog but I haven’t issued an update to wordpress/extend yet.

    1.5 (June 11th 2009)
    In css/wordpress.css
    * Made a couple of small changes introduced in WP 2.8:
    the tag cloud widget’s id changed to #tag_cloud-2. Used to be #tag_cloud.
    the search widget’s label changed causing the layout to break. Increased the
    width of the label so it introduced a line break.

  • Hi, great theme, I’ve been using it for my paranormal blog for some time and I love it. The single complaint I have is in page link display.

    When subpages are added, the theme displayes them in the header, no matter how many there are, and I can’t find any way to change this to either not being displayed, or to being listed in a drop down on roll over.

    I’m not well versed in CSS or html, so I don’t know how to do this by code. Will this be included in any future versions?

    Thanks, and keep up the great work!

    • Alan Lord says:

      Hi Martin,

      Thanks for the comments and compliments. I’m glad you like the theme.

      I’m not really sure I understand your problem. Could you send me a couple of links showing a page with and without the issue? Then I can see what the deal is.

      Thanks

      Alan

  • Chris Hall says:

    @Alan, works great on GNU Ice Cat.

  • daggius says:

    hello, I am interested in modifying open sourcerer code for my blog to have another sidebar on the left. how hard would this be to do and do you have any advice?

    thanks!

    • Alan Lord says:

      The level of “hardness” depends on your knowledge of PHP, XHTML and CSS. If you know these well it is easy.

      My advice is to read lots of How-To pages using Google to find them. That’s how I started. Oh, and buying a book or two can help too.

  • Paul Hannah says:

    Hi,

    Thanks for your theme, it has generated many favourable comments.
    I want to make a small donation for your work, can I send it via PayPal?
    I have had only one problem with the theme and that is with the navigation links at the top of each post, below the banner.
    When a new user hits my site http://www.oztronomy.net they only see the page title and no links forward >> or back <<. These appear if someone happens to click on the title.

    How can I get them to appear all the time?

    Paul

    • Paul Hannah says:

      I have since figured out how to toggle between the links being there and links missing. If you click on the cloud in the sidebar the post comes up without links and if you click on the title the links appear.
      It’s a mystery!
      Paul

  • Bob O'Hara says:

    I am having a problem with comment replies using Open Sourcerer. If I reply to a comment left on the blog, the background of the comment does not match the theme. The background is white, making the text nearly impossible to read. If I don’t use the “reply” functionality and instead leave a new comment, the theme works as expected. Any idea where I should look to correct this problem? Thanks for your great theme and (in advance) for your help.

    • Alan Lord says:

      Hi Bob,

      I’m not sure. It was quite a while ago I made this theme, but the problem sounds like either something in the stylesheet, or the default settings are being overridden by your web browser. Have you tried in different browsers on different computers?

      Cheers

      Alan

      • Bob O'Hara says:

        Alan,

        The incorrect background happens in both IE8 and Safari 5.0.2. I am pretty much clueless about the hierarchy of WordPress, though I am a coder. Any pointers would be much appreciated.

        -Bob

  • Alan Lord says:

    Does it happen on this blog site too? I don’t see it and I’ve not heard anyone else with a similar issue. If you have not modified the theme I have no idea what else could be causing your problem.

  • Alan, My comments on your theme after a really quick look…

    I like the colouring and as far as I can see there is good contrast between background colours and foreground colours so everything is easily legible.

    With my web accessibility hat on I’d urge you to update the stylesheet(s) so that the navigation and in page links highlight when tabbed to in the same way that they do when hovered over. I use Chrome which puts a clear box around the links, but other browsers don’t do that. It’s a good idea to put a focus background colour on the input fields too – a subtle yellow shade or whatever. Also, getting cursor to change to a pointer when hovering over the Submit Comment (and any other) button is a small usability tweak.

    Re the contents of the theme, I’d be inclined to include a categories box as well as a tag cloud – since you are using categories for your blog posts. Also a list of recent posts too since if one lands on a page like this one, it’s not immediately obvious that you do have a blog. I’d include an overt link to your home page too in the nav bar.

    Your search facility could do with a bit of magic. I’m guessing you don’t have a search.php or if you do it needs to be changed to be more informative. I also recommend the excellent Relevanssi search plugin which would improve your user’s experience when searching in your site. If you Search for WordPress on my own site which is built in WordPress you’ll see i) it shows only extracts from the page and ii) the search term is highlighted. The plugin also attempts to present the search results sorted on relevance rather than descending chronological order which is the WordPress default. Also if you look at the top of the content it tells you want you searched on and how many results it found. Finally the search term is persisted in the search box. Would you like some of that?

    Hope it helps.
    Graham

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>