Custom CSS For Pullquote element

  • I am looking to style the default WordPress Pullquote.

    I need to customize it using Custom CSS since we have hundreds throughout the website and I want to keep them all consistent.

    I’ve tried targeting a few different classes, the blockquote element itself, and used !important but I can’t seem to get it to change.

    Does anybody know the proper CSS needed to target the grey pullquote elements throughout the page linked?

    Thank you very much!

    • This topic was modified 2 years, 11 months ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not an Developing with WordPress topic

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • Moderator bcworkz

    (@bcworkz)

    The solution depends on what rules you want to apply, as different rules are applied to different elements within the pull quote. Use your browser’s element inspector tool to learn what rule is applied to which elements. Copy the rule you want to change to the Additional CSS customizer section and edit the rule as desired. Add new rules to the bottom of any existing CSS in Additional CSS section.

    For example, the pull quote background color is currently styled with

    :root .has-cyan-bluish-gray-background-color {
    background-color: #abb8c3;
}

    Change #abb8c3 to the desired color. This will affect all elements site-wide using the .has-cyan-bluish-gray-background-color class attribute. You can more specifically target only elements on a specific page by including a post ID selector. For example

    .postid-46260 figure .has-cyan-bluish-gray-background-color {
    background-color: aliceblue;
}

    If such an added rule seems to have no effect, it may be due to caching. Flush any caches that may be involved after making such a change, both client side and server side.

Viewing 1 replies (of 1 total)
  • The topic ‘Custom CSS For Pullquote element’ is closed to new replies.