20 April 2009

Create your own THREE column Rounders 2 Template for blogger.

Advertisements

Rounders 2 Template is a 2 column template. But you can make it of 3 column.
It will look like -

THREE column Rounders 2 Template

THREE column Rounders 2 Template Blue

Lets do that:

Apply Rounders 2 as your blogger template. Now go to Template >> Edit HTML. Look for following code


#outer-wrapper {
width:740px;
margin:0 auto;
text-align:left;
font: $bodyFont;
}
#main-wrap1 {
width:485px;
float:left;
background:$mainBgColor url("http://www.blogblog.com/rounders2/corners_main_bot.gif") no-repeat left bottom;
margin:15px 0 0;
padding:0 0 10px;
color:$mainTextColor;
font-size:97%;
line-height:1.5em;
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 */
}
#main-wrap2 {
float:left;
width:100%;
background:url("http://www.blogblog.com/rounders2/corners_main_top.gif") no-repeat left top;
padding:10px 0 0;
}
#main {
background:url("http://www.blogblog.com/rounders2/rails_main.gif") repeat-y;
padding:0;
}
#sidebar-wrap {
width:240px;
float:right;
margin:15px 0 0;
font-size:97%;
line-height:1.5em;
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 */
}





Rounders 2 hase 3 wrappers as following

() outer-wrapper i.e.the entire blog
() main-wrapper i.e. the main Blog Posts
() sidebar-wraper i.e. the right sidebar

Now we will create another sidebar i.e. left sidebar.

So change the above code to the following. Changes are made in Green.


#outer-wrapper {
width:995px;
margin:0 auto;
text-align:left;
font: $bodyFont;
}
#main-wrap1 {
width:485px;
float:left;
background:$mainBgColor url("http://www.blogblog.com/rounders2/corners_main_bot.gif") no-repeat left bottom;
margin:15px 0 0 15px;
padding:0 0 10px;
color:$mainTextColor;
font-size:97%;
line-height:1.5em;
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 */
}
#main-wrap2 {
float:left;
width:100%;
background:url("http://www.blogblog.com/rounders2/corners_main_top.gif") no-repeat left top;
padding:10px 0 0;
}
#main {
background:url("http://www.blogblog.com/rounders2/rails_main.gif") repeat-y;
padding:0;
}
#sidebar-wrap {
width:240px;
float:right;
margin:15px 0 0;
font-size:97%;
line-height:1.5em;
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 */
}
#newsidebar-wrap {
width:240px;
float:left;
margin:15px 0 0;
font-size:97%;
line-height:1.5em;
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 */
}
#newsidebar-wrap1 {
background:$mainBgColor url("http://www.blogblog.com/rounders2/corners_side_top.gif") no-repeat left top;
margin:0 0 15px;
padding:10px 0 0;
color: $mainTextColor;
}

#newsidebar-wrap2 {
background:url("http://www.blogblog.com/rounders2/corners_side_bot.gif") no-repeat left bottom;
padding:10px 0px 8px;
}

#newsidebar h2 {
color: $postTitleColor;
border-bottom: 1px dotted $postTitleColor;
}



Now we have to make changes in the Header and the Footer.

Search for

/* Blog Header

Change following code

#header-wrapper {
background:$titleBgColor
url("http://www.blogblog.com/rounders2/corners_cap_top.gif") no-repeat left top;




To this code

#header-wrapper {
background:$titleBgColor
url("http://www.blogpulp.com/imagehost/images/44575234.gif") no-repeat left top;



And now look for below code

#header {
background:url("http://www.blogblog.com/rounders2/corners_cap_bot.gif") no-repeat left bottom;


And change to following code

#header {
background:url("http://www.blogpulp.com/imagehost/images/346852006.gif") no-repeat left bottom;



Now it's time for Footer

Search for

/* Footer

Change following code

#footer-wrap2 {
background:$titleBgColor
url("http://www.blogblog.com/rounders2/corners_cap_top.gif") no-repeat left top;



to below code

#footer-wrap2 {
background:$titleBgColor
url("http://www.blogpulp.com/imagehost/images/44575234.gif") no-repeat left top;


Also change

#footer {
background:url("http://www.blogblog.com/rounders2/corners_cap_bot.gif") no-repeat left bottom;


to

#footer {
background:url("http://www.blogpulp.com/imagehost/images/346852006.gif") no-repeat left bottom;


We have to now change layout editor as we have created new sidebar.

Search for following code

/** Page structure tweaks for layout editor wireframe */
body#layout #main-wrap1,
body#layout #sidebar-wrap,
body#layout #header-wrapper {
margin-top: 0;
}

