I have made some changes to my blog and now some widgets don't fit the side bar. Here is how to change the width in blogger html and solutions to make your blog look better.
=>Why to increase the width
=> You can have bigger images in your blogs.
=> You can fit the widgets
=> 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 <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. |
No comments:
Post a Comment