Having trouble customizing the accent color of twenty twenty

  • Unknown's avatar
    billdayuxdesign · Member ·

    I am trying to change the accent color on the Twenty Twenty. I don’t want to have to manually override each instance. So far I have tried to add the following (from another similar thread) to the Additional CSS with no luck:

    .color-accent, .color-accent-hover:hover, .color-accent-hover:focus, :root .has-accent-color, .has-drop-cap:not(:focus):first-letter, .wp-block-button.is-style-outline, a {
    color: #E45E32;
    }

    When I preview it still shows up as the site default red.

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

  • Unknown's avatar
    billdayuxdesign · Member ·

    FYI – This is for an unpublished site billday.work tied to this same account.

  • supernovia · Staff ·

    Hi! I’d recommend viewing your CSS file here. Do a search for the red color #cd2653, and you’ll see all of the elements it’s been applied to. You can copy those and put in the new color as you like.

    I hope this helps!

  • Unknown's avatar
    billdayuxdesign · Member ·

    Thanks.

    This addressed half of the issue. It helped with areas where i change the color to the “accent” using the text tool, but it seems to be missing the areas where the accent color is used as a link, eventhough i included all of the CSS that captures the since it was using #cd2653.

    And I am also seeing a different between how it behaves on a post vs a page. I must be missing something around links between those two.

  • kokkieh · Staff ·

    Hi there,

    You were on the right track with the CSS you tried, as that’s the selector for some links appearing on the site, but it seems that for some other links this theme uses a different selector.

    This code combines the two:

    /* change link color */
.color-accent, .color-accent-hover:hover, .color-accent-hover:focus, :root .has-accent-color, .has-drop-cap:not(:focus)::first-letter, .wp-block-button.is-style-outline, a, body:not(.overlay-header) .primary-menu > li > a, body:not(.overlay-header) .primary-menu > li > .icon, .modal-menu a, .footer-menu a, .footer-widgets a, #site-footer .wp-block-button.is-style-outline, .wp-block-pullquote::before, .singular:not(.overlay-header) .entry-header a, .archive-header a, .header-footer-group .color-accent, .header-footer-group .color-accent-hover:hover {
	color: #E45E32;
}

    On a sidenote, your Premium Plan gives you access to live chat support where you can get help with CSS modifications like this in real time. You can access chat 24 hours a day, Monday to Friday, by clicking the help icon bottom-right on the My Sites dashboard. Over weekends or if no one is available to chat, that will let you submit a private email support ticket instead.

  • Unknown's avatar
    billdayuxdesign · Member ·

    That did it!

    Thanks.

    Also, I didn’t realize I had access to the live chat. Double thanks to both of you.

  • The topic ‘Having trouble customizing the accent color of twenty twenty’ is closed to new replies.