Fixing Aspire blog template bug

I’ve been meaning for a while to take a look into a blog template based on Aspire bug (I added a widget section that spans the two shorter ones and it’s moved down). Before doing so, I looked at the only blog that has implemented it successfully.

It appears that the only Aspire Blogger blog I know that also offered advice on template issues, comfun.info, has been abandoned.  Here’s how this blog looked on 404:

Here’s the blog I’m trying to fix:

 

Notice how the two sidebar columns move to the left? This is not so terrible and could be passed on as a “feature”, but here’s how the columns jump over the wider one normally, with longer articles:

fix

I tried repeating the exact steps taken in comfun:

1. search for #sidebar-right style definition and enter underneath

#sidebar-combined {width:350px; float:right; overflow:hidden;}

2. right under #sidebars .widget h2 add:

/* === Start Of New Code For Combined SideBar === */
#sidebar-combined .widget {background:url(http://sites.google.com/site/jaideepw/pics/sidebartopcombined.jpg) center top no-repeat; margin-top:15px; padding-top:30px}
#sidebar-combined .widget h2 {background:url(http://sites.google.com/site/jaideepw/pics/sidebarh2combined.jpg) center bottom no-repeat; position:relative; font:bold 18px "Trebuchet MS"; color:#602600; margin:0px; text-align:center; padding:0px 10px 18px 10px;}
#sidebar-combined .widget-content {background:url(http://sites.google.com/site/jaideepw/pics/sidebarbottomcombined.jpg) center bottom no-repeat; padding:10px 10px 25px 10px; margin-left:1px; text-align:center;}
/* === End Of New Code For Combined SideBar === */

3. find <div id='sidebars'> then add

                <div id='sidebar-combined'>
<b:section clas='sidebar-combined section' id=’sidebarcombined’ preferred='yes'>
</b:section>
                </div>

3b. (Optional) – to add an editable section at the bottom of the page, search for <div id=’footer’> then paste:

   <b:section class='copy' id='footer'>
<b:widget id='Label2' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
    <b:if cond='data:display == &quot;list&quot;'>
      <ul>
      <b:loop values='data:labels' var='label'>
        <li>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </li>
      </b:loop>
      </ul>
    <b:else/>
      <b:loop values='data:labels' var='label'>
        <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span class='label-count' dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </span>
      </b:loop>
    </b:if>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>
</b:section>

4. Success! :)

greetbox

One fix I’ve already done is the use of the space in the top right corner for greetbox (a “welcome” script), as follows:

1. In the template, search for “.searchbox”
2. Right underneath, define a new style: 
   .stopbox {position:absolute; left:650px; top:10px; width:330px; font-size:11px; color:#97712c;}
3. (Optional) If you want some icons right next to the searchbox, also define:
   .srightbox {position:absolute; left:820px; top:100px; width:170px; font-size:11px; color:#97712c;}
4. Search for <div class=’searchbox’>
5. Right after the end </div>, paste the following:

       <div class='stopbox'>
           <script src=’http://blogidol-greetbox.googlecode.com/files/bi-TextToBeDisplayedDiv-minv3.1.js' type='text/javascript'/>
   <div id='mainDisplayDiv' style='background:#F8F8FF;border:1px solid #B6AFA9;display:none'>
   <div style='float: right; margin-right: 5px; margin-top: 5px;'>
   <href a='#' onclick='closeGreetBox(&apos;7&apos;)'><img alt='x' border='0' src='http://img214.imageshack.us/img214/9837/closebutton.gif'/>
   </href></div>
   <div id='dynamicContentDisplayed'>
   </div>
   <script type='text/javascript'>
   // Give your blogger blog url here
   var feedURL = &quot;http://www.alsosprachzamolxis.com&quot;;var dynamicHTMLText = displayRequiredText(feedURL);
   document.getElementById(&quot;dynamicContentDisplayed&quot;).innerHTML = dynamicHTMLText;
   </script>
   </div>
   <script src='http://blogidol-greetbox.googlecode.com/files/HideShowDivV3.0.js' type='text/javascript'>
   </script>
   <script type='text/javascript'>
   showHideDiv();
   </script>
       </div>

6. (optional) If you want a bunch of icons next to the searchbox (such as RSS, Twitter, Facebook, etc), use <div clas=’srightbox’><a href=”http://www.facebook.com/yourfbpage”><img src=”http://your fb icon” /></a> <a href=”http://twitter.com/yourtwt”><img src=”http://your twt icon” /></a></div> – also for the Ro version in the script above, use http://blogidol-greetbox.googlecode.com/files/bi-TextToBeDisplayedDiv-minv3.2.0.1.1.js

Admire the results :)

More info on that can be found at GreetBox page.

I shall now look at the other Aspire blogs to see if anybody else has fixed the original issue, before trying to fix it myself.

Further updates to the template as well as tips and download links will be posted on the testing blog shown below.

Sources / More info: http://aspirebiro.blogspot.com/, mediashare, 4shared, rapidshare, oron 

BlogIdol, template, blogger, blogspot, design, html, css, blog, tech, code, bug, fix, fixing, troubleshoot, debug (Tags)