12.15.2010

EASY DIY Custom Blog Design Part 3: Wide 2 Column Template

This is a Series of Tutorials, so if you need to start at the beginning, CLICK HERE.

In this part of the tutorial, I am going to show you how to make a wide 2 column template with nice white space.  If you want to make a 3 column template instead, I have a tutorial HERE.

This tutorial uses the Minima Template (if you started at the beginning, I already had you do this).

First, you will need to head over to your Edit HTML page and scroll down to #header-wrapper { and change 660px to 1000px (or change it to what ever width you would like, in my example I am doing 1000px).

Next do the same thing on your #outer-wrapper {

Now I need to adjust the #main-wrapper {  I changed my width to 640px.

Then adjust the  #sidebar-wrapper {  I changed mine to 300px.

If you like your sidebar on the right, you can stop here, but if you would like to change it to the left, I will show you how to do that now.

Go to your #main-wrapper {  and change $startSide to $endside, and go to your #sidebar-wrapper {  and change $endSide to $startSide.  Now it should look like this!

Now Save your Template, and you are set!

4 comments:

  1. I tried moving the sidebar to the left, and somehow it ended up at the bottom of the left side. I tried to fix it and now it's on the bottom of the right side. Any helpful hints as to what might have happened?

    ReplyDelete
  2. That happens when either your main-wrapper or your sidebar-wrapper are too wide for the width of the outer-wrapper, so you either need to make your outer-wrapper size larger, or make your main-wrapper and/or sidebar-wrapper smaller.

    ReplyDelete
  3. I used the same measurements as you posted above. Could it have anything to do with not properly resizing my background before applying it? I think that is the only thing I have done differently so far.

    ReplyDelete
  4. I did the same thing and am getting all the sidebar stuff at the bottom, too...even after making the outer-wrapper large and main-wrapper smaller.

    ReplyDelete

Related Posts with Thumbnails