body#layout #header, body#layout #header-wrapper,
body#layout #outer-wrapper {
margin-left:0,
margin-right: 0;
padding: 0;
}

body#layout #outer-wrapper {
width: 730px;
}

body#layout #footer-wrap1 {
padding-top: 0;
}



Replace above code with following

/** Page structure tweaks for layout editor wireframe */
body#layout #outer-wrapper,
body#layout #header-wrapper,
body#layout #footer-wrap1 {
width: 750px;
}
body#layout #main-wrap1,
body#layout .main .widget,
body#layout .main .Blog {
width: 400px;
}
body#layout #newsidebar-wrap {
width: 150px;
margin-top: 5px;
}
body#layout #sidebar-wrap {
width: 150px;
margin-left: 25px;
}


Last Step - Now scroll down and look for following code



<div id='main-wrap1'><div id='main-wrap2'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div></div>

<div id='sidebar-wrap'>



now add following code in Green to ABOVE div id='main-wrap1'.

This will look like



<div id='newsidebar-wrap'>


<div id='newsidebar-wrap1'><div id='newsidebar-wrap2'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
<b:widget id='NewProfile' locked='false' title='About Me' type='Profile'/>
</b:section>
</div></div></div>

<div id='main-wrap1'><div id='main-wrap2'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div></div>

<div id='sidebar-wrap'>





It is done. Now save your template and look for changes.
It will look like -

THREE column Rounders 2 Template
THREE column Rounders 2 Template Blue


UPDATE
If you problem with profile, now you can download ready made template here.

Related Posts

16 comments

Anonymous
April 22, 2009 at 8:19 AM

How can I align header text on left side?

April 22, 2009 at 8:23 AM

Look for

#header {

and add following code bellow it

text-align: center;

To align Footer text to left .. look for

.uncustomized-post-template .post-footer {

and add following code below it

text-align: left;

May 11, 2009 at 2:06 AM

your blog is wonderful.....hope i too become a good blooger one day....

May 11, 2009 at 3:42 AM

thanks giri..... keen interest and some hardwork will definitely make you a good blogger.. :-)

July 2, 2009 at 12:56 AM

how i add a blogger header to my 3 columns rounders template?

July 2, 2009 at 2:07 AM

there is already a header in rounders template, you are just adding an extra column by above tutorial

July 18, 2009 at 3:26 PM

I tried this and it gave me error message:
The new widget id "NewProfile" is invalid for type: Profile
This is located in the last code change you list above.
Any thoughts?

July 29, 2009 at 2:14 PM

I received the same message as Jason. What are we doing wrong?

July 30, 2009 at 8:03 AM

It sounds like you may have missed one of the steps in the process, Try again, and let me know if you get the same error.

OR

replace
widget id='NewProfile'
with
widget id='NewProfile1'

August 11, 2009 at 8:49 PM

:( I'm having the same issue!

We were unable to preview your template
Please correct the error below, and submit your template again.
The new widget id "NewProfile1" is invalid for type: Profile

And I did this:
drraman July 30, 2009 8:03 AM

It sounds like you may have missed one of the steps in the process, Try again, and let me know if you get the same error.

OR

replace
widget id='NewProfile'
with
widget id='NewProfile1'

August 14, 2009 at 11:47 PM

Your blog is awesome! I tried the 3 column edits and it worked perfectly. I will continue to use, and refer your blog to others.

August 14, 2009 at 11:53 PM

Do not do the last step.

November 20, 2009 at 3:22 AM

hi, i too have had the same problem and tried replacing widget id-NewProfile with NewProfile1 with no such luck, i have also tried taking out the last step and it just goes back to two columns again, any suggestions?

November 20, 2009 at 7:08 AM

Hi Ashliegh in Wonderland

Now Download this template ready made here

http://free-blogger-help.blogspot.com/2009/11/download-3-column-rounders-2-template.html

February 15, 2010 at 7:54 PM

hey thanks so much........

February 19, 2010 at 8:41 PM

I found the solution to the "the new widget id newprofile is invalid for type profile" Problem

Change 'NewProfile' to 'Profile1' and leave 'profile' as is.

Thanks for the info above it was very easy.

Post a Comment

Share

Twitter Delicious Facebook Digg Stumbleupon Favorites More