How to Customize the Blockquote Element

The blockquote element in the Total theme is easy to customize using the WordPress Customizer. You can choose between two popular styles to suit your site’s design.

The default style includes a side quote icon, while the alternative style uses a side border for a cleaner look.

To begin customizing your blockquote, go to: Customize > Global Styles > Blockquote.

From there, you’ll be able to adjust a variety of design settings, including:

• Background color
• Text color
• Padding
• Side border width
• Border color

How to Add a Closing Quote Icon

If you’re using the default blockquote design, which only includes an icon at the beginning, you can add some custom CSS to also show a closing quote icon at the end.

Here’s an example:

blockquote p:last-of-type::after {
    content: "";
    vertical-align: bottom;
    transform: scaleX(-1);
    display: inline-block;
    margin-inline-start: 10px;
    height: var(--wpex-blockquote-icon-size);
    width: var(--wpex-blockquote-icon-size);
    background-color: currentColor;
    opacity: .6;
    -webkit-mask-image: var(--wpex-blockquote-icon);
    mask-image: var(--wpex-blockquote-icon);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}