The Blogger Guide: 3 Columns

Showing posts with label 3 Columns. Show all posts

Monday, September 21, 2009

3 Columns : 565 : Two Right Sidebars

Article Series: 3 Column Step by Step Guides

This is a tutorial that gives steps to convert a Blogger default 2 column 565 template in to a three column template with two sidebars on the right hand side of the main post area.

(If you want to know the internals of what's happening here, read the article series Three Column Templates Explained.)

1) Add a new CSS id selector for the 2nd sidebar wrapper.

Go to Layout -> Edit HTML
Locate the #sidebar-wrapper section (Do a Find using your browser)
Copy that entire section and paste it below the existing sidebar section (it doesn't have to be below) and rename it to #right-sidebar-wrapper
Change the float: $endSide to float:$startSide of the existing #sidebar-wrapper section

#sidebar-wrapper {
background:$sidebarBgColor url("http://www2.blogblog.com/no565/corner_sidebar_$startSide.gif") no-repeat $startSide top;
width:254px;
float:$startSide;
padding:0;
color: $sidebarTextColor;
font-size: 83%;
word-wrap: break-word; /* fix ... in IE */
overflow: hidden; /* fix ... float */
}

#right-sidebar-wrapper {
background:$sidebarBgColor
url("http://www2.blogblog.com/no565/corner_sidebar_$startSide.gif")
no-repeat $startSide top;
width:254px;
float:$endSide;
padding:0;
color: $sidebarTextColor;
font-size: 83%;
word-wrap: break-word; /* fix for ... IE */
overflow: hidden; /* fix ... float */
}

2) Add a new div element, as a child of the content-wrapper, to hold the 2nd sidebar

Locate the <div id='sidebar-wrapper'> element.
Copy the code shown in red, below that section (this must be below)

3) Expand the width of the other wrappers to accommodate the new sidebar

Locate the CSS section called #outer-wrapper
Change its width property to 1006 pixels

#outer-wrapper {
position:relative;
top:4px;
$startSide:4px;
background: #889977;
width:1006px;
...
}

4) Do necessary adjustments to margins, padding etc

Locate the #main-wrapper section
Insert a right margin of 6 pixels. (add the line shown in red)

#main-wrapper {
width: 460px;
margin-right:6px;
float: $startSide;
...
}

5) Copy the following CSS styles shown in red, below the #sidebar selector

#sidebar {
margin:0;
padding:2px 20px 10px;
}

#right-sidebar {
margin:0;
padding:2px 20px 10px;
}

#right-sidebar a {
color: $sidebarLinkColor;
}

#right-sidebar a:visited {
color: $sidebarVisitedLinkColor;
}

#right-sidebar a:hover {
color: $sidebarVisitedLinkColor;
}

6) Modify the CSS rules for the wire frame layouts editor.

Locate the end of the skin denoted by "]]>"
Add the following code shown in red, above that line.

/** Page structure tweaks for layout editor wireframe */

body#layout #outer-wrapper {
padding-top: 0;
width:720px;
}
body#layout #header-wrapper,
body#layout #content-wrapper,
body#layout #footer-wrapper {
padding: 0;
width:720px;
}

body#layout #main-wrapper {
width:400px;
}

body#layout #sidebar-wrapper,
body#layout #right-sidebar-wrapper {
width:150px;
}

]]></b:skin>

Save the template. Switch to Page Elements view and enjoy your 3 column template! (The new sidebar may not be visible until some widgets are added to it)

Three Column Templates Explained

Sunday, May 24, 2009

3 Columns : 565 : Left and Right Sidebars

Article Series: 3 Column Step by Step Guides

This is a tutorial that gives step by step instructions to convert a default 2 column 565 Blogger template in to a three column template with two sidebars on left and right hand sides of the main post area.

(If you really want to understand what's happening here, read the article series Three Column Templates Explained.)

1) Add a new CSS id selector for the 2nd sidebar wrapper.

Go to Layout -> Edit HTML
Locate the #sidebar-wrapper section (Do a Find using your browser)
Copy that full section and paste below the existing sidebar section (it doesn't have to be below) and rename it to #left-sidebar-wrapper
Change the float: $endSide to float:$startSide of this newly copied section
Change the occurrences of $startSide in the background property to $endSide. (See the code snippet below)

#sidebar-wrapper {
background:$sidebarBgColor url("http://www2.blogblog.com/no565/corner_sidebar_$startSide.gif") no-repeat $startSide top;
width:254px;
float:$endSide;
padding:0;
color: $sidebarTextColor;
font-size: 83%;
word-wrap: break-word; /* fix ... in IE */
overflow: hidden; /* fix ... float */
}

#left-sidebar-wrapper {
background:$sidebarBgColor
url("http://www2.blogblog.com/no565/corner_sidebar_$endSide.gif")
no-repeat $endSide top;
width:254px;
float:$startSide;
padding:0;
color: $sidebarTextColor;
font-size: 83%;
word-wrap: break-word; /* fix for ... IE */
overflow: hidden; /* fix ... float */
}

2) Introduce a new div element, as a child of the content-wrapper, to be the placeholder for the 2nd sidebar

