I finally figured it out! I finally got Redoable (this site’s template) to utilize TWO, yes I said it, TWO widget panels. You can view it to the left of my homepage. Talk about a pain in the ass. I’m about to show you how I did it though.
First: I decided the easiest way would be to shift everything over a few pixels (150 to be exact).
Second: I added a few classes to get everything formatted the way I really wanted.
Third: I added a cool fade out effect when you roll over one of the left sidebar’s headers. It’s a lot like the Wordpress method. You know, when you modify a setting in the admin panel and the message fades in and out.
Here’s the code!
- This is what I added to the style (CSS Sheet)
#shiftRight {
margin-left:140px;
} #attentionColumn{
margin-left:-150px;
width: 150px;
position: absolute;
} - Since I’m shifting the whole template over, the only file I really had to edit to do that was the header.php! You can see that I also added a header section. Just thinking ahead if I ever want to use that upper left corner for anything. Guess this would be a good time to plug for advertisers…anyone need some ad space. Real cheap! Hahaha…
<body class="<?php redo_body_class(); ?>" <?php redo_body_id(); ?>
<div id="shiftRight"> <div id="header">
<div class="top">
<div id="attentionColumn">
</div> - I then closed that shiftRight div by closing it in footer.php. It’s really pretty simple.
- Now comes the time to actually setup that sidebar. First, you must go into Sociable’s functions.php and change the number of registered widget bars to 2! Now you will have that second one in the presentation settings.
- To get the widget side bar to display on your template, it’s actually pretty easy. In the index.php file, make your code look like this. Add the attentionColumn DIV after the content DIV. Anything you put into that attentionColumn DIV is going to show up on that left menu. Feel free to add plugins, widgets, pictures, whatever!
<div class="content">
<div id="attentionColumn">
<?php /* WordPress Widget Support */ if (function_exists(’dynamic_sidebar’) and dynamic_sidebar(2)) { } else { ?> <?php } ?>
</div>
Before:
After:
I also mentioned before, I decided to try the fading background effect on my left side bar headers. They are triggered onmouseover, so it gives a nice little effect. Feel free to steal the code from me. I got it from someone else anyways…
Fat.js - Fading Background (Just Like Wordpress’)
I have heard of prototype.js and scriptaculous.js before, but never use it since it was quite big. Most of my viewers still have dialups. Will check the protaculous and send a feedback.
Yeah, but how about a new version using the latest versions of Prototype and Scriptaculous.
Agreed….got any free time?