comments 10

Colour Backgrounds behind quotes

Colour backgrounds behind quotes in Gutenberg

If you use Gutenberg and you want add a splash of colour behind a paragraph of text, you go over to the sidebar and you will see two tabs.

One says Colour Settings and the other says Advanced.

When you open the Colour Settings you see two palettes of colours.

You can change the colour of the text and/or the colour of the background to the text.

And you can either choose one of the colours that are there or you can click on the multi-coloured circle at the end of the swatch of colours and make any colour you want.

Here is a short paragraph with the background colour a nice rose pink.

But if you make a quote, the Colour Settings tab disappears, leaving only the Advanced tab.

If you open the Advanced tab you will see that it says ‘Additional CSS Class’.

I wondered what it meant until I realised it was an invitation to create a CSS class.

(Actually, the ‘until I realised’ took quite a while…)

The little that I know about classes is that you should name them something that is not likely to have been used elsewhere in the main code. So I named it ‘quote-thing’. Catchy, eh?

Stage 2 was to add the CSS to the CSS section in the Customiser. It has to refer to the class and it has to tell the class what to do. So I said it should make the background a specific colour (#ebf2f5)

And I wanted to put a bit of padding around the quote so that it didn’t look like it was sitting in a straightjacket.

Here is the code:

/* background colour for quote */
.quote-thing {
	background: #ebf2f5;
	padding-top: 15px;
	padding-right: 15px;
	padding-bottom: 15px;
	padding-left: 15px;
}

You can see it in the duck-egg blue background colour to the quote that begins ‘RICHARD JEFFERIES AUTOBIOGRAPHY, The Story of My Heart…’ in the previous post Spes Phthisica and the Heights Of Consumption.

10 Comments

        • That’s fun in the loosest sense of the word 😉

          I keep reading the Gutenberg invented the printing press. As I understand it, he didn’t do that at all. There was printing long before he appeared on the scene. What he did was to introduce moveable type – individual letters that could be stuck in a rack to form a page and then switched around to form a different page.

          Like

        • reb

          I used to find HTML/CSS fun in the literal meaning of the word. Lost it, at some point, and now it’s too late.

          I only had a vague idea of Gutenberg … that it was _something_ about printing.

          Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.