Thursday, December 27, 2007

Not dreaming tonight.

I took a little nap yesterday afternoon and then lay awake all night. Sometime around 3 AM, I decided to make a three-column Blogger template. Fortunately I ran across The Rounders Three-Column Mod. I downloaded the sample and got some late-night inspiration.

I couldn't just upload Vin's sample because I want to keep my widgets. Instead, I inserted a second sidebar. It's identical to the original Blogger sidebar.
#rightsidebar-wrap {
margin:15px 15px 0;
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 */

I placed the right-sightbar divs in the body, just before the footer.
<div id='rightsidebar-wrap'>

<div id='sidebartop-wrap'><div id='sidebartop-wrap2'>
<b:section class='sidebar' id='sidebartop1'>

<div id='sidebarbottom-wrap1'><div id='sidebarbottom-wrap2'>
<b:section class='sidebar' id='sidebar3' preferred='yes'>


Next, I widened #outer-wrapper to 995px. I had to widen the rounded corner images for the header and footer to 995px also. I linked to the resized corner images in the #header and #footer definitions.

The new sidebar fonts were all funkified, so I added some definitions right after #sidebar.
#rightsidebar-wrap a {
color: $bottomSidebarLinkColor;
#rightsidebar-wrap a:hover,
#rightsidebar-wrap a:visited {
color: $bottomSidebarVisitedLinkColor;

While making changes, I previewed the blog several times. Just to make sure things were going as expected. I saved the template and then moved widgets around in the wireframe editor. That's all there is to it.

Four short digressions... I learned these tips on Blog U and Blogger Tips. Very useful!
  1. I stored my 995px-wide corner images and favicon on Ripway.
  2. The favicon links come right after the head tag.
    <link href='' rel='shortcut icon'/>
    <link href='' rel='icon'/>

  3. You can show/hide the navbar by placing this code after the head tag.
    #navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}
  4. Type special characters (e.g., < >) in posts by using the ISO Entity Name.

No comments: