Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1365701

    How do I create a custom blockquote CSS?

    I want it to look like the testimonial box and for the box width to follow the width of the text.

    I would also like to have the option to adjust the padding, background color and rounded corners.

    Thanks!

    #1365734

    Hey Samuel,

    I’m not sure I fully understand your intentions. Do you want a blockquote tag to look like the content in the page you linked to? If so, then why would you need two elements which look the same?

    Best regards,
    Rikard

    #1365749

    I’m gonna use a different color so they won’t look the same.

    #1365754

    Hey,

    You can try adding CSS class to your Blockquote as following

    
    <blockquote class="custom-bq">
    Here goes your text
    </blockquote>
    

    and then add following code to bottom of Quick CSS field in Enfold theme options > General Styling tab and adjust as needed

    
    #top blockquote.custom-bq {
      border: none;
      background-color: #e2e2e2;
      padding: 20px 40px;
      color: black;
      border-radius: 5px;
    }
    

    Regards,
    Yigit

    #1365788

    Thanks!

    • This reply was modified 2 years, 1 month ago by Samuel.
    #1365798

    How do I make the width of the box follow the width of the text? Thanks.

    #1365806

    Hi,

    Please add following code to Quick CSS field in Enfold theme options > General Styling tab

    
    blockquote.custom {
      width: max-content;
    }
    

    Best regards,
    Yigit

    #1365993

    It works! Thanks!

    #1366008

    Hi,

    Great, I’m glad that Yigit could help you out. Please let us know if you should need any further help on the topic, or if we can close it.

    Best regards,
    Rikard

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