11.17.2010

DIY Custom Blog Design Part 3: 3 Column Template

This is Part 3 of a series of tutorials, if you need to start at the beginning, click here.

In this part, I will show you how to make a 3 column template for your Custom Blog Design.


First, you are going to head to your "Edit HTML" page, and find #header-wrapper and change the width to 1000px (or whatever you like, remember this is CUSTOM, so don't be afraid to play around with it).  Shown Below.

Next, find your #outer-wrapper and change it to 1000px as well (or whatever value you used on the header-wrapper). 

Now, just below your #sidebar-wrapper { } section, paste this:

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

As seen here:

Now, just BEFORE this line:  <div id='main-wrapper'>

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

As seen here:

Now, when you save your template, you will see this on you "Page Elements" page:

Now, make sure you drag some gadgets over to your left side, or add some.  After you do that, when you view your blog, you will notice that the columns need to be adjusted.... they obviously are not sized properly (like you can see below).

What we need to do to fix this, is to go back into your "Edit HTML" page, and find the Outer-Wrapper section again.  Below I have given you a chart that will help you see what the different tags and sizes mean (click on it if you need to view it larger).

Now that you have an idea of what the tags mean, here is what I did to customize my 3 columns (remember, Custom, you don't have to do it how I did it, just play with it!)

#outer-wrapper {
  background: white;
  width: 1000px;
  margin:0 auto;
  padding:30px;
  text-align:$startSide;
  font: $bodyfont;
  }

#main-wrapper {
  width: 540px;
  padding: 0px 30px 0px 30px;
  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: 180px;
  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 */
}

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

Here is a diagram that explains the changes that I made:

Congrats!  Now you have a CUSTOMIZED 3 Column Template :)

7 comments:

  1. Can you give us the code for a 2 column blog??!! THANKS!!!

    ReplyDelete
  2. Allow me to re-ask that question...can you tell me how to put the smaller column with all the links, etc on the left instead of the right (default)?

    ReplyDelete
  3. If you go down to the #sidebar-wrapper, where it says: float: $endSide;
    Change "$endSide" to "left"

    Then in the section that says #main-wrapper, change "$startSide" to "right"

    I think that should do the trick :)

    ReplyDelete
  4. I did all the steps, but am still showing just 2 columns - nothing new showed up on the left (and not any "add gadget" in the page elements either). Any suggestions?

    ReplyDelete
  5. okay, so I noticed your new-sidebar wrapper shows 2 different things here - one says $endside and one says $left. so i changed it to the $left. This DID add a third column to the left, but now my main body/posts shows BELOW the left column -- not in between the outer columns.

    ReplyDelete
  6. hey, wich design, do you have to begin with, because mine html, setup does not look the same as yours, and it is much easier, if it is the same :p so wich design/ template did you choose for you blog at the beginning ?

    ReplyDelete
  7. Excellently written article, if only all bloggers offered the same content as you, the internet would be a much better place. Please keep it up!
    Web Design Company

    ReplyDelete

Related Posts with Thumbnails