How to customize any template to make it yours

This is a simple trick and technique. You can apply it to any template - be it a free template taken from this site or any paid template that you are about to invest in.

Outline all the DIVisions

At the CSS file fill in this code at the last line:

div {outline:1px solid red;}

Do not delete it after use. Just remark it as you may come back to it again. If you prefer to see the divisions in color, then add in the background code. But you'll have to code the background to each div. or else you'll get all the div/s in the same color which defeat the purpose of this exercise.

#content{background:#eee;}
#sidebar{background:#ccc;}

The reason for using outline is this: it does not add up to the additional space taken by the div. If you were to code border to the division, a 1px border will add to 2px over the total space taken. A 100px box will resulted in 102px. If you are positoning the divs to the exact total width, the extra 2px will force the next division to the next line.

By making changes to just the CSS file, you control the look of your template without making any changes to the existing template.

Internal Style Sheet

Before you make changes to the CSS file, you will want to try it out on the page. This is what you need to do:

Add this line above the </head>

<style type="text/css">
</style>