Locate the <div id='main-wrapper'> element.
Copy the code shown in red, above that section (this has to be above)

3) Expand the width of the other wrappers to accommodate the new sidebar

Locate the CSS section called #outer-wrapper
Change its width property to 1006 pixels

#outer-wrapper {
position:relative;
top:4px;
$startSide:4px;
background: #889977;
width:1006px;
...
}

4) Do necessary adjustments to margins, padding etc

Locate the #main-wrapper section
Insert a left margin of 12 pixels. (add the line shown in red)

#main-wrapper {
width: 460px;
margin-left:8px;
float: $startSide;
...
}

5) Modify the CSS rules for the wire frame layouts editor.

Locate the end of the skin denoted by "]]>"
Add the following code shown in red, above that line.

/** Page structure tweaks for layout editor wireframe */

body#layout #outer-wrapper {
padding-top: 0;
width:720px;
}
body#layout #header-wrapper,
body#layout #content-wrapper,
body#layout #footer-wrapper {
padding: 0;
width:720px;
}

body#layout #main-wrapper {
width:400px;
}

body#layout #sidebar-wrapper,
body#layout #left-sidebar-wrapper {
width:150px;
}

]]></b:skin>

Save the template. Switch to Page Elements view and enjoy your 3 column template! (The new sidebar may not be visible until some widgets are added to it)

Three Column Templates Explained

Sunday, April 26, 2009

Header Image in Widened Blogs

This is a question I get from time to time from the people who have widened their blog by following one of the three column conversion or wider post column guides. This post is an answer to that question.

The header image is uploaded via the Header element in the Layouts -> Page Elements section.

The available size for this image depends on the size of you header. For example, in the Minima template, it is the width of the #header-wrapper CSS selector. If the image you upload is smaller than this maximum available size, Blogger will upload it as it is. But if the image you upload has a higher width than the available size, Blogger's action will depend on whether you've selected the Shrink to fit option in the Configure Header dialog box. If that option is selected, the width of the image you upload will be resized to the maximum possible size. (The height of the image will also be adjusted to the same scale to avoid distortion. But the reference dimension is the width). If Shrink to fit is not selected, the image will be uploaded as it is despite it being bigger.

When you customize your blog either by adding a third column or by expanding the size of the post area, the header size will also be widened to match the new blog width. Therefore, you will have to re-upload the header image. If the current header image is smaller than the new blog width after the expansion, then you have to widen the header image as well. For that you need to use some image processing software such as Photoshop. If, however, the image you uploaded had an actual width that is bigger than the new expanded header size, a simple re-uploading will do.

Friday, April 10, 2009

3 Column Templates : Rounders 3 : Two Right Sidebars

Article Series: 3 Column Templates Step by Step Guides

The Rounder 3 template of Blogger comes by default with only two columns. However, most bloggers want to have three column templates as they give more options in arranging the many gadgets on a blog. If you are one of them, this tutorial will give you the steps on how to modify a default 2 column Rounders 3 template in to three columns with the two sidebars on to the right hand side of the main column.

(For the more interested readers, the article series Three Column Templates Explained will explain the under the hood details of what's happening here.)

This guide is specific for Rounder 3. For other Rounders templates, check the article series home. Also note that this guide will only work for a new sidebar of 240 pixels wide. This is due to the required background images provided in this tutorial are being set to that size. If you need custom size templates, please contact me.

1) Add a new CSS id selector for the new second sidebar.

Switch to Layout -> Edit HTML
Find the #sidebar-wrap selector
Copy that full section and paste below the existing sidebar section and rename it to #right-sidebar-wrap
Change the float property of the existing #sidebar-wrap selector to $startSide (See the code snippet below)

#sidebar-wrap {
width:240px;
float:$startSide;
margin:15px 0 0;
font-size:97%;
line-height:1.5em;
word-wrap: break-word; /* fix for long ... IE */
overflow: hidden; /* fix for ... float */
}

#right-sidebar-wrap {
width:240px;
float:$endSide;
margin:15px 0 0;
font-size:97%;
line-height:1.5em;
word-wrap: break-word; /* fix for long ... IE */
overflow: hidden; /* fix for long non-text ... float */
}

2) Add a new div element, which will be the placeholder for the second sidebar

Locate the <div id='sidebar-wrap'> element
Copy the code shown in red, below that section

3) Adjust the parent wrappers to accommodate the newly added sidebar

Find the CSS section called #outer-wrapper
Modify its width property to 980 pixels

#outer-wrapper {
width: 980px;
...
}

4) Change the required margins, padding etc

Locate the #sidebar-wrap section
Change the left margin to 7 pixels

#sidebar-wrap {
width:240px;
float:$startSide;
margin:15px 7px 0 ;
...
}

5) Add the required CSS selectors for the second sidebar.

Locate the #sidebar h2 selector
Copy the code shown in red below, after that selector.

#sidebar h2 {
color: #aabbcc;
border-bottom: 1px dotted #aabbcc;
}

#right-sidebartop h2 {
line-height:1.5em;
color:#ffffff;
border-bottom: 1px dotted #ffffff;
font: normal bold 100% 'Trebuchet MS',Verdana,Arial,Sans-serif;
margin-bottom: 0.5em;
}

