Durango is the name for my newly created WordPress theme, the one you’re probably seeing right now. I’m not a graphical designer, so most of the visual aspects I borrowed from a collection of other websites, but I tried to give it my own twist and included some cool new HTML/CSS stuff.

I’ll give a brief overview of how and why it was made, and things I think I should still improve. If you don’t care about all that and just want a copy of this theme, jump to the download button.

Semantic and valid (?)

Screenshot of the theme

Most importantly, it’s all HTML5! I love HTML5 and for a website that I’ll be using as a portfolio it seemed like the best choice: I just want to show my love for it. I made this theme based on the HTML5 Boilerplate, with some minor modifications where I felt it was needed. For what it’s worth while the HTML5 specs are still in a draft status, currently the theme validates! Of course, there’s no telling what the future may bring or what invalid HTML users may use in their comments but for now it’s good.

Apart from that I also tried to use as much semantic HTML as possible. It makes me feel posh. I’m still not entirely sure about the section and article elements among others, but I’ve given it my best shot. Currently there’s two elements  in the template I know are not semantically correct: the div around the main content to keep the columns in place (the holy grail I built upon is still the best option for equal height columns though) and the div’s inside the sidebar to keep those nifty looking rotated orange backgrounds. Which brings us to the next subject: browser compatibility.

Compatibility

For those of you who don’t use the newest browsers that are not Internet Explorer, you might have noticed that the screenshot looks slightly different from the actual website. This is because I’ve used a couple of HTML5 and CSS3 techniques that aren’t yet supported by every browser. Among those are:

• transform: rotate ( x );
  The blog post backgrounds are rotated by 1 degree, as are the backdrops on the sidebar items. No support in IE, works in FF 3.5+, Opera 9.8+ and Chrome.
• border-radius
  Currently only the buttons (search, comment submit) use this. IE doesn’t support this yet but the extremely awesome  CSS3 PIE took care of that.
• box-shadow
  Same as above
• transition
  The buttons all use the CSS rule (-prefix)-transition: background 0.3s ease;, which should make the color slowly go from orange to white when you hover it. Said to be supported by FireFox, but I haven’t seen it in action yet (3.6 fails). Chrome works fine, IE of course doesn’t.
• Custom fonts
  Currently only the website’s title uses the custom font  WC Mano Negra Bold. This is a rights-free open-type font that I included using the FontSquirrel @font-face generator. It seems to work in all modern browsers including IE7 and higher.

All in all the theme still looks great in most browsers, good (albeit a bit square) in IE and probably awful in IE6. I have decided not to support that browser anymore, which shouldn’t be too shocking nowadays. If you want a pixel-perfect theme that looks the same in every browser, you may have to find another HTML5 theme or ask yourself Do websites need to look exactly the same in every browser?

Customizations

Apart from the HTML/CSS aspects I’ve done some other slight customizations that are only for this website. The portfolio page will be a work in progress using jQuery to make it a nice slideshow. I won’t include that page in the theme download.

The sidebar is a mix of widgets and custom php, which you’ll have to customize to your own preferences. Also I had to make some adjustments to suit the plugins I’m using. I’ll try and deliver the theme to work out of the box, but it may not look entirely like this website. Then again, I hope you weren’t planning to copy this theme one on one to your own blog.

Download

So without further ado.. download the Durango theme. When I’m sure it works fine out of the box and get some positive comments I will add it to the WordPress themes website. In the meantime, make sure to leave your comments on it’s looks, HTML, CSS and wordpress-specific functions here so I can improve it! Enjoy

Installation

Just download the .zip, extract it to your /wp-content/themes/ folder and copy the contents of the .htaccess to your main .htaccess. Do remove the .htaccess from the theme’s folder afterwards or stuff will break.