Customizing BookLikes Tutorial - Part 3 - Back to basics. Main background change

 

Now that I have my header banner sorted out, as described in Part 2 I want to get the background to match. I decided on just a plain colour background rather than a pattern so this will deal with only the colour option.

 

You can achieve this in either one of two ways.  1) Custom CSS, or 2) Clicking a few buttons.

 

Unsurprisingly, I went with the button clicking option.

 

{{*snip* - read more under the cut}}

It's back to the customizing menu again and this time you're looking for the option to change the background colour.

 

 

Scroll down until you see 'background color' with a blank box next to it.  When you click on the blank box you'll be presented with a pop up box to choose your colours. 

 

 

These are known as Hexidecimal colours (Hex for short) which is just the language that computers use to be able to 'read' colour.  A hex colour is prefixed with a hash symbol (#) so that your computer can read it.  All you need to do is choose a colour from the picker by clicking on a spot you like the look of and the code will fill the box and change to that colour.

 

If you already know the hex colour you'd like to use, just type this into the box with the # in front of it.   The colour I use on my page is #CFE4DI

 

If you'd like to see a few colours together before you choose or want to play around with tones first, there is a nice hex picker at http://mudcu.be/sphere/

 

Now, since we're going with the button click method we have to make sure that all the buttons for all the pages of our blog are clicked.  That means that you'll see 'background color' mentioned a few times down your customization menu.  There are about 4 or 5 boxes for you to add your hex code in the brown column.  All your pages 'blog', 'shelf', 'followers'  etc need to be told what colour you'd like them to be so make sure all the 'background color' boxes are filled with your hex colour.  Once you've decided on a colour you can just copy and paste in into each box.  

 

That's it!  That's all there is to it! 

 

Just click the green 'save' button and you're done here :)

 

Hope this helps someone.

 

In part four I'll be moving the follower/following buttons off my header and putting them below my avatar.

 

Part One - How to get started

Part Two - Adding a new header

Part Four -  Moving follower buttons

Part Five - Changing the look of your follower buttons

Part Six - Changing the colour of your sidebar background

Part Seven - Changing your comment section background colour

 

 

*********EDITED TO ADD*******

 

 

 Some people have been saying in the comments that they don't have the box to add the colour code into on their menu.  Maybe it depends on which browser you're using or on which device you're using to access the site.  Anyhoo, I've made a really quick cut and paste job to show what my menu shows so you can see where the box shows on my menu. 

 

However, while screencapping I had a brainwave.... Rather than faff about with all the above, if you'd like an over-ride to do the job, just copy/paste the css code at the very bottom below and substitute your colour code for my #ffffff part and paste it into your custom css box at the bottom of your menu. 

 

Dont' know why I didn't think of it sooner...duh!!

 

Job done!

 

:D

 

 

 

 

 

div.bg {
    background-color: #FFFFFF;
}

 

 

Change the FFFFFF to the colour code you'd like to use and paste it into your custom css section