#right-sidebartop a {
color: #ffffff;
}

#right-sidebartop a:hover {
color: #ffffff;
}

#right-sidebartop a:visited {
color: #ffffff;
}

#right-sidebar a {
color: #99ddbb;
}

#right-sidebar a:hover,
#right-sidebar a:visited {
color: #ffffff;
}

#right-sidebar h2 {
color: #aabbcc;
border-bottom: 1px dotted #aabbcc;
}

/* Footer
----------------------------------------------- */
#footer-wrap1 {
clear:both;
margin:0 0 10px;
padding:15px 0 0;
}

6) Replace the existing background images with the expanded ones as shown below.
All the Rounders templates use images for the rounded header and footer. We need to expand these images to accommodate the new sidebar.

Add a template variable to define the image host location as explained here. (This step will open up in a separate window. Return to the next bullet point after that)
Locate the following CSS selectors.
Replace the URLs of the images with the ones shown in red below.

#header-wrapper {
background: url("$imageHost/rounders3_corners_cap_top_w.gif") no-repeat $startSide top;
...
}

#header {
background:url("$imageHost/rounders3_corners_cap_bot_w.gif") no-repeat $startSide bottom;
...
}

#footer-wrap2 {
background:$titleBgColor url("$imageHost/rounders3_corners_cap_top_w.gif") no-repeat $startSide top;
color:$titleTextColor;
}

#footer {
background:url("$imageHost/rounders3_corners_cap_bot_w.gif") no-repeat $startSide bottom;
padding:8px 15px;
}

7) Modify the CSS rules for the wire frame layouts editor.

Locate the section that starts with "/** Page structure tweaks for layout editor wireframe */"
Replace that entire section with the following code.

/** Page structure tweaks for layout editor wireframe */

body#layout #header-wrapper,
body#layout #outer-wrapper,
body#layout #footer-wrap1 {
width:830px;
}

body#layout #main-wrap1 {
width: 485px;
margin-right:10px;
}

body#layout #sidebar-wrap,
body#layout #right-sidebar-wrap {
width:150px;
}

]]></b:skin>

Save the template. Switch to Page Elements view and enjoy your 3 column template! (The new sidebar might not be visible until you add some gadgets to it)

Note: You are free to use the images provided by me. But if you change your template according to this tutorial and use those images, please add the following code shown in red, right to the end of your template, in the place shown. It will simply link to this blog.

</div>

<a href="http://www.bloggerguide.lk/2008/02/3-columns-step-by-step-guides.html">Three Column Modification</a> courtesy of <a href="http://www.bloggerguide.lk">The Blogger Guide</a>

</body>
</html>

3 Column Templates : Rounders 3 : Left and Right Sidebars

Article Series: 3 Column Templates Step by Step Guides

The Rounder 3 template that comes by default with Blogger has only two columns. However, in the blogosphere, there is tremendous demand for three column templates. If you are one of such bloggers, this tutorial will give you the steps to modify a default 2 column Rounders 3 template in to three columns with left and right sidebars.

(For the more curious readers, the article series Three Column Templates Explained covers the behind the scene details.)

This guide is specific for Rounder 3. For other Rounders templates, check the article series home. Also note that this guide will only work for a new sidebar of 240 pixels wide. This is due to the required background images provided in this tutorial are being set to that size. If you need specific conversions, please contact me.

1) Define a new CSS id selector for the second sidebar.

Switch to Layout -> Edit HTML
Find the #sidebar-wrap selector
Copy that full section and paste below the existing sidebar section (it doesn't have to below) and rename it to #left-sidebar-wrap
Change the float to $startSide of the #left-sidebar-wrap selector (See the code snippet below)

#sidebar-wrap {
width:240px;
float:$endSide;
margin:15px 0 0;
font-size:97%;
line-height:1.5em;
word-wrap: break-word; /* fix for long ... IE */
overflow: hidden; /* fix for ... float */
}

#left-sidebar-wrap {
width:240px;
float:$startSide;
margin:15px 0 0;
font-size:97%;
line-height:1.5em;
word-wrap: break-word; /* fix for long ... IE */
overflow: hidden; /* fix for long non-text ... float */
}

2) Add a new div element, which will be the placeholder for the second sidebar

Locate the <div id='main-wrap1'> element.
Copy the code shown in red, above that section (this has to be above)

3) Expand the width of the parent wrappers to accommodate the newly added sidebar

Find the CSS section called #outer-wrapper
Modify its width property to 980 pixels

#outer-wrapper {
width: 980px;
...
}

4) Adjustment the required margins, padding etc

Locate the #left-sidebar-wrap section
Insert a right margin of 7 pixels. Don't remove the existing 15px. This padding is in addition to that.

#left-sidebar-wrap {
width:240px;
float:$startSide;
margin:15px 7px 0 0;
...
}

5) Add the required CSS selectors for the new sidebar.

Locate the #sidebar h2 selector
Copy the code shown below, after that selector.

#sidebar h2 {
color: #aabbcc;
border-bottom: 1px dotted #aabbcc;
}

