December 13, 2009

Blog Tutorial: Changing Minima Template for Wider 2-Column Layout

shaker basket, Pleasant Hill, KY
From the very beginning of my blog’s creation, I have liked the simplicity of Blogger’s Minima two-column template. This template version also allows the user to decorate the computer screen sides with one of the many pretty backgrounds available on the internet (or one of your own).
But I have longed for an overall format width the equivalent of a 3-column blog, so that I could have a wider main column. There are times that I want the flexibility to showcase special images in a larger format.
Look at the difference between the sizes of the first image versus the one below. As a reader, which size photo would you like to see? Would you like to change your blog format too? Well, read on to find out how I accomplished this task!
shaker basket, Pleasant Hill, KY
My personal photo, altered using multiple
textured image layers from Shadowhouse Creations

Prepare a new picture insert for your header, with an image width of 900 pixels. If you use a web link to a decorative blog background, replace your background to one designed for 3 columns.
Go to Layout, Edit HTML tab. As a safety precaution, copy the entire template coding and save it in a Word file. (Or create a separate blog for format testing purposes. You can always delete it later.)
To widen the header width, look for this text in the html language:
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:0px solid $bordercolor;
}
Change 660px to 900px.
To widen to outer wrapper, look for this text in the html language:
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
Change 660px to 900px.
The next step is to change the main column width, so look for this text in the html language:
#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 */
}
Change 410px to 660px.
The last change to make is to widen the footer, so look for this text in the html language:
#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 660px to 900px.
Preview your new template. If you are satisfied, then click on Save Template.
The last adjustment to make is to upload your new header picture with the wider format.
The revised template will now allow posting of images that are a maximum of 640 pixels by 640 pixels. (I found that to be the optimum size to go with the revised main column width of 660 pixels.) For these larger image sizes, upload your image on a photographic storage website like Photobucket. (You can adjust pixel sizes in Photobucket after file uploading, if you prefer.) Then insert the photo in your blog post via a direct link, rather than uploading it into your Picasa web album.
So there you go! The above steps are certainly not cast in stone. These are merely the adjustments that I recently made for my blog, thanks to some online research. If you want to tinker with the pixel sizes to suit your tastes, then give it a whirl! And, if you totally mess things up and want to go back to a standard 2-column Minima template, then reinsert the original html language that you copied earlier.
I welcome your feedback on these instructions!

P.S. I did more exploring to figure out why my properly scaled, wider photos were being resized by the Picasa uploader back down to the 400 pixels maximum width.  This quirk was requiring me to do a web link to Photobucket to obtain the larger format image size in my posts. I did not know that Blogger had an updated post editor available.  It allows upload of "extra wide" photos.
To make the change, go to your Dashboard's Settings/Basic tabs. Scroll down to "Select post editor".  Choose "Updated editor" instead of "Old editor".  Problem solved!

17 comments:

  1. Thank you so much for posting the instructions. I wanted to know when you posted that you had changed the width from a 2 column to a 3 but hesitated to ask. :D I did a copy and will give it a try.

    ReplyDelete
  2. Thanks Donna. Will give it a go over the holidays. I love the layers you used. It is beautiful!!!! xxxRobby...(a bit warmer now...lol)

    ReplyDelete
  3. You are so good to give instructions! Will give it a try when my brain is functioning in both hemispheres again. Love the photo of the basket ~ beautiful.

    ReplyDelete
  4. You Really need to Teach!! I can't Thank you enough for doing all the hard work and than giving it to us!!! You're such a Generous soul sweetie!
    May Santa bring to you, your hearts desire....(((HUG)))

    ReplyDelete
  5. PS- May I post this link on my blogroll???

    ReplyDelete
  6. Hey, everyone! Let me know how these instructions work for you! I know it is a busy time of year. So I quite expect that it will be sometime later on before you can tinker with your own blogs.

    Yes, Donna (& others)! You may link back to this posting on your blogs or otherwise bring it to the attention of other folks! I would be flattered!

    ReplyDelete
  7. Such good tricks, Donna! Thanks for sharing them. It's good to catch up with you here. Hugs!

    ReplyDelete
  8. Thanks for these instructions. I'd love it if you gave other instructions for blog design tips. I'd love even some pointers for some basics.

    ReplyDelete
  9. Thank you Mam!! I have Not had the chance, you're right...but I'll be trying it out first on my test blog..Hahaa...you know me...all thumbs!!Hahaa
    Thanks Again!!!(((HUG)))

    ReplyDelete
  10. I admire you so much for teaching yourself how to do this stuff and helping others. As for me, being on dial-up (which takes FOREVER to do anything) I need to leave mine alone lest I mess it up more!!

    Hope you'll have a good week! ((hugs))

    ReplyDelete
  11. Ok...I've got the basic stuff done...Now I'm trying to figure out how to get the photos to look nice (without those zzz lines on the edges....getting there!!Hahaa...hughugs

    ReplyDelete
  12. If you get an email that says I'm in London and needing to have money sent to be so I can get home, don't worry...I've been hacked!!! Just trash it!!!

    ReplyDelete
  13. Thanks for the tips! I love changing up my template, so this will come in real handy.

    ReplyDelete
  14. Just one question. How did you put the two side frames in the template? I got the rest figured out but I don't know how to add that. I love the pictures of the windows.

    ReplyDelete
  15. Your blog keeps getting better and better! Your older articles are not as good as newer ones you have a lot more creativity and originality now keep it up!

    ReplyDelete
  16. Thank you so very, very much!! This has done outstanding things for my photos...well at least I think so!!! You are a jewel to behold! Love and blessings to you and yours!

    ReplyDelete
  17. I also forgot to tell you Jason Sparks was the one that led me to your blog..."Photo Communique" just in case you were wondering. I am sorry I forgot to mention it. Thanks for stopping by and for your nice words as well. I appreciate the camaraderie and fellowship amongst photographers I am finding...makes my heart happy and my brain a little smarter each day which is definitely a good thing since I am so new at photography there is so much to learn. Thanks again for making it so much easier to let my pictures shine.

    ReplyDelete

Marty, here! Donna loves comments, and I faithfully pass them on to her. Thank you so much for visiting!