Changing Width of Blog

Share |

To change the width of your blog.................

you will have to change certain parameters in the CSS (CASCADING STYLE SHEET) part of the template.

To do this login to Dashboard and click on Layout under the name of your blog. This takes you to Page Elements. Then click on Edit Html tab next to Page Elements tab. This opens the Edit Template page.


FIRST BACKUP YOUR TEMPLATE TO YOUR PC USING METHODS DESCRIBED IN : HOW TO CHANGE THE TEMPLATE.

Then without putting a check in the Expand Widget Templates box at the top of the Edit Template text box scroll down in the box till you come to :


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

#main-wrapper {
width: 530px;
margin-left: 20px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}

#sidebar-wrapper {
width: 250px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}

#newsidebar-wrapper {
width: 170px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}


The Outer wrapper contains the main wrapper and the two sidebar wrappers. Their dimensions are described by the width parameter. Their positions are described by the float parameter. Notice that the outer wrapper does not have a float parameter. This is because its position in the center of the page is described by the "margin 0 auto" parameter. To change the width of any of the main or sidebar column change their width parameters only. Then change the width of the outer wrapper by the same amount because it has to expand to include the new width.

IMPORTANT :

CHANGE ONLY ONE PARAMETER AT A TIME.........AND

HIT THE PREVIEW BUTTON (at the bottom of the box) TO SEE THE EFFECT........BEFORE

SAVING TEMPLATE.

IF YOU DON'T LIKE IT RELOAD OLD BACKED UP TEMPLATE AT ANY TIME.

You will have reason to increase the width of your blog when you find your main column of posts below the sidebar or the sidebar below the posts column. This happens when a large photograph or a large link is added in the posts column. This prevents the sidebar from rising up to take its normal place besides the posts column. Increasing the width of the outer-wrapper then accomodates the sidebar.

To change the width of the HEADER scroll down in Edit Template text box till you come to :

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

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

then change 750 to whatever width you want it to be.