Customizing the Sidebar

There has been several comments asking how to achieve the sidebar background effects seen here on the Skin demo page. This is something I should have addressed in the release post but in all my excitement to release the skin, I just plain forgot. Anyway, here’s a quick customization guide for adding the fading background images in the sidebars.

On this demo page you’ll see 3 background images being utilized in my sidebar widgets. The light orange with the standard RSS icon in the background, the blue fader which fades to a light blue color, and the gray fader which fades to a light gray. These effects are achieved using 3 background images that are included in the skin download file.

The easiest way to add these styles to the sidebars is to add a text widget (we can add the style to other widget classes too, but that will involve adding a little extra code to the custom.css and I’ll tackle that one later) and to enclose your content inside one of the div classes I’ve defined in the skin’s custom.css file.

To add the orange style, titled subscriber in the custom.css file, to a text widget, use the following code:

<div class="subscriber">Content for your text widget</div>

For the blue fader style:

<div class="bluefader">Content for your text widget</div>

And for the gray fader style:

<div class="grayfader">Content for your text widget</div>

I defined one more class to add a light gray hightlight for links that you can see when you hover over a link in the gray fader widget on this demo page. If you’d like to add that as well to style your links inside the grayfader class, see this example code for how its done:

<div class="grayfader">
<div class="sblist1">
<a href="http://yourlink.com">Link #1</a>
<a href="http://yourlink.com">Link #2</a>
</div>
</div>

Now you can start styling those sidebars! Remember that this skin is a continual work in progress so grab the newsletter or follow me on twitter to get updates when new skin information is released. As always any questions, comments or skin suggestions are welcome!