#left-sidebartop h2 {
line-height:1.5em;
color:#ffffff;
border-bottom: 1px dotted #ffffff;
font: normal bold 100% 'Trebuchet MS',Verdana,Arial,Sans-serif;
margin-bottom: 0.5em;
}

#left-sidebartop a {
color: #ffffff;
}

#left-sidebartop a:hover {
color: #ffffff;
}

#left-sidebartop a:visited {
color: #ffffff;
}

#left-sidebar a {
color: #99ddbb;
}

#left-sidebar a:hover,
#left-sidebar a:visited {
color: #ffffff;
}

#left-sidebar h2 {
color: #aabbcc;
border-bottom: 1px dotted #aabbcc;
}

/* Footer
----------------------------------------------- */
#footer-wrap1 {
clear:both;
margin:0 0 10px;
padding:15px 0 0;
}

6) Replace the existing background images with the expanded one as shown below.
All the Rounders templates use images for the rounded header and footer. We need to expand these images to accommodate the new sidebar.

Add a template variable to define the image host location as explained here. (This step will open up in a separate window. Return to the next bullet point after that)
Locate the following CSS selectors.
Replace the URLs of the images with the ones shown in red below.

7) Modify the CSS rules for the wire frame layouts editor.

Locate the section that starts with "/** Page structure tweaks for layout editor wireframe */"
Replace that entire section with the following code.

3 Column Templates : Rounders 4 : Left and Right Sidebars

Article Series: 3 Column Templates Step by Step Guides

This tutorial will provide the steps to modify a Blogger default 2 column Rounders 4 template in to a three column template. This modification will add a new sidebar to the left side of the main post column.

(If you really want to know the under the hood details of what's happening here, read the article series Three Column Templates Explained.)

This guide is specific for Rounder 4. For other Rounders templates, see the article series home. Also note that this guide will only work for a new sidebar of 240 pixels wide. That's because the required background images provided in this tutorial are set to that size. If you need custom sizes, please contact me.

1) First we need to add a new CSS id selector for the new sidebar wrapper.

Go to Layout -> Edit HTML
Locate the #sidebar-wrap selector (Do a Find using your browser)
Copy that full section and paste below the existing sidebar section (it doesn't have to below) and rename it to #left-sidebar-wrap
Change the float: $endSide to float:$startSide of the #left-sidebar-wrap selector (See the code snippet below)

2) Now we introduce a new div element, which will be the placeholder for the second sidebar

Locate the <div id='main-wrap1'> element.
Copy the code shown in red, above that section (this has to be above)

3) Next step is to increase the width of the parent wrappers so that the new sidebar fits in them

Locate the CSS section called #outer-wrapper
Change its width property to 980 pixels

#outer-wrapper {
width: 980px;
...
}

4) We also need to do some adjustments to margins, padding etc

Locate the #left-sidebar-wrap section
Insert a right margin of 7 pixels. Don't remove the existing 15px. This padding is in addition to that.

#left-sidebar-wrap {
width:240px;
float:$startSide;
margin:15px 7px 0 0;
...
}

5) Add the required CSS selectors for the new sidebar.

Locate the #sidebar h2 selector
Copy the code shown below, after that selector.

6) Then we have to apply the expanded background images as necessary.

All the Rounders templates use images for the rounded header and footer. We need to expand these images to accommodate the new sidebar.

Add a template variable to define the image host location as explained here. (This step will open up in a separate window. Return to the next bullet point after that)
Locate the following CSS selectors.
Replace the URLs of the images with the ones shown in red below.

#header-wrapper {
background: url("$imageHost/rounders4_corners_cap_top_w.gif") no-repeat $startSide top;
...
}

#header {
background:url("$imageHost/rounders4_bg_hdr_bot_w.jpg") no-repeat $startSide bottom;
...
}

#footer-wrap2 {
background:$titleBgColor url("$imageHost/rounders4_corners_cap_top_w.gif") no-repeat $startSide top;
color:$titleTextColor;
}

#footer {
background:url("$imageHost/rounders4_corners_cap_bot_w.gif") no-repeat $startSide bottom;
padding:8px 15px;
}

7) Finally, modify the CSS rules for the wire frame layouts editor.

Locate the section that starts with "/** Page structure tweaks for layout editor wireframe */"
Replace that entire section with the following code.

Blogger Three Column Templates Explained

Wednesday, February 4, 2009

3 Columns : Harbor : Left and Right Sidebars

Article Series: 3 Column Step by Step Guides

Here are the steps to convert a default 2 column Harbor template in to a three column template with two sidebars on left and right hand sides of the main post area.

(If you really want to understand what's happening here, read the article series Three Column Templates Explained.)

1) Add a new CSS id selector for the 2nd sidebar wrapper.

Go to Layout -> Edit HTML
Locate the #sidebar-wrapper section (Do a Find using your browser)
Copy that full section and paste below the existing sidebar section (it doesn't have to be below) and rename it to #right-sidebar-wrapper
Change the float:$startSide to float:$endSide of this newly copied section (See the code snippet below)
Set the width of both sidebar selectors to 24%

#sidebar-wrapper {
width:24%;
float:$startSide;
word-wrap: break-word; /* fix ... IE */
overflow: hidden; /* fix ... float */
}

