Hippo Web Solutions

I was recently asked by one of my clients to widen the sidebar on her K2-themed WordPress blog. Initially I thought this might be tricky as it would involve tweaking the theme’s template files. But once I started, I was pleasantly surprised to find that it was not at all difficult – all that was required was altering a couple of settings in the site’s CSS. And the best part was that I didn’t have to modify any of the theme’s files – this of course makes it much easier to upgrade the theme in the future.

Background

My client was using a default K2 installation, with a single sidebar. It’s also possible to configure K2 to have two sidebars, or none, which is something I really like about the theme. If you’re using one of these configurations, you will have to adapt my advice accordingly. But the principle will be the same. For the rest of this article, I’ll address the single-sidebar scenario.

In this configuration, the main content area is 500 pixels wide, with a 200 pixel sidebar. Overall width is 780 pixels (for the mathematically astute the extra 80 pixels are made up in the column margins). My brief was to increase the sidebar width so it could accomodate two 125×125 pixel buttons next to each other. In case you didn’t know, this is the standard size of graphical advertising logos. So I decided to increase the sidebar width to 260 pixels (again the extra pixels are for padding), and thus the overall blog width to 840 pixels. Here’s how I did it:

1. Create a custom K2 stylesheet
2. Locate the relevant CSS selectors
3. Modify the width values
4. Activate your custom style
5. (optionally) modify the width of the header graphic

Step 1: Create a custom K2 stylesheet

The look and feel of any WordPress theme is controlled by the style.css file located in the theme folder, ie /wp-content/themes/k2/style.css. But K2 allows you to override the settings in this file by creating a custom stylesheet in the wp-content/themes/k2/styles folder. You will find this location already contains a sample folder, which is a good starting point. Create a copy of this folder and give it a unique name. Then rename the sample.css file in your copied folder too – use the same unique name if you wish.

Step 2: Locate the relevant CSS selectors

There are two CSS selectors that control the width that we want to change: sidebar-single #page controls the overall blog width, and sidebar-main controls the width of (you guessed it) the sidebar.

Open up your style.css file in a text editor, and use the search function to find them. They look like this:

.sidebar-single #page {
	width: 780px;
}

and

#sidebar-main {
	float: left;
	width: 200px;
	padding: 10px;
}

Copy these two bits as-is into the custom stylesheet you created earlier. Anywhere will do; I put mine at the bottom.

Step 3: Modify the width values

Now simply change the two width values – from 780px to 840px and from 200px to 260px (see, I told you it was easy). Just make sure you don’t change anything else. Now save the file and upload it to your web server.

Step 4: Activate your custom style

To activate the changes you’ve made, you need to log into your Admin Console, and go to the Design > K2 Options page. About two thirds of the way down there is a Style section with a drop-down list:

You should see the name of the custom stylesheet you created in step one. Select it, then click the Update Options button. View your blog, and check that the size has changed as expected. If for some reason it does not look right, you can easily undo the change by re-selecting the No Style option and once again clicking the Update Options button.

Step 5: (optionally) modify the width of the header graphic

If your site uses a custom header graphic, you may notice (as I did) that it no longer extends the whole width of your site. In this case, all you need to do is open up the image file (you’ll find it in the wp-content/themes/k2/images/headers folder) in an image editor like GIMP, and scale the image to be 840 pixels wide. Then save it with a different name back to the same folder (again this may involve FTP-ing it to your web server, which is beyond the scope of this article). Then, back on the K2 Options page, select the new image from the drop-down list in the Header section, and click the Update Options button.

And that’s all there is to it!

Related posts:

1. How to install WordPress themes using cPanel
2. WordPress.com statistics plugin
3. WordPress.com versus WordPress.org
4. WordPress Translation plugin
5. Managing images with the WordPress media manager