
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!
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!



















