Black Friday Sale! Get up to $40 off GP Premium!Learn more

[Resolved] Quotes

Home Forums Support Quotes

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #487084
    Michal

    Hello,

    Any idea of how to get the same styling effect of quotes iniside generatepress as here: https://demo.proteusthemes.com/readable/2014/01/04/woow-post-without-image-also-looks-great/

    I am talking about this (to be exact):
    https://d.pr/i/rDxrE

    #487235
    Leo
    Staff
    Customer Support

    Hi there,

    For border, try this CSS:

    blockquote {
        border-left: 4px solid #51ab6d;
        padding: 10px 30px;
    }

    Second one is a bit tricky but here is their HTML:

    <blockquote class="blockquote__alternative" style="font-style: italic;color: #40454a">
        <p>If we could sell our experiences for what they cost us, we’d all be millionaires.</p>
            <p style="color: #9a9a90">– Abigail Van Buren</p>
    </blockquote>

    and CSS:

    .blockquote__alternative {
        text-align: center;
        border-left: none;
        padding: 10px 30px;
        position: relative;
    }
    @media (min-width: 768px) {
        .blockquote__alternative {
            padding: 10px 75px;
    }
    @media (min-width: 768px) {
        .blockquote__alternative::before {
            left: 0;
            font-size: 100px;
        }
    }
    .blockquote__alternative::before {
        position: absolute;
        font-family: "Georgia", serif;
        content: open-quote;
        left: -15px;
        top: -30px;
        color: #dcdddd;
        font-size: 80px;
        font-weight: bold;
    }
    #490265
    Michal

    thanks a lot!:)

    #490609
    Leo
    Staff
    Customer Support
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.