Change width of Blog template, sidebar, main-3

continue from previous....

Background:
We use this to display particular color or image as a background of web page or text or particular element like main wrapper or sidebar wrapper.

The values for this are:

background:#006699;
background:$bgcolor;
background: #ffffff url("here you need to give the url of image");
background: $bodybgcolor url("here you need to give the url of image");
background: $ bodybgcolor url("here you need to give the url of image") repeat-x;
background: $ bodybgcolor url("here you need to give the url of image") repeat-y;
background: $ bodybgcolor url("here you need to give the url of image") repeat-x top right;
background: $ bodybgcolor url("here you need to give the url of image") repeat-x bottom right;

*instead of #006699 you can use $bgcolor if you have defined it in variables.

Now we see when each of this is useful for us:
background:#006699; (this is for displaying color as background. If we didn’t define this body background become as default or browser displays white color as background)

background:$bgcolor; (this we use when we defined color as variable and like to use in many place and wants to change at a time in all places)
background: #ffffff url("here you need to give the url of image"); (this we use when we want to display an image as background, by giving #ffffff browser shows this color if image is not available or restricted by browser settings)
background: $bodybgcolor url("here you need to give the url of image"); (this we use when we declared color in varible)
background: $ bodybgcolor url("here you need to give the url of image") repeat-x; (this we use to display image in x-axis, i.e., to repeat only right side or in horizontal)
background: $ bodybgcolor url("here you need to give the url of image") repeat-y; (this we use to display image in y-axis or to repeat in vertical)
background: $ bodybgcolor url("here you need to give the url of image") repeat-x top right; (this we use to display image horizontally and top side only)
background: $ bodybgcolor url("here you need to give the url of image") repeat-x bottom right; (this we use to display image horizontally only bottom side)


Font:
This we use to define font of an element. Generally this is not required.


Color:
This we use to define the color of font. This can be defined as follow:

color: #999999; or
color:$pagetitlecolor;

Where ever we use text color will be displayed in the color what value we given here.


Text-align:
This we use to define the alignment of text. Values for this are:
text-align: left; (it aligns text to left side)
text-align: right; (it aligns text to right side)
text-align: center; (it aligns text in center)
text-align: justified; (it aligns text in justified manner)


Text-transform:
This we use to transform the text to uppercase or in lower case. When we use this text will be transformed into the defined value, irrelevant of case we typed.
Values are:
text-transform: none; (if we use this text will not be transformed)
text-transform: uppercase; (if we use this text will be transformed into uppercase)


With this I hope you understand your templates attributes and how to change it. If you felt happy with this then send to someone who need it. If any requirements, suggestions or if you want to contribute something to this, then mail me to myonlinekt@gmail.com or you can post your comment.

| Previous | Home |

Change width of Blog template, sidebar, main-2

continue from previous...

Width:
We use this for giving width of a particular item. If we didn’t given this, by default it will take 100% of available area. It can be given in px or in %.

You can give this value like this:  width: 100px; or width: 25%;

If you give in % it will take count from total available screen area. It is not 25% of particular item in all the situations, so be care full.

While giving this you have to decide how much should be the padding and margin for your item. Padding value includes your width and reduces your original usable area. Margin value will not affect your usable area but increases the total width of your defined item.

Height:
This feature we use to restrict the height of a particular item.
You can give this value like this:   height: 100px; or height: 25%;


Float:
We use this to float or send particular item in one direction. For example if we say float: right; for sidebar means we are saying that sidebar should float towards right side.

You can give value for this:

float: right; or float: $endSide;
float: left; or float: $startSide;

If you say float: right; for main wrapper and sidebar wrappers both will go on right side of screen. To display gap between these two elements we need to use margin attribute.
If you given margin: 5px; to main then you need to give margin for top and left or right and bottom for sidebar on the basis of its location in body structure to display equal gap between main and sidebar.
If you given margin: 5px; to sidebar then you need to give margin for top and left or right and bottom for main on the basis of its location in body structure to display equal gap between main and sidebar.
Otherwise gap between main and sidebar will be more.


