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 ...!!!
Wednesday
Subscribe to:
Post Comments (Atom)

No comments:
Post a Comment