Wednesday

INCREASE THE SIZE OF THE TEMPLATE

Maybe you feel the template provided by blogger too narrow or less wide. Would you like to change your template to be more broadly? I usually use the following way, which I think is the simplest.

There are some parts of the template that will be resized:

Outer-wreper: The width of the template as a whole
Main-wrapper: section where we normally post articles
Sedebar-wrapper: usually located on the right or left of the main wraper
Header-wrapper: The top part of the template
Footer-wrapper: Basic or in the bottom

Now log into your blog, click the layout and then click edit html. Do not be a check in Expand widget templates.
Then find the following code:

# outer-wrapper {
width: 660px;
margin: 0 auto;
padding: 10px;
text-align: $ startSide;
font: $ bodyfont;
}
# main-wrapper {
width: 410px;
float:;
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 * /

You can change the size of the red text.

# outer-wrapper {
width: 950px;
margin: 0 auto;
padding: 10px;
text-align: $ startSide;
font: $ bodyfont;
}

# main-wrapper {
width: 500px;
float:;
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: 400px;
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 * /

If the outer-wrapper width: 950px then the main distance-sedebar-wraper and wraper should be adjusted:

Main-wrapper: 500px
Sedebar-wrapper: 400px
While the rest of 50px is the distance between sedebar and posting.
After that, do not forget to also adjust the width of the header and footer-wraper same wraper and outer-wraper

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

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

Which must be changed is the red text. If you already click preview, if you felt was appropriate and in the save.

Good luck ...!!!

No comments:

Post a Comment