[Resolved] Customizing blockquote

Home Forums Support [Resolved] Customizing blockquote

Home Forums Support Customizing blockquote

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1545729
    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 :))

    #1545770
    David
    Staff
    Customer Support

    Hi there,

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

    #1548047
    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!

    #1548100
    Elvin
    Staff
    Customer Support

    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?"

    #1548159
    Colin

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

    #1548185
    Elvin
    Staff
    Customer Support

    No problem. Glad it works for you. 🙂

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

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.