Helyar.net

The default WordPress 2.7 theme is Kubrick. It’s nice but it is optimised for 800×600 and most people use more than that, so I decided to modify it slightly to optimise for 1024×768 or a similar width. Because of things like window borders and scrollbars, we do not want the width to be exactly 1024 pixels wide so all we do is use the existing widths and add the difference between 1024 and 800 to them. This is a 224 pixel increase in width so if something was 760 it would become 984, if it was 740 it would become 964, etc.

Several files need to be changed for this (make backups beforehand):

• /wp-content/themes/default/images/kubrickheader.jpg
• /wp-content/themes/default/images/kubrickbgwide.jpg
• /wp-content/themes/default/images/kubrickfooter.jpg
• /wp-content/themes/default/images/header-img.php
• /wp-content/themes/default/style.css
• /wp-content/themes/default/images/kubrickbg-ltr.jpg (since WordPress 2.8)

The 3 jpeg files are quite straightforward. I just opened them in Microsoft Paint, increased the width by 224 (image -> attributes) making them 984 wide, then dragged the right side of the old image to the right side of the new image and stretched out the middle section to fill the space.

The php file is a bit more complicated. This file reads kubrickheader.jpg, modifies it with your chosen colours and adds the white rounded corners. Again, the only changes here are adding 224 to some of the numbers in this file. We don’t even need to work these out, we can just append “+224″ to the existing numbers where appropriate. First we change the $corners array from
0 => array ( 25, 734 ),
to
0 => array ( 25, 734+224 ),
and do this for every entry in the array.

Slightly lower down in the “Blank out the blue thing” for loop, we change
$x2 = 740;
to
$x2 = 740+224;

and again in the “Draw a new color thing” for loop, we do the same thing, changing
$x2 = 739;
to
$x2 = 739+224;

Lastly, we change the style.css. This is the most complicated part, just because the widths to change are spread out everywhere and missing one will mess the whole page up. This is a bit long to explain, so here’s the diff (modified slightly for reading clarity – don’t try to patch with it). Remember that you want to change the lines with the – in front of them into the lines with the + in front. We can’t just use +224 any more so we actually have to work them out.

As an example, in the first one (#headerimg) you just change 740px to 964px.

@@ -41,9 +41,9 @@

 #headerimg     {
        margin: 7px 9px 0;
        height: 192px;
-       width: 740px;
+       width: 964px;
        }

@@ -236,18 +236,18 @@
 #page {
        background-color: white;
        margin: 20px auto;
        padding: 0;
-       width: 760px;
+       width: 984px;
        border: 1px solid #959596;
        }

 #header {
        background-color: #73a0c5;
        margin: 0 0 0 1px;
        padding: 0;
        height: 200px;
-       width: 758px;
+       width: 982px;
        }

@@ -258,15 +258,15 @@
 .narrowcolumn {
        float: left;
        padding: 0 0 20px 45px;
        margin: 0px 0 0;
-       width: 450px;
+       width: 674px;
        }

 .widecolumn {
        padding: 10px 0 20px 0;
        margin: 5px 0 0 150px;
-       width: 450px;
+       width: 674px;
        }

@@ -311,9 +311,9 @@

 #footer {
        padding: 0;
        margin: 0 auto;
-       width: 760px;
+       width: 984px;
        clear: both;
        }

@@ -570,9 +570,9 @@
 /* Begin Sidebar */
 #sidebar
 {
        padding: 20px 0 10px 0;
-       margin-left: 545px;
+       margin-left: 769px;
        width: 190px;
        }

If you get lost here, you can use my style.css but if you use a different base version to me (I am on the one that comes with WordPress 2.7), my modified style.css may not work for you.

Update 2009-06-13:
With WordPress 2.8′s release, this theme has changed slightly. The right-hand navigation bar is now a different colour from the rest of the page. This is done with the kubrickbg-ltr.jpg image. I have widened mine but I am still using the old images for the rest of the site (header, footer, etc) so it does not fit in perfectly, as you can see from the top and bottom of the page.

Tags: css, php, theme

This entry was posted on Tuesday, February 17th, 2009 at 3:50 pm and is filed under Code. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.