Sunday, December 14, 2008

Edit Template




Again, I question the template. There may be some of the comrade who have all felt very like a template, but there are difficulties the column width is not suit us, both the column width or sidebar mainbar (column where the post). Occasionally the column width of a template in a sense too wide or too narrow, if such a thing, I have good tips However in order for a wide field in accordance with our own desires.

To know the column width of a template, we can through it to its CSS style sheets. But of course there is a difference between a template with a template that other, this of course is up to the designer to its own template. As an example for the header, if the standard template blogger in the CSS style sheet is called the header, but for the template-designer-made templates of other bloggers out there who call Banner or the names of the other. A name will not necessarily affect the results you can be in, in the name of this life is just so easy to remember or recognize users by the template if you want to do edit template.
So that not too confusing, I take the example minima 3 column template . After viewing the growth of this template was a lot like it. If you are not satisfied with the width of the columns in the template, please follow the tips below , wide columns in accordance with the wishes comrade. Where is the location codes to set the column width? I give 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 shown in the code above, that affect the width of my column is printed in red. Width,so get simple for it. 900px is a value that is equal to the width 900 pixels.

To better understand, code I describe above:

# header-wrapper (
width: 900px;
margin: 0 auto 10px;
border: 1px solid $ bordercolor;
)

This means the header-wrapper has a width of 900px and have a border (I'd mean border is a frame or margin) of 1 pixel with a solid line (solid line = full. Dashed line = broken. = Dotted line form of dots) with the colors in the border that could change-change (in the font and color).

header-wrapper is only naming it, is not absolute. If the change in the name of the head also does not do anything. width: 900px; mean width of 900 pixels.SO this is the value of 900 pixels that can change the suit , want to get more value added width, or in reducing get smaller.But I suggest, the value of this header must be the same as the value of the wide body to look good. border: 1px solid $ bordercolor; the header is to have any margin of 1 pixel, if you want to live more bold comrade add value, or if you want a margin is the only comrade remove this code.



# outer-wrapper (
width: 900px;
margin: 0 auto;
padding: 10px;
text-align: justify;
font: $ bodyfont;
)

This means the outer-wrapper has a width of 900px, the distance gap of 10 pixels align it with a flat left-and right kind of letter that could change in the change-over bar and the letter color.

outer wrapper is just a name only. width: 900px; means 900 pixels wide. 900 pixels wide which is provided for in the fields of, say only in this column main-wrapper, sidebar-wrapper, and newsidebar-wrapper. So in other words is the result of the outer wrapper Answer column width main-wrapper, sidebar-wrapper, and newsidebar-wrapper. When comrade incorporate content that exceeds the width of each column, then automatically also exceeds the width provided by the outer wrapper and that happens is one of the fields will be pulling down to this and make us a dreadful sight for the eyes. So if you want to change a wide field between the three, the width of the outer wrapper also have to be adjusted and changed.


# main-wrapper (
width: 435px;
margin-left: 20px;
margin-right: 20px;
float: left;

)

This means that the field has main-wrapper width of 435 pixels with the right margin of 20 pixels, the left margin and 20 pixels in this column placed left.

wrapper is the main-page column posts, what we will post the entry to this page. width: 435px; this means that the width of a column of 435 pixels, but because of the margin-left and margin-right, then the actual column width is 475 pixels. But the pause is only 40 pixels in order to limit the field only to be seen not touch. When comrade feel this column is too narrow or too small, you can add value, for example 550 pixels. When comrade intend alter this column, a column outer-wraper also must be added value. examples when the main-wrapper want to be 550 pixels, the 550px-475px = 75px. This means that the outer-wrapper column should be added as 75px, so 900px +75 px = 975px.


# sidebar-wrapper (
width: 220px;
float: right;
)

This means the column sidebar-wrapper has a width of 220 pixels and place it in the right screen.

Column sidebar-wrapper is a sidebar column or columns in the place where we store various accessories or do other. width: 220px; means have a width of 220 pixels, if you want to narrow or in the enlarge, we only need to change the value pixel only. But when the value of this column, do not forget to change the value in the space provided by outer-wrapper. example: if this column would like to become enlarged 250pixel the additional pixels is 30 pixels, so do not forget to add in the same outer-wrapper.

# newsidebar-wrapper (
width: 200px;
float: left;
)


This means newsidebar column-wrapper has a width of 200 pixels in the fields and in place on the screen to the left.

Like sidebar-wrapper, new sidebar column-wrapper is also the place or store various accessories blog tool. in this column so that we can create more load various accessories that we want. Column newsidebar-wrapper this is 200px wide, well when the change intend to stay the course pixel value, but do not forget to add in the same outer-wrapper.

Click here to get your free mobile phone or apple ipod

No comments:

Post a Comment

Custom Search