How To: Widen Your Kubrick Wordpress Theme

Although I plan on creating my own theme whenever I stumble across some free time, the default Kubrick theme that came with WP suits my needs just fine for now.

Lately I’ve been finding myself wanting to take advantage of the entire width of my blog screen. Elements that get in the way of accomplishing this are obviously the sidebar but also the column width as defined in the CSS.

Fortunately we can take care of that with a simple Page Template. If you’d like to create the occasional wide page and use your existing blog width, read my article on creating a Page Template.

Still Need More Space?

Alright, we still need more room for things like Amazon’s astore so let’s widen our standard Kubrick width from 760 to 800.

Note: Take note of the 40px increase as we’ll use that to adjust div padding and such.

As always, be sure to backup your CSS file (default: styles.css) just in case. I’ll present the following steps in an order you can follow if modifying a production site for minimal disruption.

Modify Some Graphics

Using your favorite editor or even MS Paint, open the following files and increase the image attributes to your desired width.

• kubrickbg.jpg
• kubrickbgwide.jpg (this might only be present if you’ve installed the sidebar widget)
• kubrickfooter.jpg
• kubrickheader.jpg

Once that is done, extend the image length by cutting off the right size and moving it to the new “right side”. Then copy a middle section of the image and paste it to fill the hole left behind by your initial cut.

If someone knows of an easier way of accomplishing this please share. All it all it isn’t very difficult at all anyway.

Save the new files as a name you’ll recognize to associate with your new width like *_800.jpg or .png (e.g., kubrickheader_800.jpg).

Note: If using MS Paint, you might want to save the image as a PNG to avoid the default JPG dithering that Paint applies to new files.

Edit The CSS

Using the standard Kubick Stylesheet, there are only a few CSS elements you’ll need to modify. Modify your style.css doc by navigating to “Presentation” » “Theme Editor”. Because it’s at the top of the list, “styles.css” should already open up in the editor - if not go ahead and click on the filename to open it.

Note: If you don’t see a button titled “Update File »” then you might need to apply the correct permissions on the server (chmod 660 should work).

Modify the Image References

Point the CSS to the new image files we just created.

Look for the following in your styles.css:

#footer {
 background: #eee url('images/kubrickfooter_800.png') no-repeat top;
 border: none;
}

#header {
 background: #73a0c5 url('images/kubrickheader_800.png')
  no-repeat bottom center;
}

I found the below main bg image (kubrickbg*.jpg) in a condition statement (associated with the sidebar) in my header.css file. References to this image file might be in a different location for you.

if ( !$withcomments && !is_single() ) { ?>
 #page {
   background: url("<?php bloginfo('stylesheet_directory');
    ?>/images/kubrickbg_800.jpg") repeat-y top;
   border: none;
 }
<?php } else { // No sidebar ?>
 #page {
   background: url("<?php bloginfo('stylesheet_directory');
    ?>/images/kubrickbgwide_800.jpg") repeat-y top;
   border: none;
 }
<?php } ?>

Modify the Widths

Change the #headerimg width to your desired size.
The default values had the width as 20px less than the total width (in my case 800) so I left that the same and it worked just fine.

#headerimg  {
 margin: 7px 9px 0;
 height: 192px;
 width: 780px;
}

Change the #page width and #header width to the full size (again, 800 is my desired total width).

#page {
 background-color: white;
 margin: 20px auto;
 padding: 0;
 width: 800px;
 border: 1px solid #959596;
}

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

Change the #footer width as well.

#footer {
 padding: 0;
 margin: 0 auto;
 width: 800px;
 clear: both;
}

Adjust Your Content DIVs

Keeping in mind that our new size is 40px greater than the original. Knowing that we can simply widen the content containers to be 40px greater than their existing values.

.narrowcolumn {
 float: left;
 padding: 0 0 20px 45px;
 margin: 0px 0 0;
 width: 490px;
}

.widecolumn {
 padding: 10px 0 20px 0;
 margin: 5px 0 0 150px;
 width: 490px;
}

If you have a sidebar you’ll want to modify the right side padding as well:

#sidebar
{
 padding: 20px 0 10px 0;
 margin-left: 585px;
 width: 190px;
}

And we’re done, hopefully everything draws correctly at this point. I found that I had to adjust the right side of my header image by one pixel to get alignment just right. If I missed anything please post a comment for future readers. Good Luck!