windows for china: June 2008

Thursday, June 26, 2008

this Article from http://bguide.blogspot.com/2008/03/3-columns-minima-left-and-right.html

Article Series: 3 Column Step by Step Guides

Here are the steps to convert a default 2 column Minima template in to a 3 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 below) and rename it to #left-sidebar-wrapper
Change the float: $endSide to float:$startSide of this newly copied section (See the code snippet below)

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

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

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

Locate the
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 left margin of 12 pixels.

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

Note: Step 5 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.

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

Locate the end of the skin denoted by "]]>"
Add the following code 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 #left-sidebar-wrapper {
width:150px;
}

]]>

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

Rounders 3 columnas template

Todas las Rounders a 3 columnas

Siguiendo con las modificaciones de plantillas, y a pedido de Rob x aquí les dejo las otras Rounders, (pero estas no las he modificado yo, sino que las he encontrado en internet)

Rounders 4 con 3 columnas
Blogger Template Rounders 4

Demo | descargar

Rounders 3 con 3 columnas

Demo | Descargar

Rounders 2 con 3columnas

la pueden ver en este post

Rounders 3 columnas

Demo | Download

Tuesday, June 24, 2008

4 Column Template for Blogger

Blue 4 Column Template

Template for Blogger.4 Column Template for Blogger.Varieties of Templates.Green Template for Blogger.This is the Green template for Blogger. Whole Green Looks for Blogger. Download XML template:- Download

Green Template for Blogger

4 Column Fire Template

This is the 4 Column template for Blogger.Used In various Purpose.Easy to Use Just By Downloading or Editing it from Edit Html.
Download :- Download

Tuesday, 5 June 2007

Colourfull Template

This is the 4 Column template for Blogger.Used In various Purpose.Easy to Use Just By Downloading or Editing it from Edit Html.
Download Xml File
Or Edit It
by Downloading txt file :-Download

Thursday, 31 May 2007

4 Column template for Blogger

This is the 4 Column template for Blogger.Used In various Purpose.Easy to Use Just By Downloading or Editing it from Edit Html.
Download Xml File
---------------------------------------------------