Damien at the Speed of Life

Everybody has been telling me my use of the default theme is a bad idea. My wife told me since I was into making money now, I should make it look more innovative to gain credibility. I may change, but the fact is, I love Kubrick and I always have. It is an amazing piece of code. Recently, I got a crazy idea about customizing background images. I thought maybe I could tweak my useful theme to look less “noob.”

I’d been rolling this idea around in my head for some time when I finally tried to do it this weekend and it worked so great! The idea was to have a continuous header image to continue descending down the sidebar. I knew it would take two pictures to make it happen. What you see below is the result of a few hours of driving myself insane with Photoshop. I’m posting it here for any other gluttons for punishment. Or, you may just be curious how to integrate creative ideas into the WordPress default theme (it wouldn’t be too hard to transfer these instructions to another theme with sidebars.) In all seriousness, once you figure it out, it takes only a few minutes to make one. Here’s the way I tweaked Kubrick:

Step One:
Obtain a picture with a minimum width of 760px. Height must be at least as long as you want the image in the sidebar to extend from absolute top. (ie; a short one that fills most the screen is height 400 but this just a guideline. Think about what will be on the top of the sidebar and consider contrast issues.)

Step Two:
Crop your picture to a width of 760px (if it is not already that size)

Step Three:
Go to this site and create a kubrick header jpg out of your chosen picture (name it Kubrickheader.jpg)

http://bighugelabs.com/flickr/blogheader.php

Step Four:
Open the original picture in Photoshop and paste a copy of the kubrickheader.jpg you just made over that. Put them together like a puzzle.

Step Five:
Zoom in a couple times so you can be exact, then use the crop tool to start on the right where the header image overlaps and touches the bottom of the picture. Make your sidebar line just as it curls up. Crop as far down as you want and as far to the left stopping at or past 190px width. Save it (I use sidebar.jpg). If you like you can round the corners on bottom, but that’s another tutorial.

Step Six:
Change/add this line in your style.css

#sidebar {
background: url(’images/sidebar.jpg’) no-repeat top right;
font: 1em ‘Lucida Grande’, Verdana, Arial, Sans-Serif;
}

Step Seven: Upload the kubrickheader.jpg and sidebar.jpg files into your default theme’s image folder.

Viola! Aint it purty?