ColorblindS Wordpress Theme
While content is king, most of us give quite a bit of thought to our presentation. After all, the look of our web site is a big part of establishing our brand, and we also want a design that is optimized for readers, crawlers and advertisement.
Early on when I was still using Wordpress it really bothered me every time I stumbled upon a web site that was using the same theme I was. I hadn’t been using Wordpress for very long, and while I was fairly good at knocking out XHTML and CSS, I wasn’t capable of building my own Wordpress theme yet. I discovered Yvo Schaap’s excellent Wordpress Theme Generator, and after playing with it for a bit decided I could produce a presentable enough starting point to make a theme out of. I liked the idea that I wouldn’t see any dopplegangers of my site while I was out surfing.
The resulting theme was serviceable enough, and I was pleased with the idea that it was mine and mine alone.
However, even after playing with the stylesheet the theme produced by the theme generator was very basic and perhaps a little dated looking. After my initial satisfaction with it wore off, I was compelled to come up with something that represented myself and my site a little better.
I had been using black text on white, but had always been attracted to dark designs. The problem with dark designs is that they are, more often than not, hard to read, and, more often than not, look like some angst-ridden teenager’s MySpace page. I started playing around with Photoshop to see if I could come up with something that was visually appealing, yet wouldn’t repel readers.
The resulting work produced the theme Colorblind and it’s successor ColorblindS (colorblinds, not colorblind s), which I would use until I abandoned Wordpress for Joomla. I always felt the theme was kind of neat, although a little limited in it’s appeal due to the dark scheme. It uses transparency in the header graphic and in the content windows, and looks pretty sharp, as dark blog themes go. Instead of just leaving it in the broom closet for eternity, I thought I would dust it off and offer it to anyone who liked it.
I ended up adapting the theme to utilize a suckerfish-style top menu, courtesy of Stu Nicholls. The menu is 100% CSS and XHTML, so it is fast, resource-light and browser-friendly. It allows you to have as much or as little navigation as you can imagine. It will accommodate top level links to static pages, or you can set it up to have as many levels of navigation as you need. I have left the sample menu intact so you can look at the XHTML in header.php to see how it works before modifying it to suit your needs.
This theme is valid XHTML 1.0 Strict. I have changed the content type from application/xhtml+xml to text/html for maximum compatibility with advertising scripts. You may consider changing the DOCTYPE from XHTML 1.0 Strict to XHTML 1.0 Transitional if you use a lot of plugins, as unfortunately, there are a lot of tag-soup Wordpress plugins out there that break strict validation. The CSS is a mixed bag. My stylesheet validates, but there is a Yahoo stylesheet that is used for the sidebar navigation, and it produces errors. However, the theme does display properly in all major web browsers. The theme uses transparent PNGs, and the Internet Explorer PNG fix script is already in the header.php so you don’t need to do anything to ensure that IE users see the theme properly.
ColorblindS Theme For Wordpress
Note that this demo install is not set up very well and navigation is limited. This install was created just so I could dust off the theme and ensure that it was set up properly for someone else to modify it for their own use.
This is a basic, no-frills theme that is easy to manipulate into doing what you want it to. It won’t make anyone’s top ten list, but it was a lot of fun to make and I didn’t want to see the work go to waste. Aspiring Wordpress theme designers who are so inclined may pick up where I left off and give the windows rounded corners, change the color scheme and add drop shadows, etc..
I encourage all Wordpress users to be more hands-on with their themes. The lessons you learn about XHTML, CSS, and getting both to validate will serve you well whatever you end up working on in the future.
Bookmark & Share
Comment by SoKoOLz on 14 January 2008:
It looks awesome! Thanks
Comment by Mark from Bloglyne on 14 January 2008:
Great theme - I have customized my themes so much that I dread trying to come up with something from scratch… so I just keep mod’ing and tweaking - I figure if I eventually hold onto it long enough and tweak it enough, it won’t look like anybody else… in about 10 years *grins*
Comment by bert on 14 January 2008:
Slick. Looks like a pro company made it!
Comment by Amanda on 14 January 2008:
It’s great fun designing new templates, isn’t it? I learned most about HTML coding and CSS when I began making my own Blogger templates.
Your theme looks great. Thanks for offering this to the community, Everton
Comment by Joseph Plazo on 14 January 2008:
Hmmm.. can someone recommend a snappy online tutorial for CSS? I’ve been too lazy to pick up that fat “Idiots Guide to CSS” for a few months now.
Comment by The Critic on 15 January 2008:
White text on black background can be a headache to read. Particularly after slamming a few hard ones.
Comment by Bob Demers on 15 January 2008:
A quick word about white on black text.
The reading difficulty varies from person to person. Basically, the problem arises in the vision of the reader. slightly reducing the contrast between the white text and the black background can reduce the problem a whole lot without losing the typical ‘dark’ look of white on black. Just set the color of the text to a light gray. Experiment to see how much gray you can use without killing the crispness of the contrast. Alternatively, you can leave the text white and set the background to a dark gray. You get the point.
Comment by mlankton on 15 January 2008:
I agree regarding white on black inducing eye strain. White is good for link hover, because it stands out. I like #c0c0c0 for text on a dark background.
Comment by abhishek on 21 January 2008:
Looks good and professional though can be improved a lot