3 Ways To Add Colour To Your Book Blog
If you’ve had a book blog for several years you might be thinking it’s time to freshen up the way it appears to readers.
One obvious solution is to change the theme. But it takes time to sift through the hundreds of design options to find the one offering the right layout and functionality. And if you use plug ins, you could find that some of these won’t work any longer so you’ll have to find replacements.
There’s another – and simpler – solution: just change the colour of your text. You can change the text colour across the whole site. Or you can just change the colour of headings and a few words. You might decide for example that you want to use colour to draw attention to the title of the book you’re reviewing.
Here’s a step-by-step guide on three ways to change text colour in a WordPress site. Let’s do the two easiest ones first!
Method #1. Change Text Colour Using WordPress Classic Editor
WordPress editor gives you the ability to put individual words, sentences, paragraphs, or subheadings in a different colour from your main text. The method you’ll follow will vary slightly between WordPress classic editor and WordPress Gutenburg editor
1.First you need to create a new post or a page and add your text (or you can edit an existing piece of content).
2. Click on the toolbar toggle icon on the far right. You’ll see a second row of icons which give you additional formatting functions.
3. Select the text whose colour you want to change. Click on the arrow to the right of the A symbol to access the dropdown menu.
The colour palette gives you 39 colour options. The small “x” in the bottom right corner will activate “no colour”, meaning the text colour will automatically adjust to the default colour.
A word of caution about some of these colours. The yellow, teal and peach might look pretty but text in those shades will be hard to read. As a general rule, avoid the pale tints. Dark and solid colours work best against a white background.
4. If you don’t like these colour choices, you can get more flexibility by clicking the word “custom” underneath the colour squares.
5. Now all you need do is click the small circle and drag it within the colour rectangle to find the shade you want. As you move around you’ll see a corresponding change in colour square in the bottom right corner.
You should also notice that the numbers shown in the text boxes labelled “R” “G” “B” and “#” also change. The RGB numbers indicate the specific composition of your colour (the proportion of red, green and blue). The “#” figure is called a Hex code and is a shorthand formula for each colour.
It’s well worth making a note of these numbers so you can be sure to use the exact same shade across all your site.
6. When you’re happy with your choice, just click on “OK”. Your custom colour will now be saved in the colour palette.
Method #2. Change Text Colour Using WordPress Gutenburg Editor
1. Create your text using the paragraph block or heading block.
2. To change the colour of the entire block, simply click on the block. You should see the block settings panel on the right side of your screen.
3. The visual editor will show you some options based on your theme. Just click on one of these to change your text colour. Or choose a custom colour by following the same steps as in the classic editor. If you also want to change the colour background for a text block, you can do that here.
To change the colour of just a few words, or a sentence, you need to use a slightly different technique.
4. First highlight the word(s) you want to change. Then, click the small downward arrow on the content editor toolbar to reveal a drop down menu of formatting options. Why the Gutenburg developers thought it a good idea to hide these behind the arrow, is a mystery but that’s where you’ll find the ‘Text Colour’ link.
5 Click on that to see the same colour options you had when changing the text within the whole block. This includes picking one of the default options or selecting any colour you want by using the custom colour link.
A few extra things worth knowing:
- If you change your mind about a custom colour you selected, just go back to the colour palette and hit the “X” – it will restore the default. .
- You can also change the text colour of a bulleted list but only by highlighting each line in the list. the colour of a whole list block. Nor can you change . Very irritating.
- You can’t change the colour of the bullet point in a list. Any colour changes affect the whole line
- You can change the colour of individual words in a heading. But you cannot change the background colour of a heading.
Method #3. Change Text Colour Across
The Whole Site
Every WordPress website has default font colours depending on which theme you selected. Some work better than others. Light grey body text, for example, is difficult to read when set against a white background.
Can you change these default colours?
Yes you can but only if your selected theme allows customisation. Mine does but it’s very limited. I can change only the colours of the blog header and the background colour. If my selected theme was more compatible with Gutenburg block editor I would be able to do a lot more colour customisation.
Your theme may give you more flexibility. So here’s what you need to do.
1.Open your WordPress dashboard, select Appearance – then Customize to open up the Theme Customizer.
2. Once in the Theme Customiser look for an option such as ‘Typography’. The name of the option will vary depending on your theme. If you don’t find anything like this, you’re out of luck unfortunately.
But if you do find something like typography, you should get another menu which looks similar to this:
3. Click on “Body” You need to click on this to get the colour palette. Choose your colour just as you did when changing the colour of individual words and headings. The choice you make here however will change the text colour in all your posts and pages.
If you want to change colours of all headings across your site, this is also the place to do just that – you just click on each heading size and select the colour.
Didn’t work for you? If you’re prepared to put effort into it, there is an alternative method you could use to change the default font colour. I warn you though that it’s rather more fiddly and technical and is available only if you have WordPress.com Premium or Business plans. It involves the use of CSS (Cascading Style Sheets) code.
I’ve had a peek at some of the instructions and decided it’s far too complicated. Even WordPress says it can occasionally be complex. I don’t have the enthusiasm to battle with coding, especially when it looks as if I have to change themes anyway to overcome some compatibility issues with my current theme.
If any of you are feeling emboldened however and want to have a go at the CSS method, just leave a comment here and I’ll get you the instructions.
If you have a go at any of these methods, let me know about your experience. Don’t forget to check out the other articles in the A2ZofBookBlogging series page.
12 thoughts on “3 Ways To Add Colour To Your Book Blog”
Great tips! I have gone into battle to change a font colour recently & I’m now wishing I had found your blog first 😃
Sound advice. Thank you for sharing it.
After years of working in print design I want to say DONT change your text colour: black on white offers the best contrast and makes it easier to read. Also, it’s a bit pointless tinkering with blog design these days as increasing numbers of people read mobile-friendly versions that strip out all the design elements. Ditto if you use the WP app.
Thanks for the input Kim and sharing your expertise. I’ll bow to your superior knowledge about the mobile design aspect. Agree with you that black on white is best. But some themes have a grey text which is not easy to read so that would be one case to change.
Very helpful information. Thanks. But may I play devil’s advocate a bit? I offer the same warning that we used to see a lot when publishing programs first came out on home computers: Just because you CAN change fonts and colors all over the document doesn’t mean that you SHOULD do so. Choose one or two custom colors and use those sparingly throughout the blog.
Absolutely agree Mary – I should have added a note to the effect that you do need to be judicious when using colour. Unfortunately I’ve seen a few blogs which have gone far too much down the rainbow effect path
Helpful hints – thank you! My plan is free and has limited options, so I can’t see me getting very fancy!
Sometimes it really does pay to keep it simple
Thanks for the detailed tutorial! My main tip is to WRITE DOWN THE CUSTOM COLOR CODE!!! Once you close the session, you will need that custom color code for any future editing or revision. I found this out the hard way when I had to redo all the color in a post the next time I opened it to continue working. I have started writing the custom color code right into my blog calendar so I will always have a record of it for future updates. Color in the block editor is ridiculous because of needing to reselect the color every time you go to a new paragraph block….whereas in classic the color you select stays visible in your tool bar until you change it. Also the default colors are only maybe a third of what is available in classic. Since I like to use color a lot I’ve gone back to classic for now! Great post! 🙌
Yep, I have my colour code documented too because I can never remember it. Interesting that you find the default colours more limited than in classic – maybe the theme you are using isn’t fully compatible with Gutenburg (mine isn’t)
I suspect my theme isn’t compatible because I’ve had it for 3 years and it might have been old when I chose it too. I need/want to change themes but I’m afraid!
I’m dreading having to change and have put it off now for about three months. But it really really needs to be done