Today, I would like to talk about template again. Perhaps some of you really like your template but column width still bothers you. The column width doesn’t match with your want or like whether it is column width of the sidebar or main bar (posting column). Sometimes the width of the template is too wide or too narrow. Ok, if you really have such problems, I have tips to make the column width become our like or want.
In order to know the column width of a template, we can identify it through its CSS style sheet. Of course, there are some differences between one template to another and it surely depends on the template designer its self. For example; header, according to template standard of logger in its CSS style sheet named header but if the templates are made by the designer (out of blogger), it is named banner. Actually, name doesn’t influence anything. Name is used to make templates users easy to remember it if the edit the template.
In order not to make confused, I used Minima template 3 columns that can be downloaded here. And after seeing the situation, I notice that many people really like this template. If you are not satisfied with the column width of the template, please follow the tips so that the width of the column as your want or like.
By the way, where can we find the code to manage the width of column? I give you an example,
#header-wrapper {
width:900px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
#outer-wrapper {
width: 900px;
margin:0 auto;
padding:10px;
text-align:justify;
font: $bodyfont;
}
#main-wrapper {
width: 435px;
margin-left: 20px;
margin-right: 20px;
float: left;
}
#sidebar-wrapper {
width: 220px;
float: right;
}
#newsidebar-wrapper {
width: 200px;
float: left;
}
As you see in the code above, the red writing affects the width column. so let’s make it easy. 900px is a width value that is 900pixel.
To make you understand, the codes above are explained by me.
#header-wrapper {
width:900px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
This is header-wrapper whose width is as big as 900px and has border (I consider that border is frame) 1 pixel with solid line (solid = full line. Dashed = broken off lines. Dotted= dot lines) with border color that can be changed [font and color]
Header–wrapper is only a name, not absolute. It is ok if it is changed with banner. Width: 900px means that its width is 900pixel. So, the value of 900 pixel is the value that we can change as our like or want, whether we want to make it wider or smaller. But you must remember, the value of this header should be the same with the width of the body. border:1px solid $border color; it is used to make header have margin 1pixel, if you want to have thicker margin, just add the value but if you don’t want the margin, just erase the code.
#outer-wrapper {
width: 900px;
margin:0 auto;
padding:10px;
text-align:justify;
font: $bodyfont;
}
It means that outer-wrapper has a width for 900px, the distance is 10 pixel with the align on the left and right are the same and the font that can be changes through font and color panel.
Outer-wrapper is only a name. Width: 900px means that the width is 900 pixels. This 900 pixel is the width which is provided in exist columns, in this case we call main-wrapper, sidebar wrapper, and new-sidebar wrapper. So, in the other hand outer wrapper is the sum of column width between main-wrapper, sidebar-wrapper, and new sidebar-wrapper. If you write contents more than each column width, it will automatically be more spec of the width provided by outer wrapper and one of column will be under the main bar and our blog will look boring to see. That’s why if you want to change the width of one of columns, the width of outer wrapper should be erased too.
#main-wrapper {
width: 435px;
margin-left: 20px;
margin-right: 20px;
float: left;
}
It means that the width of main-wrapper column is 435 pixels with 20 pixels for right margin and 20 pixels for left margin. This column is located on the left.
main – wrapper is page column of post, what we post will go to this page. width: 435px; means that the width column is 435pixels, but because using left margin and right margin, then the width of the column should be 475 pixels. 40 pixels is only an interval so that margin column doesn’t touch each others. If you feel the column is too narrow or small, then add the value, example 550 pixels. If you plan to change that column, the column of outer-wrapper should be added too. For example; if main-wrapper want to be 550 pixels, then 550px -477px=755. It means that the column of outer-wrapper should be added 75px, so 900px+75px=975px.
#sidebar-wrapper {
width: 220px;
float: right;
}
It is sidebar-wrapper column and it has a width 220 pixel and placed on the right of the screen. Sidebar-wrapper column is a sidebar column or widget column where we keep all kinds of widget and accessories. Width: 220px; means that its width is 220 pixels, if you want to make it narrow or wider, then you only need to change the number of pixels. Just remember, if you want to change the value of this column, don’t forget to change the space value provided by outer-wrapper, example; if this column is enlarged into 250 pixels, then additional pixels are 30 pixels, and don’t’ forget to also add the column of outer – wrapper.
#newsidebar-wrapper {
width: 200px;
float: left;
}
It means that the column of new sidebar – wrapper is 200 pixels and placed on the left of the screen.
Like sidebar-wrapper, the column of new sidebar-wrapper is a place to keep the accessories or tools. This column is made so that we can pun more accessories we want. The width of new sidebar-wrapper column is 200px, and if you want to change, just change the pixel value but don’t forget to add the pixel value at outer-wrapper column.
Ok, now compare between both blog, click here and here!
Happy Confusing!!!
If you enjoyed this article about How to change the width of template, subscribe to receive more great content just like it.
0 Comments:
Post a Comment
Comments in moderation due to spam reasons