How To Edit Colour of Line in Quote Block

  • Unknown's avatar
    phoebekristina · Member ·

    Hi there,

    Just wondering how to edit the colour of the line on the left in the quote block and can I make it 2 lines side by side (like this || ) with different colours (aqua and dark blue preferably with Hex Codes #3337FF and #41F3EE). I have cleared my browser cache and tried this in the Additional CSS:

    [code lang=css]
/* Add custom CSS to the Quote block */
.wp-block-quote blockquote {
position: relative;
padding-left: 20px;
}
    /* Add the left line */
.wp-block-quote blockquote::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background-color: #3337FF; /* Aqua color */
}
    /* Add the right line */
.wp-block-quote blockquote::after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 4px;
height: 100%;
background-color: #41F3EE; /* Dark blue color */
}
[/code]

    Thanks so much for your help in advance!

    WP.com: Yes
    Jetpack: No
    Correct account: Yes

    The blog I need help with is: (visible only to logged in users)

  • supernovia · Staff ·

    Hi @phoebekristina, I’d try with the Styles feature first, since you should be able to handle the colors there. You’d pick the Quote Block and set it up so it’s the same across the site. Then when you’ve got that, let us know and we can fix border styles if needed. Cheers!

    WP
    Styles
    in WordPress.com Support
    8 min read
    Using Styles, you can customize the design of your site with different colors, typography settings, and layout options. This guide will show you how to use Styles to ensure a cohesive design across your site. This feature is available on sites with our WordPress.com Premium, Business, and Commerce plans. If your site has one of our legacy plans, it is available on the Pro plan. Access
  • The topic ‘How To Edit Colour of Line in Quote Block’ is closed to new replies.