[ New messages · Members · Forum rules · Search · RSS ]
Page 1 of 11
Coredownloadz Forum » How to ....? » Computer tricks » create a three column template with two sidebars
create a three column template with two sidebars
MonsterDate: Saturday, 2009-07-04, 0:04 AM | Message # 1
Major general
Group: Administrators
Messages: 83
Awards: 2
Reputation: 0
Status: Offline
This is what your new blog template will look like

For creating a new templates in easy way, use Minima template from blogger. You just need to modify as I have instructed below.
Find this part
Quote

#header-wrapper {
width :660px;
margin : 0 auto
border : 1px

delate
Quote

width :660px;

Find this part
Quote

#header . description {
margin 0 5px 5 px;
padding :0 20px 15px;
max-width:700px;

delate
Quote

max-width:700px;

now find this for footer
Quote

#footer {
width : 660px:
clear : both ;
margin : 0 auto;

delate
Quote

width : 660px:

then change the width of the outer wrapper from 660 to 960
Quote

*/ Outer-Wrapper
--------------------
# Outer-Wrapper {
width : 960 px;
margin :0 auto ;
padding : 10 px;
text-align :$startSide;
font :$bodyfont ;
} <br />

now change the width in main wrapper
Quote

#main-wrapper {
width: 530px;
float: left ;
word-wrap: break-word ;
overflow : hidden ;
}

Find this part
Quote

#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word;
overflow: hidden;
}

Replace with

Quote

#column-wrapper {
width: 410px;
float: right;
word-wrap: break-word;
overflow: hidden;
}

Now copy the codes below

Quote

#sidebar-top{
clear:both ;
}
#sidebar-right{
width :220px ;
floadt ; right :
word-wrap:break-word;
overflow:hidden;
}
#sidebar-left{
width: 220px ;
float : left ;
word-wrap: break-word;
overflow: hidden ;
}

Paste it below colimn wrapper

it will look like this now

Quote

#column-wrapper {
width: 410px;
float: right;
word-wrap: break-word;
overflow: hidden;
}

#sidebar-top{
clear:both ;
}
#sidebar-right{
width :220px ;
floadt ; right :
word-wrap:break-word;
overflow:hidden;
}
#sidebar-left{
width: 220px ;
float : left ;
word-wrap: break-word;
overflow: hidden ;
}

 
FileServe BitShare emoticon(
MonsterDate: Saturday, 2009-07-04, 0:51 AM | Message # 2
Major general
Group: Administrators
Messages: 83
Awards: 2
Reputation: 0
Status: Offline
After completing above steps, you should do as illustrated in this Image.

after this step your new template will be ready

But however Its still not complete if you want new template like in the first preview image above.

For this you should flow some steps below.

 
FileServe BitShare emoticon(
MonsterDate: Saturday, 2009-07-04, 0:58 AM | Message # 3
Major general
Group: Administrators
Messages: 83
Awards: 2
Reputation: 0
Status: Offline
now we need to create the top section and the left column for the sidebar .For this
copy codes below
Quote

<b:section class='sidebar' id='sidebar-top'/>
<b:section class='sidebar' id='sidebar-left'/>

paste above codes after

Quote

<div id = 'column_wrapper'>

Now again copy code below

Quote

body#layout #outer-wrapper{width:750px;}
body#layout #main-wrapper{width:310px;}

and paste it below #footer part but before following code

Quote

]]></b:skin>
</head>

Plz don't forget to save it.

You are done.

 
FileServe BitShare emoticon(
Coredownloadz Forum » How to ....? » Computer tricks » create a three column template with two sidebars
Page 1 of 11
Search: