How To Widen The "Main" Blog Area

I've noticed that a lot of gardeners like to, understandably, go heavy on the pictures in their blog posts. Garden photography is a big part of garden blogging and the use of photos to illustrate the accompanying text on plants, bugs and flowers is to be expected. Sometimes a lot of pictures placed poorly on a blog post detract from the blog and can look a bit confusing. On my personal garden blog I got into the habit of centering the majority of the photos I upload in the blog post. When I have more than a couple of photos I will justify them to the right but as a rule I center them because the text can look bunched up on the left when there are a lot of photos on the right.

Another reason why I prefer to center my images below blocks of text is because I like to try to maintain a word count per line that falls somewhere between 10-15 words so that sentences are easy to on the eyes. One thing that you could do with your blog is to widen the main blog area so that there is ample room for pictures and text. If you performed the modification on how to widen your sidebar this one should be easy.

Step #1: Backup and Save
I can't stress how important this is because there may come a time where you'll regret not doing this, trust me. Download a copy of your template in the event that anything should go wrong. If you do something that you don't like or know how to fix you can always upload your template and go back to how you originally were. To do this go to Layout> Edit HTML then click Download Full Template. My favorite option is to create a test blog where you can perform these modifications first and then do them to your garden blog once you feel comfortable enough with the process. Now lets look at the section of the template we'll be working on.

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 410px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

This is a section of code for the Minima blog template. Lets begin with the outer wrapper. Think of the outer-wrapper as like a girdle or a belt holding your blog in place. The outer-wrapper holds the main area, sidebar, header and footer in place. In this case the outer-wrapper is 660 pixels wide, the main area takes up 410 of these pixels and the sidebar another 220 pixels. In Minima the header and footer are each 660 pixels wide. 410 pixels + 220pixels =630 pixels that leaves us with 20 pixels (subtract 10 pixels for the "padding" in the outer-wrapper) of room to play with here which really isn't enough for our needs.

Step #2: Make Room
If you've ever had a big meal chances are that you've probably loosened your belt once or twice for comfort-that's similar to what we're going to do here. For this example we'll add 100 pixels to your outer-wrapper by changing 660 to 760 but you can add more if you like. Now the outer-wrapper is 750 pixels wide (minus the 10 pixels for the "padding" in the outer-wrapper) giving us some room to play with. 630 pixels (410 for the main + 220 for the sidebar) from 750 pixels gives us 120 pixels we can add to the main blog area. If you changed these numbers your code should now look like this:

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 760px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 530px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

The only changes we've made so far are to the numbers in red. The outer-wrapper width to give us more room and the main-wrapper width to take advantage of the new space we created. At this point you can click preview to see your handy work and if everything went smoothly you can click save. Before you're done you have one last step. Remember above when I said the header and footer are generally the same width as the outer-wrapper? You probably noticed when you previewed that your header wasn't as wide as your main area and your sidebar combined. To keep things balanced find the header-wrapper near the top of your template. It looks like this:

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

and change the 660 to 760. When you've done that scroll down your template and do the same for the footer wrapper that looks like this:

#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

Change the 660 here to 760 also. Whatever changes we do to the outer-wrapper have to be done to the header and footer as well. There is no critical issue that will arise if you don't add the extra pixels to the header and footer- it is mostly cosmetic and to keep things looking balanced. Once again hit preview and if everything went well go back and hit save. And now you're done.

Consider This
In this example I only added 100 pixels to the outer-wrapper and to the main-wrapper but you can add as many as you like, to a point. The outer-wrapper for www.GardenBloggers.com is 1010 pixels wide to accomodate the additions I made to this template. If you enlarge your main blog area by a couple hundred pixels you may have to make the font size for your blog larger too if you'd like to keep your sentences to 10-15 words per line. To do this go to Layout>Fonts and Colors. You can't make these changes to templates that use images for backgrounds and borders without creating more work for yourself. If you widen or shrink any area in a template like that you'll have to resize and replace those images, it isn't hard to do but it can be for someone who doesn't have experience with editing or creating graphics.

If you've been garden blogging for a while you probably use a service that provides you with stats on visitors to your garden blog. Among those stats you may get information on the browsers and screen size of visitors to your blog. When making changes to your blog consider how it will impact the majority of your visitors. The stats for my personal garden blog indicate that the majority of visitors use rather large computer monitors. I'll probably redesign my template (larger main area) for my personal blog soon because of this to make visiting my blog a more pleasant experience for readers.