Monday, March 9, 2009

HTML: Complicated, but Fun and Totally Worth It

If you guys haven't noticed that I have two sidebars, I suggest you get your eyes checked (or your computer). How did I get a second sidebar without having to change my layout completely or redo my widgets/gadgets??? Four letters: HTML.

I found a handy step-by-step guide to adding a second sidebar at The Cutest Blog on the Block. I was so happy when I found it, and even happier when it worked. I added a second sidebar to 13 & Co. first, but wasn't totally happy with the result at first. On the Pyzam layouts, the post body block thing and the original sidebar always end up being connected, while the new sidebar has space. It annoyed me, so I played around with the code a bit more and with some help from 21 I managed to get everything spaced right (not to mention get rid of the ugly orange Pyzam bar at the top, hehe). So, I've decided to rewrite the tutorial a bit so it works for Pyzam layouts. Here it is...


How to get a 3 column template


So you want to have a 3 column, minima template do ya? Well you've found found just the place.
NOTE: Before you edit or change template, make sure you backup your current template PLUS Page Elements.
We have tested this out ourselves and found that it has worked! And the fun part about it is that you've now got 3 columns to organize all of your fun blog info into. Also, with this new way, you'll not lose any of your links or widgets or other blog gadgets that are built into your blog.
It is easiest to start off with changing your template to minima. However, keep in mind changing your template to minima will erase any tweaks you have made to your blog's html code. You don't have to change your template at all if you follow my instructions.

Go to Template, Edit HTML.
Now, find this section in the HTML code:

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

Copy this entire section and paste it directly below itself. We are now going change the elements I have highlighted in red to the following:

#left-sidebar-wrapper (this makes the css for this section unique) float: left;

Scroll up a little bit until you see this code:

#main-wrapper {
width: 410px;
margin-left: 25px; for Pyzam layouts, make this 10px; so the space between the post body and both sidebars is equal
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 */
}

Add the words you see in red.
Now, we are going to adjust some of the numbers. Change the numbers on your blog to reflect the highlighted numbers below.

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


#main-wrapper {
width: 425px;
margin-left: 25px;
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: 200px;
float: $endSide; be sure to change the float to right;
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: 200px;
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 */
}

Next, hit ‘ctrl F’ and paste this in the find box. Now paste the following code directly above that.

You may want to adjust the header size so it is as wide as your background. Scroll up till you see the following code. Change it to reflect the highlighted text. *By making the border 0px you will not have the border lines around your header!*

#header-wrapper {
width:860px; if you want the edges of the header to line up with the edges of the sidebars, make this 878px;
margin:0 auto 10px;
border:0px solid $bordercolor;
}


#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}


#header {
margin: 5px;
border: 0px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;

Click save template. Now click on your ‘Layout’ tab. You will need to drag some of your elements on the right sidebar to the left side bar. Click save and preview template. You should now have a 3 column layout!


*When changing out your background you do NOT need to reset your template. This will erase all the coding you just did. Just erase the old background code and replace it with the new one!


I'll cover getting rid of the Pyzam bar in my next post. Have fun editing your HTML code!!! (it really is quite fun)

Eclectically yours,
Dahlia

4 comments:

Holland Petalpockets said...

Helpful, yet time consuming. New layout looks great. Thanks for the help.

Amelia said...

You're right HTML is complicated, fun, and worth it. I just wish I knew how to do it without looking it up.

I nominated you for an award
http://bookjunkiereviews.blogspot.com/

21 said...

HTML is so much fun! Thanks for helping me out with mine. :)

Amelia said...

I redoing my blog again and again changing the layout. But i noticed this
"Next, hit ‘ctrl F’ and paste this in the find box. Now paste the following code directly above that."
Except I don't see the codes you're referring to.