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 {And change to following code
background:url("http://www.blogblog.com/rounders2/corners_cap_bot.gif") no-repeat left bottom;
#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 {Also change
background:$titleBgColor
url("http://www.blogpulp.com/imagehost/images/44575234.gif") no-repeat left top;
#footer {to
background:url("http://www.blogblog.com/rounders2/corners_cap_bot.gif") no-repeat left bottom;
#footer {We have to now change layout editor as we have created new sidebar.
background:url("http://www.blogpulp.com/imagehost/images/346852006.gif") no-repeat left bottom;
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;
}
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
No comments:
Post a Comment