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


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 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. 



Hope this helps someone.


Next time, in part 7 I might do something about recolouring the comments box ...and recolouring that scrappy looking search bar below the avatar.


Part One - How to get started

Part Two - Adding a new header

Part Three -  Changing your main page background colour

Part Four -  Moving follower buttons

Part Five - Changing the look of your follower buttons

Part Seven - Changing your comment section background colour