Over the last four months of 2009, I had the privilege of being part of the Linux Experiment – a four month period where me and some of my colleagues from school switched to Linux as our primary computing environment to test if we could move away from using windows. While the results were varied, I’ve now decided that I’d like to keep my online presence going.

There was a lot of technical stuff I discovered during the experiment, but not all of it was related to Linux so I couldn’t post it on the blog. Since some of my friends from the experiment have been using their blogs to post about their interests in technology and other related fields [check the links at the bottom of the page], I decided to re-purpose this blog yet again.

Part of re-purposing this blog has been getting a new theme. It turned out to be a fairly technical process, so I’ve decided I’ll chronicle the experience here – so that if nothing else I’ll remember all the steps required next time I do something like this. Let me just say that I’m kinda familiar with the workings of WordPress, but I’ve never made my own theme from scratch. All the theme tweaking I did for this blog was through trial and error, some PHP experience from dabbling and two courses I took in University, a general knack for all things technical and some Photoshop skills I picked up in highschool.

Lets start with my motivation. At first I wanted a light coloured blog, so that this site would have an air of professionalism to it. However, anyone who knows me probably knows that I really like pretty things. In fact, I like them far too much to go for the stark professional look for something as personal as my own website. On top of that, where is the fun in using some pre-canned theme? This blog is suppose to reflect me and my interests. After some searching I eventually found this theme called Pixel. I liked the layout and the visual effects, but the background just wasn’t really me.

Being the Photoshop connoisseur that I am, I decided I’d take a look at the theme and see if I could take a swing at changing it to suit my tastes. As I stated above, I’ve been exposed to WordPress before, and have tweaked themes in the past – but its all self taught by diving in and looking at what makes the guts of WordPress work. I hardly ever consult documentation about these things, which might be a good or a bad thing depending on how you look at it!

Recently I’ve been in love with this wallpaper I found on interfaceLIFT of the orion nebula. I decided to use that photo as the base for my blog’s theme. After downloading both the wallpaper and the theme, I started digging around. I went into the images folder of the Pixel theme and looked to see what combination of images was used to create the look. It turns out the entire background including the frosted header, the black category header, and the translucent overlay for the body of the blog was one image that is centered and set as the background image of the site with horizontal and vertical repetition disabled. This works nicely because this image fades to black on all edges, so a solid black background causes the whole site to look fluid.

In order to create a new version of the theme visually, all I had to do is replace this image with one of my own! Sounds easy right? No? Yeah probably not. I’ve a friend who I taught Photoshop to, and while he’s good – the idea of doing something like this seemed impossible to him. He watched me do some of the steps I’m about to detail and informed me that it was “really cool” and he would have had “no clue how to edit a theme like that”. The tricky part, is that I had no idea what I was doing when I started either. I just dove in and tried my best to create something new.

I started by creating a new PSD with the original background image as the background. I then recreated the regions of the image on individual layers. These regions were:

• The header strip – The rectangle with the blog name / description
• The category strip – Contains a link to the home of the blog / the post categories
• The body of the blog – Contains the posts / pages of the blog
• The background – Contains… everything!

All the first three layers contained was a white rectangle outlining the regions. The background layer I left blank for now. The category strip presented an interesting challenge as there were rounded corners, but I busted out the handy pen tool to create a nice rounded curve which I turned into a selection region and removed from the rectangle. After that I threw in the orion nebula image in the background, overtop of the existing background. I now had an interesting choice of what colours to make these regions. I toyed with white, black, and other colours from my chosen background image.

I ended up making the header and category strips one of the bright pinkish-purple colours from the orion nebula image, but changed the opacity so they’d be slightly see-through. The body I made black, but lowered the opacity on it as well. I then created a copy of the body layer, changed the opacity back to full, deleted the black, and created a transparent to black gradient from the top to the bottom.

This allowed for the image to blend into an all black background, so that I didn’t need to use more images to create the look of the blog. The header I replaced with a black to pinkish-purple to black gradient, so that it blended into back on the left and right sides. After throwing some white borders on the bottom of the header layer, around the category layer, and down the sides of the body layer I was almost done. I faded some of the white borders to black so they’d blend properly [just using my eraser tool at a really low opacity]. To finish up, I placed a solid black layer beneath all the layers except the original background and erased the edges of the orion nebula image so it also blended into black. After all this work, I had the base for my new look!

Sometime soon, I’ll post about some of the CSS tweaks I had to make, the layout changes I made, and the custom logo I designed!