Change background color of one quote block

metbaseball · Member · Jan 1, 2022 at 11:14 pm
Copy link

Add topic to favorites
Is there a way to change the background color of just one quote block in a post without changing the background color of any other quote block either in that same post or in a different post?

The blog I need help with is: (visible only to logged in users)
kokkieh · Staff · Jan 3, 2022 at 5:14 am
Copy link
Hi there,

Edit the post, and click on the block. In the editor sidebar, expand the Advanced tab. There you can add a custom CSS class to that specific block. I’d recommend something unique, but re-useable, e.g. quote-background-blue, substituting the actual color you’ll be using. That way if you later want to change another block to that color, you can just add the same class to it without needing to add new CSS code.

Next, go to the Customizer ->CSS. The following CSS should do the trick:
```
.quote-background-blue {
  background-color: blue;
}
```
metbaseball · Member · Jan 3, 2022 at 2:37 pm
Copy link
I put this in a custom CSS class specific to my blog —

quote-background-blue

and then I put this in the Customizer > CSS —

.quote-background-blue {
background-color: blue;
}

but when I previewed my draft, the blocked text did not have any background. I removed it from my draft as I wanted to find out what I might have done wrong before proceeding further.

Shouldn’t the background color appear in Preview mode?
fstat · Staff · Jan 3, 2022 at 3:47 pm
Copy link
What’s the post or page draft you’re working on so I can have a look?

Also, make sure you’re adding that CSS class correctly to that specific block. Here’s how to do it:

https://wordpress.com/support/adding-additional-css-classes-to-blocks/
metbaseball · Member · Jan 3, 2022 at 4:48 pm
Copy link
Here is the page:

I got the background color to work, but now the side edges of the background box are against the side edges of the text lines. Is there a way to add some space between where each text line begins and ends and where each line’s background color begins and ends?

My theme is Col.
supernovia · Staff · Jan 3, 2022 at 11:07 pm
Copy link
Hi there,

Is there a way to add some space between where each text line begins and ends and where each line’s background color begins and ends?

Sure thing. Try this instead. And you can decorate it up more as you’d like with borders or whatever else suites you. We have several articles on CSS here if you want to do some tinkering.

.quote-background-blue {
background-color: blue;
padding: 1.5em;
}

Also, you might experiment with converting to a pullquote block (click on the block, then look at the block type in the upper left of the block toolbar; select pullquote) to see if you like those options better.
staff-totoro · Staff · Jan 3, 2022 at 11:08 pm
Copy link
Hi there,

I see you used some CSS to make that change. If you use this code instead of the code you have now, it will add spacing (padding) within the box so that the text is not all the way to the edge as it is now:
```
/* quote block bkgd color */
.quote-background-ltcyan {
	background-color: #E0FFFF;
	margin: 0 0 20px;
	padding: 20px;
}
```
Hope that helps. Please let us know if you have any more questions.
metbaseball · Member · Jan 4, 2022 at 3:15 pm
Copy link
Though I changed the padding to only 10 px it added more than that to the bottom of the quote block. Why?
```
/* quote block bkgd color */
.quote-background-ltcyan {
	background-color: #E0FFFF;
	padding: 10px;
}
```
How can I fix it so the padding is even all around. I like the padding on the top and on the sides.

My theme is Col.
The webpage in question is here.
viawormholes · Member · Jan 4, 2022 at 5:18 pm
Copy link
Your problem lies on the margins, not the padding, which for this element you created are 0px on top and on bottom. Try editing your css code by adding something like this:
```
/* quote block bkgd color */
.quote-background-ltcyan {
	background-color: #E0FFFF;
	padding: 10px;
        margin-bottom: 10px;
}
```
You can change all other margins and paddings to your liking of course.

Regards,
Dimos
metbaseball · Member · Jan 4, 2022 at 6:48 pm
Copy link
The bottom “margin” seems the same. as before. It is still much larger than the other margins.

Does that have anything to do with the space at the bottom of a quote block for a citation? I added a citation so you can see how that affects the bottom spacing, but not all my quote blocks have citations, so do not need any extra space that might be allowed for a citation.
viawormholes · Member · Jan 4, 2022 at 6:58 pm
Copy link
I see you used the code I provided. This is how it displays in my Chrome browser:

Link

Do you get a different result? I am confused when you say that the margin between the cyan box and the photo is larger than other margins, in my screenshot it clearly is not.
metbaseball · Member · Jan 4, 2022 at 8:43 pm
Copy link
Without the added citation, the bottom margin extends from the bottom line of the body text to the top of the citation I added. I just removed the citation so you can see the difference.
viawormholes · Member · Jan 4, 2022 at 10:38 pm
Copy link
Hello again!

I’m sorry, but I am still not sure what you wish to achieve. Are you trying to make the cyan “box” end where the text ends? Something like this? Photo

If that’s the case, then a padding of 0px is what you need for the bottom, so your code becomes:
```
/* quote block bkgd color */
.quote-background-ltcyan {
	background-color: #E0FFFF;
	padding: 0px;
        margin-bottom: 10px;
}
```
If you want to specify paddings for top right bottom and left seperately you can do it this way and play with the numbers until you get it right:
```
/* quote block bkgd color */
.quote-background-ltcyan {
	background-color: #E0FFFF;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
        margin-bottom: 10px;
}
```
or combine the 4 properties into one line with:
```
/* quote block bkgd color */
.quote-background-ltcyan {
	background-color: #E0FFFF;
	padding: 0px 0px 0px 0px;
        margin-bottom: 10px;
}
```
where the 1st number is padding-top, the 2nd is padding-right, 3rd is padding-bottom and 4th is padding-left. Play with the numbers and I am sure you will get it as you want.

No items found.