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
- First of all you need to go to Design tab and then select Edit HTML.
Tip: Click on Download Full Template to backup your template.
- Find the following code between <b:skin> and </b:skin>.
/* 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 <b:skin> and </b:skin>.
/* 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.
Contact Me If Something Does Not Work!
If you are unable to make changes as described
in the tutorial, please drop me an email
at Sanjayjoshi592@gmail.com.
I'd charge $10 to fix the issue.
No comments:
Post a Comment