[Support request] Blockquote Symbol “ Before Quote

Home Forums Support [Support request] Blockquote Symbol “ Before Quote

Home Forums Support Blockquote Symbol “ Before Quote

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1365425
    Guilherme Lacerda

    Hi!

    How can i add the Blockquote Symbol Before Quote?

    Example:

    #1365449
    David
    Staff
    Customer Support

    Hi there,

    try this CSS:

    blockquote {
        position: relative;
        padding-top: 70px;
    }
    blockquote:before {
        content: "\201d";
        font-family: symbol;
        font-size: 120px;
        font-style: normal;
        position: absolute;
        top: 0;
        left: 20px;
        color: #01b1cd;
    }
    #1365473
    Guilherme Lacerda

    Don’t worked. =(

    #1365476
    David
    Staff
    Customer Support

    Can you disable the SG Optimizer so i can see whats conflicting.

    #1365485
    Guilherme Lacerda

    Ok. Disabled. =)

    #1365489
    David
    Staff
    Customer Support

    In your CSS you need to include:

    blockquote {
        border-left: 5px solid #01b1cd;
        background-color: #1a1a1a;
        color: #ffffff;
        border-radius: 1px;
        /* Add the following properties */
        position: relative;
        padding-top: 70px; 
    }
    #1365493
    Guilherme Lacerda

    Need some fixes, check it:

    The code:

    #1365528
    David
    Staff
    Customer Support

    Hmmm… not seeing it on my browsers – but those HTML symbols are a pain.
    Do you have an image of the quote symbol we could add in its place?

    #1365533
    Guilherme Lacerda

    Hmmm… not seeing it on my browsers – but those HTML symbols are a pain.
    Do you have an image of the quote symbol we could add in its place?

    SVG FILE
    https://marketingconteudo.com/wp-content/uploads/2020/07/writer.svg

    PNG FILE
    https://marketingconteudo.com/wp-content/uploads/2020/07/writer.png

    I prefer the svg file. 🙂

    Thanks a lot for the help.

    #1365547
    David
    Staff
    Customer Support

    Try this:

    blockquote {
        border-left: 5px solid #01b1cd;
        background-color: #1a1a1a;
        color: #ffffff;
        border-radius: 1px;
        padding-top: 50px;
    }
    
    blockquote:before {
        content: '';
        display: block;
        width: 40px;
        height: 40px;
        background-image: url( https://marketingconteudo.com/wp-content/uploads/2020/07/writer.svg);
        background-size: contain;
        margin-top: 10px;
    }
    #1365556
    Guilherme Lacerda

    THANKS! WORKS. =)

    I changed the style to a minimal design:

    Thanks again.

    #1365581
    David
    Staff
    Customer Support

    Awesome – looks great 🙂

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