Antbag.com

Have you noticed a new trend in blog design? There are several actually, but it seems to me that blogs are getting wider. I think this is due to the fact that more people are now using larger computer monitors that easily handle a wider screen resolution, and also to make room for more information and sidebars. However, there are still those who prefer a more narrow view. Here I’m gonna take you along as I actually make one of my free Wordpress themes more narrow.

The theme is Paintbrush, and it’s the second theme that became available in my line of themes. This theme comes with a width of 900 pixels. As requested by the theme user, we’re changing that width to 750 pixels to accommodate the 800 x 600 screen resolution that she and some of her friends have. When I make a change like this, the first thing I do is look at the face of the blog and determine what will have to be changed. In Paintbrush, the content of the blog is enclosed in a div that is has been given the name, “wrapper“. Inside the wrapper is the header, the posts, the sidebar, and the footer. The dark blue part of the screen is outside the wrapper. So obviously, the width of that wrapper will need to be changed from 900 pixels to 750 pixels.

Now that we know we have to change the width of the wrapper, what else will be affected by the change? Yep, basically everything inside the wrapper. Here’s what we’ll need to change:

• Header
• Header Background Image
• Horizontal Navigation Menu
• Post
• Sidebar
• Footer

I know that sounds like a lot, but it really isn’t that difficult. Here’s a tip…….we know we’re subtracting 150px off of the wrapper, right? Well, that’s the same amount that will need to be taken off of the other things on our list with the exception of the post and the sidebar. For those two, we need to take a TOTAL of 150px off, because they sit side by side. Make sense?

The Stylesheet

When you make a change in the code of your website, you should ALWAYS make a backup of the file before you change anything. It’s too easy to mis-type something and get frustrated because you can’t figure out what you did. If you have a back-up, you can fix mistakes and start all over making your changes. Now, if you aren’t familiar at all with CSS, what your looking for is a file called style.css in your theme folder. This can be done in the Wordpress dashboard. Go to Themes/Theme Editor. Depending on the theme your using, this could be a breeze, or a little confusing. That just depends on how clear the code is written. This didn’t take me too long, because I coded this theme and know where everything is. But doing the same thing on one that I’m unfamiliar with would take a little longer.

What we have to do, is scroll down the stylesheet and identify the parts that we need to change. When you come to the wrapper, you’ll see a line of code that reads width:900px;. Change that to width:750px;. Now we’re gonna find the other items from our list, on this style sheet one by one. For each item, remember, subtract 150px from the width. When you come to the post and the sidebar, you have to divide that 150px between the two of them. You don’t want to make the sidebar too narrow. I think what I did was take 20px off the sidebar, and 130px off the post. This is an area you may have to test a couple of variations to see what works best. When you finish, save your changes.

All that’s left is the background header image. For the header image, the same rule applies…..subtract 150px from the width. Only thing, the image needs to actually be re-sized, not re-coded. What you need is an image editing program. There’s Photoshop, the Gimp, and a host of others. If you don’t already have one, there are quite a few free ones available that will handle this job just fine. The way I see it, there are two options here. You can crop the image, cutting out a portion, or you can resize the image to the width you want. There are advantages and disadvantages to both. Generally, I would crop the image if possible, because that doesn’t change the height of the image. Which you do is up to you. Make your decision on what you think will work best.

Next up, mmm…..hey we’re done! If all went well, everything is looking great.

Other Posts In This Series

• Understanding Layout
• Replace Your Blog Title with a Logo
• Wordpress Theme Tips: Text