Resizing your page or blog

Stumble del.icio.us Reddit MyWeb! Facebook Google bookmark

The default size for the blog when you create it is usually 660px in most of the blog templates that the blogspot has. It's easy to change the size of the blog (width etc) if you want. Just goto customize -> Layout tab -> Edit Html. Click on Expand Widget Templates and then follow the following.

YOU ARE ADVISED TO "DOWNLOAD FULL TEMPLATE" BEFORE YOU MESS WITH ANYTHING.

The default settings are as defined here:

Under the header section, you will see the following css class definitions:

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

Look for #header-wrapper. This defines the header width(the block that contains your blog title and description). So you might like to change the width from 660px to say 800px or more if you want, so that it becomes:

/* Header
-----------------------------------------------
*/

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

Similarly, look for all other css styles with width of 660px and change them to 800px. Specially look for #header .description, #outer-wrapper, #footer.

You might see the following in NOT particularly the same order:

#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:660px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}

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

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

Now after you have changed all 660px to 800px, is the time to change the main blog post width to fit the page.
The sidebar width is usually defined at 220px as shown below: (Specially look for #sidebar-wrapper)

#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 */
}

So we have to have the width of post as 800-220 = 580px. So look for the following in your css definitions: #main-wrapper

#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 or whatever is defined there to 580px. And Voila after you save the settings, you are flying with a new more spacious blog of yours. :)
Enjoy!!