#right-sidebar-wrapper {
width:24%;
float:$endSide;
word-wrap: break-word; /* fix ... in IE */
overflow: hidden; /* fix ... float */
}

2) Introduce a new div element to be the placeholder for the 2nd sidebar

Locate the <div id='main-wrapper'> element.
Copy the code shown in red, above that section (this has to be above)

3) Adjust the width of the other wrappers to accommodate the new sidebar

Locate the CSS section called #outer-wrapper and change its max-width property to 1175 pixels
Locate the #main-wrapper section and change its width property to 48%

#outer-wrapper {
max-width: 1175px;
...
}

#main-wrapper {
width: 48%;
...
}

4) Do necessary adjustments to margins, padding etc

Locate the #main-wrapper section
Insert a right margin of 20 pixels.

#main-wrapper {
width: 48%;
margin-right:20px;
float: $endSide;
...
}

5) Adjust the max width of the header description to fit the new expanded header

Locate the .Header .description section
Change the max-width property to 1000 pixels.

.Header .description {
...
max-width:1000px;
...
}

6) Modify the CSS rules for the wire frame layouts editor.

Locate the line reading as "/** Page structure tweaks for layout editor wireframe */"
Replace that section with the code shown in red below.

/** Page structure tweaks for layout editor wireframe */

body#layout #outer-wrapper,
body#layout #sidebar,
body#layout #wrap4,
body#layout #header {
margin-top: 0;
margin-bottom: 0;
padding: 0;
}

body#layout #sidebar-wrapper,
body#layout #right-sidebar-wrapper {
width: 180px;
margin-$startSide: 0;
}

body#layout #wrap4, body#layout #outer-wrapper {
width: 800px;
}

/* Header
----------------------------------------------- */

Save the template. Switch to Page Elements view and move some of the widgets to the new sidebar on the right. (Without adding widgets, the new sidebar won't be visible on the blog).

Three Column Templates Explained

Saturday, November 1, 2008

3 Columns : Minima Lefty : Left and Right Sidebars

Article Series: 3 Column Step by Step Guides

Here are the steps to convert a default 2 column Minima Lefty template in to a three column template with two sidebars on left and right hand sides of the main post area.

The Minima Lefty gets its name because its default sidebar is on the left hand side, unlike the basic Minima template which has it on the right. In this tutorial, we will add a second sidebar to the right hand side of a default Minima Lefty template.

(If you really want to understand what's happening here, read the article series Three Column Templates Explained.)

1) Add a new CSS id selector for the 2nd sidebar wrapper.

Go to Layout -> Edit HTML
Locate the #sidebar-wrapper section (Do a Find using your browser)
Copy that full section and paste below the existing sidebar section (it doesn't have to be below) and rename it to #right-sidebar-wrapper
Change the float:$startSide to float:$endSide of this newly copied section (See the code snippet below)

#sidebar-wrapper {
width: 220px;
float: $startSide;
word-wrap: break-word; /* fix for ... in IE */
overflow: hidden; /* fix for long ... float */
}

#right-sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for ... IE */
overflow: hidden; /* fix for long ... float */
}

2) Introduce a new div element, as a child of the content-wrapper, to be the placeholder for the 2nd sidebar

Locate the <div id='main-wrapper'> element.
Copy the code shown in red, above that section (this has to be above)

3) Expand the width of the other wrappers to accommodate the new sidebar

Locate the CSS sections called #outer-wrapper, #header-wrapper and #footer
Change their width property to 880 pixels

#outer-wrapper {
width: 880px;
margin: 0 auto;
...
}

#header-wrapper {
width: 880px;
margin: 0 auto 10px;
...
}

#footer {
width: 880px;
clear: both;
margin: 0 auto;
...
}

4) Do necessary adjustments to margins, padding etc

Locate the #main-wrapper section
Insert a right margin of 12 pixels.

#main-wrapper {
width: 410px;
margin-right:12px;
float: $endSide;
...
}

5) Adjust the max width of the header description to center it in the new expanded header

Locate the #header .description section
Change the max-width property to 880 pixels.

#header .description {
...
padding:0 20px 15px;
max-width:880px;
...
}

Note: Step 6 is only needed if your Layout Editor does not show the newly added sidebar. There was an issue where the Firefox browser didn't show a 3 column template fully in the edit mode. But Blogger reports that the issue has been fixed now.

6) Modify the CSS rules for the wire frame layouts editor.

Locate the end of the skin denoted by "]]>"
Add the following code shown in red, above that line.

/** Page structure tweaks for layout editor wireframe */

body#layout #outer-wrapper {
padding-top: 0;
width:720px;
}
body#layout #header-wrapper,
body#layout #content-wrapper,
body#layout #footer {
padding: 0;
width:720px;
}

body#layout #main-wrapper {
width:400px;
}

body#layout #sidebar-wrapper,
body#layout #right-sidebar-wrapper {
width:150px;
}

]]></b:skin>

