How To Create 3 column template part 2

After you understand each part of the template with a different color, now we started making three column template



To create three columns, we need to change width of template
we should do:
1. Changing the template width
2. Adding new columns

Fisrt Step, See this code:




#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 410px;
float: $startSide;
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 */
}

Replace with this code:

#header-wrapper {
width:870px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

#outer-wrapper {
width: 870px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 420px;
float: $startSide;
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*/
}




Adding new columns
Next step, select "Expand Widget Templates" and find this code:




#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 */
}

Then replace with code below:


#sidebar-wrapper {
width: 220px;
float: left;
padding-right:5px;
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*/
}

#sidebarLeft-wrapper {
width: 180px;
float: right;
padding-left:5px;
word-wrap: break-word;
overflow: hidden;
)


Then find this code:

<div id='sidebar-wrapper'>


Put the code below, above <div id='sidebar-wrapper>

<div id='sidebarLeft-wrapper'>
<b:section class='sidebar' id='sidebarLeft' preferred='yes'> </ b: section'>
</ div'>


The last step, find the code below:
#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

Replace with this:

#footer {
width:840px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}






Read more ...

How Create Three Column Part 1

As I mentioned before, to make it easier to modify the template to Three column minima, we have to understand every part of the template.

So we will understand where the changes will be made
We separate the structure of minima template with a different color, so it will look like



Read more ...

How To Create 3 column template (minima)

Learn to create 3 column template (minima) in a simple way
To understand each part of minima template, I will use with a different color, so we will know each part of the template



Minima template looks like this:





Then we will change so, it looks like:



Read more ...

Payment Proof From EasyHits4U

EasyHits4U is one of the traffic exchange, we get
traffic and get paid too
. This is the third payment of EasyHits4U, they are professionals with the payment process 5-7 business days, they really pay the members.

Proof of payment see below


Read more ...