Fix for Sidebar Problem Night Sky 2.0 Blogger Template by Ray Creations

(Sunday, June 20, 2010)

No doubt the Night Sky 2.0 Blogger template by Ray Creations is one of the best templates I’ve ever seen. There are other templates by Ray Creations which are as good too. You can check out more of its works here.

However, there is a bug in the template. I find the end of my right sidebar cuts off and goes to the far left side of the screen in posts page (not main page) whenever I add widgets on the sidebar to the extent that the sidebar’s height exceeds that of the post’s.

I figured this is because the sidebar-bottom is made to float:left; margin-left:20px. So, whenever there is no post on its left for the sidebar to “hold on to”, the sidebar will eventually floats itself to the most left that it can find with 20px margin from the left.

Here is the original extract from the template:

   1:  #sidebar-bottom {
   2:    width: 240px;
   3:    height:40px;
   4:    padding-right: 0px;
   5:    background: url(http://lh5.ggpht.com/_qYQcA5cg1OY/SsMdZU-8OAI/AAAAAAAAAG8/fRV84_un7sQ/rightsidePanelbottom.jpg) no-repeat right bottom;
   6:    float: left;
   7:    margin-left:20px;
   8:    overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */


To fix this:
  1. Go to Design >> Edit HTML.
  2. Remember to always backup your template first before you do any changes in your HTML.
  3. Search for “sidebar-bottom” using your browser’s search function and you should see codes resembling the above extract.
  4. Change line 6: float: left; to float: right;
  5. Change line 7: margin-left:20px; to margin-right:11px;
  6. It should look like this:
       1:  #sidebar-bottom {
       2:    width: 240px;
       3:    height:40px;
       4:    padding-right: 0px;
       5:    background: url(http://lh5.ggpht.com/_qYQcA5cg1OY/SsMdZU-8OAI/AAAAAAAAAG8/fRV84_un7sQ/rightsidePanelbottom.jpg) no-repeat right bottom;
       6:    float: right;
       7:    margin-right:11px;
       8:    overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
  7. Click on Save Template and you’re done.
Note: I’m no HTML expert whatsoever. I did this fix by experimenting the template in Adobe Dreamweaver and by changing the codes one by one, retrying, re-fixing and refreshing the pages over and over again. It’s hard work. Try this fix at your own risk. I shall not be hold responsible for any damages caused in your blog for using this fix. Like what I said, I’m no HTML expert so there may be other solutions to this but this is the only one that I found that works. If you are going to post this somewhere please inform, credit me and post a direct link to this page.

Posted by Wai Kit at 1:23 PM

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)
 
Copyright 2005-2007. Hello Wiki designed by Fen, Blogger Templates by Blogcrowds. Wai Kit Says logo designed by Wai Yen.