Save the template. Switch to Page Elements view and enjoy your 3 column template!

Three Column Templates Explained

Sunday, October 5, 2008

3 Columns : Ms Moto : Left and Right Sidebars

Article Series: 3 Column Step by Step Guides

Here are the steps to convert a default two column Ms Moto template in to a three column template with sidebars on the left and right hand side of the main post area.

(If you really want to understand what's happening here, read the article series Three Column Templates Explained.)

1) Add a new CSS id selector for the 2nd sidebar wrapper.

Go to Layout -> Edit HTML
Locate the #sidebar section (Do a Find using your browser)
Copy that full section and paste above the existing sidebar section (it doesn't have to above) and rename it to #left-sidebar
Change the float: $endSide to float:$startSide (See the code snippet below)

#left-sidebar {
width: 226px;
float: $startSide;
color: $sidebarTextColor;
word-wrap: break-word; /* fix for ... IE */
overflow: hidden; /* fix for long ... */
}

#sidebar {
width: 226px;
float: $endSide;
color: $sidebarTextColor;
word-wrap: break-word; /* fix for ... IE */
overflow: hidden; /* fix for long ... */
}

2) Introduce a new div element, as a child of the content-wrapper, to be the placeholder for the 2nd sidebar

Locate the <div id='main-wrapper'> element.
Copy the code shown in red, above that section (this has to be above)

3) Expand the width of the parent wrappers to accommodate the new sidebar

Locate the CSS section called #outer-wrapper
Change its width property to 918 pixels

#outer-wrapper {
margin: 0 auto;
border: 0;
width: 918px;
...
}

4) Do necessary adjustments to margins, padding etc

Locate the #main section
Insert a left margin of 14 pixels.

#main {
width: 400px;
margin-$startSide:14px;
float: $startSide;
...
}

5) Modify and expand the background images as necessary.

Add a template variable to define the image host location as explained here. (This step will open up in a separate window. Return to the next bullet point after that)
Locate the following CSS sections.
Replace the URL of the background images to thes one shown in red below.

body {
...
background: #d7b url($imageHost/msmoto_outerwrap_w.gif) top center repeat-y;
...
}

#outer-wrapper {
...
background: #ffffff url($imageHost/moto_innerwrap_w.gif) top right repeat-y;
...
}

6) Modify the CSS rules for the wire frame layouts editor.

Locate the section that starts with "/** Page structure tweaks for layout editor wireframe */"
Replace that entire section with the following code.

/** Page structure tweaks for layout editor wireframe */

body#layout #outer-wrapper {
padding-top: 0;
width:720px;
}
body#layout #header,
body#layout #content-wrapper,
body#layout #footer {
padding: 0;
width:720px;
}

body#layout #main {
width:400px;
}

body#layout #sidebar,
body#layout #left-sidebar {
width:150px;
}

]]></b:skin>

3 Columns : Dark Dots : Left and Right Sidebars

Article Series: 3 Column Step by Step Guides

Here are the steps to convert a default 2 column Dark Dots template in to a three column template with two sidebars on left and right hand sides of the main post area.

(If you really want to understand what's happening here, read the article series Three Column Templates Explained.)

1) Add new CSS id selectors for the 2nd sidebar wrapper.

Go to Layout -> Edit HTML
Locate the #sidebar-wrapper and the #sidebar sections (Do a Find using your browser)
Copy both section fully and paste below the existing sidebar sections (it doesn't have to below) and rename them to #sidebar-wrapper-two and #sidebar-two
Change the float: $startSide to float:$endSide of the #sidebar-wrapper-two section (See the code snippet below)

#sidebar-wrapper {
width:200px;
float:$startSide;
font-size:85%;
padding-bottom:20px;
word-wrap: break-word; /* fix for ... */
overflow: hidden; /* fix for ... float */
}

#sidebar {
background:url("http://www.blogblog.com/dots_dark/bg_minidots2.gif") 150px -50px;
padding:40px 10px 15px;
width:200px;
width/* */:/**/180px;
width: /**/180px;
}

#sidebar-wrapper-two {
width:200px;
float:$endSide;
font-size:85%;
padding-bottom:20px;
word-wrap: break-word; /* fix for ... IE */
overflow: hidden; /* fix for ... float */
}

#sidebar-two {
background:url("http://www.blogblog.com/dots_dark/bg_minidots2.gif") 150px -50px;
padding:40px 10px 15px;
width:200px;
width/* */:/**/180px;
width: /**/180px;
}

2) Introduce a new div element, as a child of the content-wrapper, to be the placeholder for the 2nd sidebar

Locate the <div id='main-wrapper'> element.
Copy the code shown in red, above that section (this has to be above)

3) Expand the width of the other wrappers to accommodate the new sidebar

Locate the CSS section called #outer-wrapper
Change its width property to 900 pixels

#outer-wrapper {
background:url("...") no-repeat 250px 50px;
width:900px;
...
}

4) Do necessary adjustments to margins, padding etc

Locate the #main-wrapper section
Insert a right margin of 22 pixels.

#main-wrapper {
width: 450px;
margin-right:22px;
float: $endSide;
...
}

