plugins - Wordpress custom blockquote with black background & white text?

I have no idea if I'm in the right place, but anyone help me customise my site? My current wordpress theme has blockquotes that look basically identical to regular (bold) text. Could I use CSS Additions (or create a custom block) so that all my wordpress quotes look just like the black example right at the bottom of this page? I don't want to use the addon itself because it slows down my whole blog a lot. I will only ever use this kind of blockquote for consistency, so it would be better for me if I just had a standard block I could use. (I don't need any of the hundreds of customisation options that plugin gives.) The block or bock-quote would need to be responsive if possible.

Thanks for your help!

I have no idea if I'm in the right place, but anyone help me customise my site? My current wordpress theme has blockquotes that look basically identical to regular (bold) text. Could I use CSS Additions (or create a custom block) so that all my wordpress quotes look just like the black example right at the bottom of this page? I don't want to use the addon itself because it slows down my whole blog a lot. I will only ever use this kind of blockquote for consistency, so it would be better for me if I just had a standard block I could use. (I don't need any of the hundreds of customisation options that plugin gives.) The block or bock-quote would need to be responsive if possible.

Thanks for your help!

• plugins
• css
• html

Share Improve this question edited Jan 31, 2019 at 10:51 fuxia♦ 107k3939 gold badges255255 silver badges461461 bronze badges asked Jan 31, 2019 at 10:39 HadashiHadashi 1

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Are you using a child theme? If so, look in your child theme's style.css file and find the blockquote styles and change the code to something like below, or add the custom CSS into any additional CSS areas that may be included in your theme's Customizer options to override the stylesheet.

To take inspiration from the referenced example, you can do something like...

blockquote {
  background-color: black;
  color: white;
  border-radius: 4px;
  font-size: 2rem;
  font-style: italic;
}

Note that the code above doesn't include the quote character in the background. There's a couple of approaches to accomplish that—either using a background-image + background-position, or using a ::before pseudo-element (depending on what icon fonts you're using).