Customizing BookLikes Tutorial - Part 6 - Back to basics. Changing the the colour of your sidebar background.

7:38 pm 4 October 2013

A quick and easy one this time. Changing the colour of your sidebar. As always this is done in template one (default).

So, sometimes the background you choose may look great as an overall image, but your links, shelves etc in your sidebar can become lost in the busy-ness of it all. Or maybe you have a plain colour background like I do but want a bit of contrast for your sidebar. Either way, it's a quick fix.

Here's how. No messing with the html for this, just a little code to copy into your custom CSS box.

If your background is just a solid colour it probably doesn't look too bad, but if you think it could look nicer with a dash of colour, here's what you do...

In your customize menu - scroll down to the very bottom and into the custom CSS box copy/paste this code.

div.side-left.set-left {
background-color: #FFFFFF;
}

Now, the #FFFFFF is the hex colour for white so unless you want a white sidebar you can change that to whichever colour you'd like instead. You can choose a new colour code by playing around with the picker at http://mudcu.be/sphere/ and replace #FFFFFF with the new hex number.

That's it!! Don't forget to save and you're alll done and done. EASY! A nice new coloured sidebar.

The new colour tucks in in under your avatar at the top of the sidebar and continues down as far as your sidebar content goes. If you add more items to your sidebar the colour stretches down with it.