Border:
We use this to display boarder to particular element. The value of boarder is exclusive to the element, i.e., it is an extra to the defined value of item.
Ex: if u say width: 500px; for main wrapper and border: 1px; then the total width of main will be 502px. (500px+2px of border (1px on left side and 1px on right side))

We can give values for this as follows:
border: 1px solid $bordercolor; or border: 1px dotted $bordercolor; etc.
for detailed understanding:
border: 1px; (if we use this we get general color to the border to specify a color follow next one)
or
border: 1px solid #999999; (here we are giving the color of border for this particular one only)
or
border: 1px solid $bordercolor; (here we are declaring the color of border in single time and can use in many places, when we use a declared value, we can add it many places and when we change the color of $bordercolor automatically change takes effect all the places where ever you used it)
or we can restrict it to a side like this:
border -left: 1px; or border -$startSide:1px;
border -right: 1px; or border -$endSide:1px;
border -top: 1px;
border -bottom: 1px;

If you say: “border: 5px;” (particular item will get 5px margin on all the sides in single declaration, i.e., top, right, bottom, left )

If you want to restrict it for a particular side or sides then you need to use these:
border -left: 1px; or border -$startSide:1px; (only left side it will get 1px border)
border -right: 1px; or border -$endSide:1px; (only right side it will get 1px border)
border -top: 1px; (only top side it will get 1px border)
border -bottom: 15px; (only bottom side it will get 1px border)

For example if u give border -top: 1px; means only top it will give 1px margin and remaining sides will be 0px.

| Previous | Home | Next |

Change width of Blog template, sidebar, main-1

continue from previous........

#main-wrapper
In general this is the post area which we use to post all our content. Generally this is one column in webpage. Another column is sidebar. So these two shares the space side by side in outer wrapper and aligns after header in body of webpage. So you have to decide how much width should be your main wrapper.

Ex: if you want 500px exact usable post area for your main wrapper then give width as 500px. If you want some space on all sides to your post content then give padding for that, say 5px. When you give padding 5px your net usable area will be 480px. If you want exactly 500px for your usage purpose, then change width of main-wrapper form 500 to 510px, so that you will get 500px content area and 5px on both sides of post as padding and looks good also. If you want some space between your main and sidebar then give margin. This margin will not share your main-wrapper-width, it will take extra to the given value. That means if you give 6px as margin to main wrapper, then your main wrapper width becomes 500px+10px padding+12px margin=total 522px.

If your sidebar is on right side of your main wrapper, then you no need to give margin on left side of your sidebar. Just top, right and bottom is enough, because main wrapper already it had 6px margin on all sides.

For this we can use these attributes: Background, Width, Margin, Padding, Float, font, color and text-align.


#sidebar-wrapper
This is second column of your web page. For this also all the rules of main-wrapper will hold. So follow all the rules from main-wrapper section.

For this we can use these attributes: Background, Width, Margin, Padding, Float, font, color and text-align.


#footer
This is the last one in webpage. For this also all the rules will apply like main wrapper. Generally this will not share its width with others wrappers. So we can take its width like exactly the width of header wrapper. So the look of web page can be uniform.

For this we can use these attributes: Background, Width, Margin, Padding, Float, font, color, text-transform and text-align.


Now we will see the attributes of these elements of web page:

Each of the above elements it will have its own features. These features are like:  Margin, Padding, Width, Height, Float, Border, Background, font, color, text-align, text-transform. We can use all these for any element.
Now we see how each of these features will work and then we will go to the page elements how to change these features for them and how they will behave for each change.

Margin:
We use this feature for giving margin for particular item excluding its value. This means if your main wrapper width is 500px, and you had given 5px margin means total width of your main is 500+5px margin left side+5px margin right side = 510px total width of your main wrapper. And height is your main height + 10px margin inducing top and bottom.

Margin has values like this:  We can give values for this as follows:
margin: 5px; or
margin-left: 5px; or margin-$startSide: 5px;
margin-right: 5px; or margin-$endSide: 5px;
margin-top: 5px;
margin-bottom: 5px;

If you say: “ margin:5px;” (particular item will get 5px margin on all the sides in single declaration, i.e., top, right, bottom, left )

