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!
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!
My personal photo, altered using multiple
textured image layers from Shadowhouse Creations
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!
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!
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.
ReplyDeleteThanks Donna. Will give it a go over the holidays. I love the layers you used. It is beautiful!!!! xxxRobby...(a bit warmer now...lol)
ReplyDeleteYou 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.
ReplyDeleteYou 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!
ReplyDeleteMay Santa bring to you, your hearts desire....(((HUG)))
PS- May I post this link on my blogroll???
ReplyDeleteHey, 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.
ReplyDeleteYes, 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!
Such good tricks, Donna! Thanks for sharing them. It's good to catch up with you here. Hugs!
ReplyDeleteThanks 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.
ReplyDeleteThank 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
ReplyDeleteThanks Again!!!(((HUG)))
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!!
ReplyDeleteHope you'll have a good week! ((hugs))
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
ReplyDeleteIf 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!!!
ReplyDeleteThanks for the tips! I love changing up my template, so this will come in real handy.
ReplyDeleteJust 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.
ReplyDeleteYour 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!
ReplyDeleteThank 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!
ReplyDeleteI 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