5) Modify the CSS rules for the wire frame layouts editor.

Locate the section marked as /* Page structure tweaks for layout editor wireframe */
Replace that entire section with the code marked in red below.

/** Page structure tweaks for layout editor wireframe */

body#layout #outer-wrapper {
padding: 0;
width: 900px;
}

body#layout #main-wrapper {
padding: 0;
width: 400px;
}

body#layout #sidebar-wrapper,
body#layout #sidebar-wrapper-two {
padding: 0;
width: 200px;
}

]]></b:skin>

Save the template. Switch to Page Elements view and enjoy your 3 column template!

3 Column Templates : Scribe : Left and Right Sidebars

Article Series: 3 Column Templates Step by Step Guides

Here are the steps to convert a Blogger default 2 column Scribe template in to a 3 column template with sidebars on left and right hand sides of the main post area.

(If you really want to understand what's happening here, read the article series Three Column Templates Explained.)

1) Add a new CSS id selector for the 2nd sidebar wrapper.

Go to Layout -> Edit HTML
Locate the #sidebar selector (Do a Find using your browser)
Copy that full section and paste below the existing sidebar section (it doesn't have to below) and rename it to #right-sidebar
Change the float: $startSide to float:$endSide of the #right-sidebar selector
Change its width property to 200 pixels (See the code snippet below)

#sidebar {
width:150px;
float:$startSide;
padding:8px 0;
margin:0;
word-wrap: break-word; /* fix for ... in IE */
overflow: hidden; /* fix for ... */
}

#right-sidebar {
width:200px;
float:$endSide;
padding:8px 0;
margin:0;
word-wrap: break-word; /* fix for ... in IE */
overflow: hidden; /* fix for ... */
}

2) Introduce a new div element, as a child of #wrap3, to be the placeholder for the 2nd sidebar

Locate the <div id='footer-wrapper'> element.
Copy the code shown in red, above that section (this has to be above)

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

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

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

3) Expand the width of the parent wrappers to accommodate the new sidebar

Locate the following CSS sections
Change their width property to 900 pixels

#outer-wrapper {
...
width:900px;
...
}

#main-top {
width:900px;
...
}

#main-bot {
width:900px;
...
}

#wrap2 {
width:900px;
...
}

4) Do necessary adjustments to margins, padding, floating etc

Locate the #main section
Insert a left margin of 7 pixels.
Change its float property to $startSide

#main {
width:430px;
float:$startSide;
padding:8px 0;
margin:0;
margin-left:7px;
...
}

5) Modify and expand the background images as necessary.

Add a template variable to define the image host location as explained here. (This step will open up in a separate window. Return to the next bullet point after that)
Locate the following CSS selectors.
Replace the URLs of the images to the ones shown in red below.

#main-top {
width:900px;
height:49px;
background:#FFF3DB url("$imageHost/scribe_bg_paper_top_w.jpg") no-repeat top left;
...
}

#main-bot {
width:900px;
height:81px;
background:#FFF3DB url("$imageHost/scribe_bg_paper_bot_w.jpg") no-repeat top left;
...
}

#wrap2 {
width:900px;
background:#FFF3DB url("$imageHost/scribe_bg_paper_mid_w.jpg") repeat-y;
...
}

#header {
background:url("$imageHost/scribe_divider_w.gif") no-repeat bottom $startSide;
}

#footer {
clear:both;
background:url("$imageHost/scribe_divider_w.gif") no-repeat top $startSide;
...
}

Blogger Three Column Templates Explained

Tuesday, April 8, 2008

3 Column Templates : Rounders : Left and Right Sidebars

Article Series: 3 Column Templates Step by Step Guides

Here are the steps to convert a Blogger default 2 column Rounders template in to a 3 column template with sidebars on left and right hand sides of the main post area.

(If you really want to understand what's happening here, read the article series Three Column Templates Explained.)

(Note: Ensure that you backup your template before you start making any changes, to be able to revert back in case anything goes wrong.)

1) Add a new CSS id selector for the 2nd sidebar wrapper.

Go to Layout -> Edit HTML
Locate the #sidebar-wrap selector (Do a Find using your browser)
Copy that full section and paste below the existing sidebar section (it doesn't have to below) and rename it to #left-sidebar-wrap
Change the float: $endSide to float:$startSide of the #left-sidebar-wrap selector (See the code snippet below)

#sidebar-wrap {
width:240px;
float:$endSide;
margin:15px 0 0;
font-size:97%;
line-height:1.5em;
word-wrap: break-word; /* fix for long ... IE */
overflow: hidden; /* fix for long non-text ... float */
}

#left-sidebar-wrap {
width:240px;
float:$startSide;
margin:15px 0 0;
font-size:97%;
line-height:1.5em;
word-wrap: break-word; /* fix for long ... IE */
overflow: hidden; /* fix for long non-text ... float */
}

2) Introduce a new div element, as a child of the outer-wrapper, to be the placeholder for the 2nd sidebar

Locate the <div id='main-wrap1'> element.
Copy the code shown in red, above that section (this has to be above)

3) Expand the width of the parent wrappers to accommodate the new sidebar

