Three Column Minima( Layout Version )


2:46 PM | ,

I started this blog because, like everyone who gets into blogging, I wanted to add a third column to my Minima template. Sadly, I also knew absolutely nothing about HTML, and nowhere could I find instructions that were all in one place and easy to understand


So let's get started! First, open up Blogger and go into your Dashboard, then click on the "Layout" tab. Then go into the "Edit HTML" tab. You will see a bunch of gobbledygook and gobbledygook it shall remain - you don't need to know anything about it. Just scroll down through the code until you see :

/* Header
-----------------------------------------------
(Note: you can also use your browser's control F (CTRL+F) command to search for this section. Just type in /* Header and then click the "next" button)

Now, change the width of the "header-wrapper" from 660 to 940;

#header-wrapper {
width:660px; <-------change to 940
margin:0 auto 10px;
>border:1px solid $bordercolor;
}

That piece of code should now look EXACTLY like this:

#header-wrapper {
width:940px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

Also, at the bottom of the same Header section, change the max-width from 660 to 940:

#description {
margin:0 5px 5px;
padding:0 20px 20px;
border:1px solid #eee;
border-width:0 1px 1px;
max-width:660px;<-------change to 940
font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.2em;
color:#999;
}

That piece of code should now look like this:

#description {
margin:0 5px 5px;
padding:0 20px 20px;
border:1px solid #eee;
border-width:0 1px 1px;
max-width:940px;
font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.2em;
color:#999;
}


So far so good. Next, scroll down (or use CTRL+F) to where it says:

/* Outer-Wrapper
----------------------------------------------- */

Now, just like you did in the Header above, change the "outer-wrapper" width from 660 to 940, and (2) change the "main-wrapper" width from 410 to 500

#outer-wrapper {
width: 660px; <-------change to 940
margin:0 auto; padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 410px; <-------change to 500
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 */
}

Next, take this new block of code (in red) and paste it in exactly as it appears directly in between the "outer-wrapper" code and "main-wrapper" code. It's helpful to use "CTRL C" to copy, and then "CTRL V" to paste, if you didn't already know that trick. Regardless of how you do it, you must paste it in between these two code blocks, nowhere else. Update: the Google Gremlins may let some of you get away with using "left" instead of "$startSide" and "right" instead of "$endSide".


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


The new code block should look exactly like this:


#outer-wrapper {
width: 940px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

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

#main-wrapper {
width: 500px;
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 */
}

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



Then scroll way down the page to the footer section (or use CTRL F), it looks like this:

/* Footer
----------------------------------------------- */

Change the width of the "footer" from 660 to 940.

#footer {
width:660px; <-------change to 940
clear:both;
margin:0 auto; 10px
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

At this point, believe it or not, there are only two more steps. This particular step is hard only because you need to make sure you paste the additional code in the right spot, and this next spot can be a hard place to identify (CTRL+F helps here a lot).

Anyway, in the same footer section that you're now in, scroll down until you see:




Then, locate the the "main wrapper" id a few lines below it. It looks like this:











Now, just above the "main wrapper" id, paste in the following code EXACTLY as it appears below:






Note: this will also temporarily insert the Blogger logo button into your new sidebar, but you can delete that and add the widget of your own choice after you finish adding the column. Update: If you get an error message that says the widget ID should be unique, you have an existing blogger button already loaded in your original sidebar and you'll have to delete that one temporarily. But don't worry, you can customize all of your sidebars when you get them all set up. If not, there's no need to worry about it - the button is just a placeholder and you can replace and rearrange all of your widgets when you finish.

So, after you do that, the newly modified section should now look like this:



div id='content-wrapper'>





















And you are a now master Minima coder, because you're done! Hit preview to see your new three column Minima layout, and then save the template. Now you can go into the "Layouts" and add a new google gadget of your choice. You can also read this article for instructions on how to adjust your margins to make more space in between your columns.

If you have any trouble with your "nav bar" or would simply like to turn it off, insert the following code (in red) exactly where I have placed it:





Blogger Template Style
Name: Minima
Designer: Douglas Bowman
URL: www.stopdesign.com
Date: 26 Feb 2004
Updated by: Blogger Team
----------------------------------------------

#navbar-iframe {
display: none !important;
}


Best of luck with your blogging.


  • Stumble This Post
  • Save Tis Post To Delicious
  • Share On Reddit
  • Fave On Technorati
  • Buzz This Post
  • Tweet This Post
  • Digg This Post
  • Share On Facebook
WATCH THE RSS FEED OF THIS BLOG
You Might Also Like :


0 comments:

Post a Comment