Twenty Twenty CSS – Change Primary Color

  • Unknown's avatar
    vitoanastasia · Member ·

    Hi all,

    I know I can use the color slider to change the Primary color for links but I want it to match my branding. What class or id do I need to change to make sure the links and such can be customized?

    It’s currently set to the default (pink).

    https://mocolocal.blog

    Thanks!

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

  • kokkieh · Staff ·

    Hi there,

    For links, use:

    .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: blue;
}

    For the menu:

    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: blue;
}

    For icons and buttons in your footer:

    .social-icons a, #site-footer button:not(.toggle), #site-footer .button, #site-footer .faux-button, #site-footer .wp-block-button__link, #site-footer .wp-block-file__button, #site-footer input[type="button"], #site-footer input[type="reset"], #site-footer input[type="submit"] {
	background-color: blue;
	color: white;
}

    And for buttons in your content:

    button:not(.toggle), .button, .faux-button, .wp-block-button__link, .wp-block-file .wp-block-file__button, input[type="button"], input[type="reset"], input[type="submit"], .bg-accent, .bg-accent-hover:hover, .bg-accent-hover:focus, :root .has-accent-background-color, .comment-reply-link {
	background-color: blue;
}

    Substitute the color values with the actual colours you want in each case.

  • Unknown's avatar
    vitoanastasia · Member ·

    Thank you! I’m all set.

  • The topic ‘Twenty Twenty CSS – Change Primary Color’ is closed to new replies.