Locate the CSS section called #outer-wrapper
Change its width property to 980 pixels

#outer-wrapper {
width: 980px;
...
}

4) Do necessary adjustments to margins, padding etc

Locate the #left-sidebar-wrap section
Insert a right margin of 7 pixels.

#left-sidebar-wrap {
width:240px;
float:$startSide;
margin:15px 7px 0 0;
...
}

5) Modify and expand the background images as necessary.

Add a template variable to define the image host location as explained here. (This step will open up in a separate window. Return to the next bullet point after that)
Locate the following CSS selectors.
Replace the URLs of the images to the ones shown in red below.

#header-wrapper {
background:url("$imageHost/rounders_corners_cap_top_w.gif") no-repeat $startSide top;
...
}

#header {
background:url("$imageHost/rounders_corners_cap_bot_w.gif") no-repeat $startSide bottom;
...
}

#footer-wrap2 {
background:$titleBgColor url("$imageHost/rounders_corners_cap_top_w.gif") no-repeat $startSide top;
color:$titleTextColor;
}

#footer {
background:url("$imageHost/rounders_corners_cap_bot_w.gif") no-repeat $startSide bottom;
padding:8px 15px;
}

Note: Step 6 is only needed if your Layout Editor does not show the newly added sidebar. There was an issue where Firefox browser didn't show a 3 column template fully in the edit mode. But Blogger reports that the issue has been fixed now.

6) Modify the CSS rules for the wire frame layouts editor.

Locate the section that starts with "/** Page structure tweaks for layout editor wireframe */"
Replace that entire section with the following code.

3 Column Templates : Rounders : Two Right Sidebars

Article Series: 3 Column Templates Step by Step Guides

Here are the steps to convert a Blogger default 2 column Rounders template in to a 3 column template with two sidebars on the right hand side of the main post area.

(If you really want to understand what's happening here, read the article series Three Column Templates Explained.)

1) Add a new CSS id selector for the 2nd sidebar wrapper.

Go to Layout -> Edit HTML
Locate the #sidebar-wrap selector (Do a Find using your browser)
Copy that full section and paste below the existing sidebar section (it doesn't have to below) and rename it to #sidebar-wrap-two
Change the float: $endSide to float:$startSide of the #sidebar-wrap selector (See the code snippet below)

#sidebar-wrap {
width:240px;
float:$startSide;
margin:15px 0 0;
font-size:97%;
line-height:1.5em;
word-wrap: break-word; /* fix for long ... IE */
overflow: hidden; /* fix for long non-text ... float */
}

#sidebar-wrap-two {
width:240px;
float:$endSide;
margin:15px 0 0;
font-size:97%;
line-height:1.5em;
word-wrap: break-word; /* fix for long ... IE */
overflow: hidden; /* fix for long non-text ... float */
}

2) Introduce a new div element, as a child of the outer-wrapper, to be the placeholder for the 2nd sidebar

Locate the <div id='sidebar-wrap'> element.
Copy the code shown in red, below that section (this has to be below)

3) Expand the width of the parent wrappers to accommodate the new sidebar

Locate the CSS section called #outer-wrapper
Change its width property to 980 pixels

#outer-wrapper {
width: 980px;
...
}

4) Do necessary adjustments to margins, padding etc

Locate the #sidebar-wrap section
Insert a left margin of 7 pixels.

#sidebar-wrap {
width:240px;
float:$startSide;
margin:15px 7px 0;
...
}

5) Modify and expand the background images as necessary.

Add a template variable to define the image host location as explained here. (This step will open up in a separate window. Return to the next bullet point after that)
Locate the following CSS selectors.
Replace the URLs of the images to the ones shown in red below.

Locate the section that starts with "/** Page structure tweaks for layout editor wireframe */"
Replace that entire section with the following code.

The Blogger Guide

Monday, September 21, 2009

3 Columns : 565 : Two Right Sidebars

Sunday, May 24, 2009

3 Columns : 565 : Left and Right Sidebars

Sunday, April 26, 2009

Header Image in Widened Blogs

Friday, April 10, 2009

3 Column Templates : Rounders 3 : Two Right Sidebars

Thursday, February 26, 2009

3 Column Templates : Rounders 3 : Left and Right Sidebars

Friday, February 20, 2009

3 Column Templates : Rounders 4 : Left and Right Sidebars

Wednesday, February 4, 2009

3 Columns : Harbor : Left and Right Sidebars

Saturday, November 1, 2008

3 Columns : Minima Lefty : Left and Right Sidebars

Sunday, October 5, 2008

3 Columns : Ms Moto : Left and Right Sidebars

Sunday, May 11, 2008

3 Columns : Dark Dots : Left and Right Sidebars

Thursday, May 1, 2008

3 Column Templates : Scribe : Left and Right Sidebars

Tuesday, April 8, 2008

3 Column Templates : Rounders : Left and Right Sidebars

Saturday, April 5, 2008

3 Column Templates : Rounders : Two Right Sidebars

Support The Blogger Guide

Favorites

Best Articles

Blog Archive

Contact Me

Subscribe

Followers

About Me

Sponsored Links

Visitor Locations