Oct 4, 2008

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.

15 comments:

  1. Thanks for the code. I admit that I will have to go over this at length to understand what I read but anyhow, I look forward to hearing more tips at your blog soon.

    ReplyDelete
  2. This is going to be a wonderful blog! It is going to be very helpful. I tried the modifications above but when I previewed my blog flashed and then the window went white so I didn't save. Should I have worried about that?

    ReplyDelete
  3. @Ottowa Gardener make sure to look at the Table of Contents page for a full list until I populate the sidebar with more info.

    @Dee: When I hit preview I usually right-click and open in a new window. The white window was probably your browser blocking the pop-up preview window. Try right-clicking and setting it to open in a new tab or window or see your pop-up settings. If you have trouble let me know. If you do something wrong you should get an error message with red text that tells you what is wrong with the code.

    ReplyDelete
  4. Thank you for this, I'd been wanting to figure out how to do this without wrecking everything.

    ReplyDelete
  5. No problem Lisa. Thanks for stopping by and commenting.

    ReplyDelete
  6. THANK YOU! This is exactly what I needed to figure out today! I changed my template yesterday but it was even narrower than my last one. Your steps were so easy to follow!

    ReplyDelete
  7. I'm not a garden blogger, but this was really helpful to me! Thanks.

    ReplyDelete
  8. Wildflower & Miss Grace glad you found the info useful

    ReplyDelete
  9. Thank you it worked like a charm what do you think www.photofingers.blogspot.com

    ReplyDelete
  10. Thanks so much! This was really helpful and I followed all the steps. I read somewhere that the best sizes are 1024 x 768 (instead of 760 x 760, or 800 x 600). Just thought I'd pass that along. Thanks! :-)

    ReplyDelete
  11. I must admit, when people start speaking "Codeish," my eyes glaze over slightly. However, looks like you've made the instructions very clear, and I'm sure that when I sit down to try this it will begin to make sense. Thank you. I'm looking forward to having a more beauteous blog!

    ReplyDelete
  12. I love this! Thank so much! The only thing, probably just me, but I can't figure out why my header isn't centered now? I followed step by step, but it looks a little odd. Any suggestions would be greatly appreciated. Thanks! I will add you to my blogger help page. :)

    ReplyDelete
  13. sorry, the above post is in regards to this page
    http://typicallifecfdwife.blogspot.com
    thanks!

    ReplyDelete
  14. Kara,

    If you widened something your blog (main blog area, sidebar) then you're going to have to widen the header too and use a new header image closer in size to the new header if you want it centered.

    ReplyDelete
  15. I hope to be a gardener one day, but as of now I don't own the land in my background so that will have to wait. However, you did help me resize my blog and I am very thankful for that because I searched high and low and you were the only one who explained it in a way that I could understand! So thank you! :)

    ReplyDelete

I hope you find this blog a useful garden blogging resource. Sometimes I may reply to comments with my MrBrownThumb account or I may reply with my Garden Bloggers account. Hope this isn't confusing. If you're looking for gardening information check out "Google For Gardeners"

Note: Only a member of this blog may post a comment.