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!
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?
ReplyDeleteThat 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.
ReplyDeleteI 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.
ReplyDeleteI 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