Saturday, January 16, 2010

Linda's How-Do-I Series: Changing My Blog From 3-Columns To 4-Columns



The other day I spent the morning learning how to create a 4-column blog out of my 3-column "The Book Review Corner" blog and I'm happy to report that I had "success."  I love how it turned out and think it suits this particular blog just fine.

However, I don't have any plans to change any of my other blogs as I think that either the 2-column format or the 3-column format suits each of them just fine.  The 4-column format works for The Book Review Corner blog, but because there are so many columns the main post isn't as wide and each of the columns will only hold an image that is 150 pixels wide.  But, as mentioned, this format works for this particular blog.

I had to change the HTML coding in my template to accomplish this.    Since I had already converted this blog to a 3-column blog previously it wasn't quite as difficult to convert to 4-columns as I had envisioned.  First, I had to add another section to my Outer Wrapper section;  This section originally looked like this:

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
        width: 995px;
        margin: 0 auto;
        padding: 1px 0px;
        text-align: left;
        font: $bodyfont;
        border: 3px solid #6495ED;
        background:url(http://i24.photobucket.com/albums/c47/LWOriginals/backgroundblue4ss.gif);
      }

#main-wrapper {
        width: 513px;
        margin: 0 1px 0 1px;
        background:url(http://i24.photobucket.com/albums/c47/LWOriginals/backgroundblue4ss.gif);
      }

#left-sidebar-wrapper, #right-sidebar-wrapper {
        width: 220px;
        background:url(http://i24.photobucket.com/albums/c47/LWOriginals/backgroundblue4ss.gif) repeat left bottom;
        padding: 5px;
        text-align: center;
    }

#main-wrapper, #left-sidebar-wrapper, #right-sidebar-wrapper {
      border: 2px solid #6495ED;
      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, #main-wrapper {
      float: left;
    }

#right-sidebar-wrapper {
      float: right;
    }

.crosscol {
    text-align: center;
    margin: 1px;
    }


I had to change it to look like this:

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
      width: 995px;
      margin: 0 auto;
      padding: 1px 0px;
      text-align: left;
      font: $bodyfont;
      border: 3px solid #6495ED;
      background:url(http://i24.photobucket.com/albums/c47/LWOriginals/backgroundblue4ss.gif);
      }

#main-wrapper {
        width: 434px;
        margin: 0 1px 0 1px;
        background:url(http://i24.photobucket.com/albums/c47/LWOriginals/backgroundblue4ss.gif);
      }

#left-sidebar-wrapper, #right-sidebar-wrapper1, #right-sidebar-wrapper2 {
        width: 183px;
        background:url(http://i24.photobucket.com/albums/c47/LWOriginals/backgroundblue4ss.gif) repeat left bottom;
        padding: 0px;
        text-align: center;
    }

#main-wrapper, #left-sidebar-wrapper, #right-sidebar-wrapper1, #right-sidebar-wrapper2 {
      border: 1px solid #6495ED;
      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, #main-wrapper, #right-sidebar-wrapper1 {
      float: left;
    }

#right-sidebar-wrapper2 {
      float: right;
    }

Basically, I eliminated the crosscol coding and added a new section entitled #right-sidebar-wrapper2.  However since I was going to have two new right hand columns I decided to change the name of the original right hand column from #right-sidebar-wrapper to #right-sidebar-wrapper1 .  As a result all the references to #right-sidebar-wrapper had to be changed to #right-sidebar-wrapper1 as well.

And, since there was a new column being added I had to add my new column name of #right-sidebar-wrapper2 to each of the respective sections above.   I also had to indicate that the original #right-sidebar-wrapper float would be changed to "left" and that the new #right-sidebar-wrapper2 would have a "right" float.

Then I had to tell the HTML coding in the bottom half of my blog that there was a new column being added and Crosscol being removed.  So I went to the section referencing my Crosscol and removed the following coding (minus the 3 ***'s that are being shown in order to display the coding in this post):

<***!-- start crosscol-wrapper -->
<***div id="crosscol-wrapper">

  <**b:section class="crosscol" id="crosscol" showaddelement="no">
<***/b:section><***/div>

<***!-- end crosscol-wrapper -->

Then, since I was changing the name of my original right hand column and adding a second right hand column I went to my original right hand column section that looked like the following coding (minus the 3 ***'s that are being shown in order to display the coding in this post):

<***!-- start right-sidebar-wrapper -->
<***div class='sidebar' id='right-sidebar-wrapper'>
<***b:section class='sidebar2' id='sidebar2' preferred='yes'>
<***/b:section>
<***/div>
<***!-- end right-sidebar-wrapper -->

And changed it to this (minus the 3 ***'s that are being shown in order to display the coding in this post):

<***!-- start right-sidebar-wrapper1 -->
<***div class='sidebar' id='right-sidebar-wrapper1'>
<***b:section class='sidebar' id='sidebar' preferred='yes'>
<***/b:section>
<***/div>
<***!-- end right-sidebar-wrapper1 -->

In changing the HTML coding above I also had to change the "div class" and "id" from sidebar2 to sidebar to give it a unique identifier from my new right-sidebar-wrapper2 that would be using that "div class" and "id" of sidebar2.

And, then I added my second right hand column right after this and it was as follows (minus the 3 ***'s that are being shown in order to display the coding in this post):

<***!-- start right-sidebar-wrapper2 -->
<***div class='sidebar' id='right-sidebar-wrapper2'>
<***b:section class='sidebar2' id='sidebar2' preferred='yes'>
<***/b:section>
<***/div>
<***!-- end right-sidebar-wrapper2 -->

Then I went into my layout and moved the page elements around until I was happy with where they all were. Since the columns weren't as wide as they had been I had to re-size and re-enter some of the images to get them to fit inside the new column width. I also had to change some of the drop-down menu's as they were also wider than my new columns would allow.

There are some websites out there that provide the coding for a 4-column blog, and if you're starting from scratch you can use them, but I already had a ton of modules that I had added and a lot of customization that I had already added to The Book Review Corner blog that I didn't want to have to re-enter so I took the approach above.What worked for me and my blog above might not work for you and your blog as your blogs HTML and CSS coding might be slightly different.

It took a little while, but I was happy with the way it all turned out. I'd love for you to check out the redesign of The Book Review Corner blog and let me know what you think.

No comments:

Post a Comment