Customizing Kubrik with WordPress

Getting ready

The first step is to make a list of the changes that you want to make. Here’s what we’ve come up with:

• Increase width to 980px
• Increase font sizes in sidebar
• Use a graphic header

We’ve picked 980px as our target width because this size is optimized for a 1024 screen resolution and works well in a grid layout. Several CSS adjustments will be necessary to realize this modification, as well as using an image editing program (we will be using Photoshop).

How to do it…

To increase the page width, the first step is to determine which entries in the CSS stylesheet are controlling the width. Using Firebug to inspect the page (as seen below), we find that the selector #page has a value of 760px for the width property. And #header has a width of 758px (less because there is a 1px left margin). The .narrowcolumn selector gives the main content column a width of 450px. And #sidebar has a width of 190px. Finally, #footer has a width of 760px.

So, we will increase #page and #footer to 980px. #header we will increase to 978px. Let’s apply all of the additional 220px width to .narrowcolumn. Taking note of the existing 45px left margin, our new value for the width property will be 700px. That means #sidebar width will remain at 190px, but the margin-left will need to be increased from 545px to 765px.

1. Click on Appearance | Editor.
2. In the right-hand column, below the Templates heading, click on style.css.

Scroll past the section that says /* Begin Typography & Colors */, until you get to the section that says /* Begin Structure */.

Make the following changes to the stylesheet (style.css), commenting as appropriate to document your changes.

#page {
   background-color: white;
   margin: 20px auto;
   padding: 0;
   width: 980px; /* increased from 760px */
   border: 1px solid #959596;
   }
#header {
   background-color: #73a0c5;
   margin: 0 0 0 1px;
   padding: 0;
   height: 200px;
   width: 978px; /* increased from 758px */
   }
.narrowcolumn {
   float: left;
   padding: 0 0 20px 45px;
   margin: 0px 0 0;
   width: 700px; /* increased from 450px */
   }
#sidebar {
margin-left:765px; /* increaseed from 545px */
padding:20px 0 10px;
width:190px;
}
#footer {
   padding: 0;
   margin: 0 auto;
   width: 980px; /* increased from 760px */
   clear: both;
   }

Adjustments via Photoshop

We’ll also need to use an image editing program to modify the three background images that create the rounded corners: kubrikbg-ltr.jpg, kubrickheader.jpg, and kubrickfooter.jpg. In this example, we modify kubrik-ltr.jpg (the background image for #page), a 760px image.

1. Open up the image in Photoshop, select all, copy, create a new document (with a white or transparent background), and paste (Ctrl-A, Ctrl-C, Ctrl-N, Ctrl-V).
2. Increase the canvas size (Image | Canvas Size) to 980px, keeping the image centered on the left-hand side by clicking on the left-pointing arrow.
3. Select one half of the image with the Rectangular Marquee Tool, cut and paste.
4. Use the Move Tool to drag the new layer to the right-hand side of the canvas. In this case, it does not matter if you can see the transparent background or if your selection was exactly one half the image. Since the middle of the image is simply a white background, we are really only concerned with the borders on the left and right. The following screenshot shows the background image cut in half and moved over:



5. Save for Web and Devices, exporting as a jpg. Then, replace the existing kubrikbgltr.jpg with your modified version via FTP.

The steps are similar for both kubrickheader.jpg and kubrickfooter.jpg. Increase the canvas size and copy/paste from the existing image to increase the image size without stretching or distortion. The only difference is that you need to copy and paste different parts of the image in order to preserve the background gradient and/or top and bottom borders.

In order to complete our theme customization, the width of .widecolumn will need to be increased from 450px to 700px (and the 150px margin should be converted to a 45px margin, the same as .narrowcolumn). Also, the kubrikwide.jpg background image will need to be modified with an image editing program to increase the size from 760px to 980px. Then, the individual post view will look as good as the homepage. By following the same steps as above, you should now be prepared to make this final customization yourself.

Our next goal is to increase the sizes of the sidebar fonts. Firebug helps us to pinpoint the relevant CSS. #sidebar h2 has a font-size of 1.2em (around line 123 of style.css). Let’s change this to 1.75em. #sidebar has font-size of 1em. Let’s increase this to 1.25em.

To use a graphic in the header, open up kubrickheader.jpg in a new Photoshop document. Use the magic wand tool to select and delete the blue gradient with rounded corners. Now, use the rounded rectangle tool to insert your own custom header area. You can apply another gradient, if desired. We choose to apply a bevel and emboss texture to our grey rectangle. Then, to paste in some photos, decreasing their opacity to 50%.

In a short time, we’ve been able to modify Kubrik by re-writing CSS and using an image-editing program. This is the most basic technique for theme modification. Here is the result: