How to Change or Increase Width of Your Blog

=>Why to increase the width

=> You can have bigger images in your blogs.

=> Good result in old browsers like Internet Explorer 6.

=> Sidebar in perfect position.

=> It gives your blog an overall clean look.

=>Steps to follow

1- First of all you need to go to "Layout" and then "Edit HTML".

Tip: Click on "Download Full Template" to backup your template.

2- Find the following code in your template CSS between and .



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

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

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


Remember: The width factor in #outer-wrapper defined the overall width of blog, in #main-wrapper it defines the width of your posts and in #sidebar-wrapper it defines the width of your sidebar.

3- Now you know the code, you can increase the width in #outer-wrapper and then increase in the #main-wrapper (for posts) or #sidebar-wrapper (for sidebar).

Warning: When you increase the width of any tag, see the preview and if you're satisfied only then you should save.

4- Similarly if you want to change the width of your header, here is the code in your template CSS between and .


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

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


5- Just change the width factor and see the preview, if you're happy with the outcome, save the template otherwise discard the changes.

Share this post!