I use a WordPress for my blog, and I’ve been trying to figure how to widen it. I use the “default” template, and my blog has the most recent upgrade (2.9). I spent weeks trying to figure it out, messing with the stylesheet.css php file. I finally figured it out. If you follow these directions–you can change the length of your blog and change the heading image to match the rest of your site. Again, a blog looks kind of dumb if it is 600×800 and the rest of your site is in high definition.

To do this you are going to need to use Photoshop (any version), and you will need to edit a few numbers in the stylesheet.css file. You also need to have an ftp connection.

1) open up your ftp file/wordpress/wp-content/themes/default/images. In this folder you will find a list of jpegs. Copy the images to your desktop. Open them in photoshop. Click “image” in the tool bar and scroll down to “image size” which will bring up a window that allows you to adjust the size. Change the width to the same size as the rest of your website. Repeat this method with all the image files in the image folder that you copied to your desktop. Don’t mess with the header-img.php file though. That’s not an image.

2) save all the adjusted images by going to “file” and “save”. Copy all of the files back into the ftp file/wordpress/wp-content/themes/default/images folder and overwrite the old ones.

3) Log in to your wordpress blog and go to Appearance/editor which will take you to a page that has a list of php files. At the bottom of the list you will find one that says “stylesheet (style.css)”. Click that one (hint: use the internet explorer browser).
Scroll down through the code in the textbox until you see “header” “footer” and “page”. Under these titles will be some specifications. One will say “width: 760″ Change all instances of width under the forementioned titles to the width (or slightly smaller) of the rest of your website.

If you get all the numbers right your site will be considerably wider. You may want to adjust some of the other numbers in the style sheet for better viewability.

It’s pretty easy to tell when you miss a number, because that portion of the site will be off. For instance, if you missed the “heading” it would be smaller than the rest of the page.

Hint: Everytime you view the page click the refresh button on your browser. I personally use Opera–which is specifically designed for web developement. However, Opera and the WordPress stylesheet window don’t work so well together, so just use Opera to view the page to make sure it looks okay.

Another Hint: If you want to change the header of your blog to match the header of the rest of your site, simply rename the header to the krubrickheader.jpg and place it in your “images” folder from step 1. Make sure its size is consistent with the rest of the page, however. That may take some tweaking in photoshop.

Oh yeah, and to get the old text off your header go to Appearance/custom header. Select the “advanced” button and click select default colors. Click the “update header” button. Then go to Appearance/editor. Click the stylesheet like you did before. Find the text that says under “heading” that says “font color;white” and change “white” to “transparent.”

So that’s it. It’s really not that hard, but If you are like me, you probably thought that you could simply adjust the numbers in your stylesheet. However, that won’t work if you have a fixed page size like in the “default” template. You have to adjust the images as well, otherwise you will just get a bunch of pink around the edges. P.S. pink is ugly.

However I’ve just started my Design Blog, its 90% complete, and I was wondering where I could find a guide or tutorial to widen?