If you want to restrict it for a particular side or sides then you need to use these:
margin-left: 5px; or margin-$startSide:5px; (only left side it will get 5px margin)
margin-right: 5px; or margin-$endSide:5px; (only right side it will get 5px margin)
margin-top: 5px; (only top side it will get 5px margin)
margin-bottom: 5px; (only bottom side it will get 5px margin)

For example if u give margin-top: 5px; means only top it will give 5px margin and remaining will be 0px.

Padding:
This also works like margin, but we use this feature for giving padding for particular item including its value. It will give a space within the item and useful for good look. That is if you say width 500px for your main wrapper and padding 5px, then the original usable area of main wrapper width is 490px. Remaining 10px will go to left padding-5px and right padding-5px.

We can give values for this as:
padding:5px; or
padding -left: 5px; or padding -$startSide:5px;
padding -right: 5px; or padding -$endSide:5px;
padding -top: 5px;
padding -bottom: 5px;

If you say: “padding: 5px;” (particular item will get 5px padding on all the sides in single declaration, i.e., top, right, bottom, left)

If you want to restrict it for a particular side or sides then you need to use these:
padding -left: 5px; or padding -$startSide:5px; (only left side it will get 5px padding)
padding -right: 5px; or padding -$endSide:5px; (only right side it will get 5px padding)
padding -top: 5px; (only top side it will get 5px padding)
padding -bottom: 5px; (only bottom side it will get 5px padding)

For example if u give padding -top: 5px; means only top it will give 5px padding and remaining will be 0px.

| Previous | Home | Next |

Change width of Blog template, sidebar, main

This is a big question for the people those are blogging newly. For these new people I am giving a simple and easiest procedure to make changes for template and its attributes.

To do these changes you need to understand few html concepts (don’t fear this is very simple to understand), which will appear in your template. If you understand it then it will becomes very easy for you to change your template.
(The main idea of this is to make a common person literate and understand about their blog template, to make simple adjustments and change it, but not to teach html or follow its rules, so there may be few mistakes in the name what I am calling them.)

So, first look at this picture:
Our template will look like this and contains these elements in body:

Now we see each one of these in detail, we discuss how to use their attributes.

Body:
It is the total displayed area or the full or maximum screen size and original background of our webpage.
For this generally we can use these attributes: Background, Margin, Padding, font, color.

#outer-wrapper:
This is the original size of our webpage for which we can define width and height.
Generally the size of any commuters’ screen size will be displayed in 1024*768 px. In this 1024 is width and 768 is height of your computers monitor display setting. Height can be scrollable easily with the help of mouse scroll button, but width is not good to scroll, it seems to be odd thing to many people. So you can set your web page size as not more than 1000px. (This is the maximum size of your webpage; you can also define more width but need to scroll in horizontally, which may give some bad effect on your website visitors.) The remaining 24px will goes to scroll button on right side of monitor screen which defaults from operating system.

So you have to decide how much will be your outer wrapper or page width. This should be including margins etc. i.e., your main wrapper, sidebar wrappers and any other columns size including margin, padding and border, can be equal to this outer wrappers size.

Ex: outer wrapper is 800px. So, main is 500px which includes 5px padding (net main usable size is 490px) and margin is 5px, then total width of main is 510px including margin. Now you left with 290px. If your sidebar size is 260px (includes padding 5px, with net usable area or width is 250px), margin 5px, then total width of sidebar is 270px. Now you have 20px width of free space in your outer wrapper. This you can utilize to give margin on left and right sides 10px.
Like this you have to do adjustments to your webpage.

For this we can use these attributes: Background, Width, Margin, Padding, font, and text-align


#header-wrapper
This we use to display title of website or for any other purpose. Its width should be equal or less than the outer wrappers width to look good. The width of this can be calculated by subtracting from outer wrappers width (after removing padding if any for outer wrapper).

Ex: outer wrapper is 800px with padding 10px for outer wrapper on the left and right side. Now header wrappers width can be 780px.

For this we can use these attributes: Background, Width, Margin, Padding, Float, font, text-transform and text-align

| Home | Next Page |