Set primary colour as hex value – Twenty Twenty theme

  • Unknown's avatar
    stonenick · Member ·

    I was wondering if it’s possible to specify the primary color of the Twenty Twenty Theme exactly using a hexadecimal value? The only option provided in the customiser is a slider. The other colors can be set precisely.

    I could override the color wherever it appears in the CSS (which on a quick scan seems to be about 6 times), but wondering if there is a simpler solution?

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

  • Unknown's avatar
    aisajib · Member ·

    Hi there!

    The Twenty Twenty theme doesn’t have the option to specify a hex value for the Primary Color, but it’s possible to change it with some custom CSS code.

    As you have the WordPress.com Premium plan on your site, you can add the following CSS in the Customizer’s Additional CSS tab. Please make sure the Primary Color in the customizer is set to “Default” for the CSS to work. 

    

/* change primary color - 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: #006088;
}
 
/* change primary color - social menu  */
.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: #006088;
}
 
/* change primary color - button outline  */
.is-style-outline .wp-block-button__link:not(.has-text-color) {
  color: #006088;
}
 
/* change primary color - button fill  */
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,
#site-content #infinite-handle span button, 
#site-content #infinite-handle span button:hover, 
#site-content #infinite-handle span button:focus {
  background-color: #006088;
}
 
/* change primary color - text and link accent  */
.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: #006088;
}
 
/* change primary color - quote block */
blockquote, 
.border-color-accent, 
.border-color-accent-hover:hover, 
.border-color-accent-hover:focus {
  border-color: #006088;
}

    As you may have noticed, the color #006088 is used in the CSS code above. You’ll want to update all instances of that with the hex value of your choice.

    Feel free to let us know if there’s anything else you need and we’ll be happy to help.

  • Unknown's avatar
    stonenick · Member ·

    Thanks @aisajib that’s super helpful. I tweaked a bit of the above, but that was just what I needed. Thanks heaps :-)

  • The topic ‘Set primary colour as hex value – Twenty Twenty theme’ is closed to new replies.