[Resolved] Customizing blockquote

[Colin]

Hi, I’d like to customize the blockquote to look like this:
https://www.skillpacks.com/wp-content/uploads/2020/11/quotes-formatting.jpg

I don’t need exactly the same, but just something that is more distinctive than the standard blockquote (and the colors need to be adjustable to my site).

Any advice appreciated and a code snippet would be beautiful :))

[David]

Hi there,

do you have a Post with a Block Quote set up so i can take a look at what we can do?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Colin]

Hi, thanks for getting back to me. I’m not sure I fully understand, but if you just need some examples of posts, you can see them here:
https://www.skillpacks.com/dodar-ooda-loop-decision-making/ (there’s a quote after 1st para).
https://www.skillpacks.com/chinese-proverbs-and-quotes-about-listening/ (full of quotes!)
https://www.skillpacks.com/how-to-request-feedback-from-coworkers/ (towards the bottom)

I converted from Divi and they all seem to have adopted the standard blockquote format. I’d like to be able to convert them into a more impactful format (my earlier image is reference). Ideally without having to edit each individual article!

Let me know if you need anything more.

Any help would be great!

[Elvin]

Hi,

You can try this CSS:

blockquote {
    background-color: rgba(242,244,255,1);
    border-radius: 10px;
    border: none;
}

blockquote::before {
    content: "“";
    position: absolute;
    color: rgba(228,236,247,1);
    font-size: 139px;
    z-index: 1;
    font-family: 'Arial';
    line-height: 1;
}

blockquote p {
    position: relative;
    z-index: 2;
}

You can adjust the background-color: rgba(242,244,255,1); and smart quotation mark’s color: rgba(228,236,247,1); to your preference.

You can also change the quotation mark’s size and typeface through the font-size & font-family property.

A wise man once said:
"Have you cleared your cache?"

[Colin]

Hi Elvin, that is beautiful code, thank you!!!

[Elvin]

No problem. Glad it works for you. 🙂

A wise man once said:
"Have you cleared your cache?"

[Author]

Posts