On my first post on how to customize the Twenty Twenty Theme only with CSS, I mentioned two common questions you’ll probably have: one, how to display thumbnails on the front page and, two, how to change the hex color for links, buttons and accents manually. Since we took care of the first task, it’s time to put our own dye to our blogs.
If you check the support forum, you’ll see there are a couple of threads about this topic; still, no one has posted a full list of the selectors we need to achieve this, and some of the advice don’t work. So, first, we’ll quickly check what not to do, and then head on to the fun.
Things That Won’t Work
At one of the threads, a user says that if we want to change the color of the links, all we’d need to do is to add to our CSS:
a {
color:#0066cc!important;
}As you can see in the following screenshot, that won’t work in the Twenty Twenty Theme, because there are links (such as the ones in the social links menu, and the buttons) that use the accent on the background-color property instead of the color property; plus, doing so will also affect the links in your admin bar.
On another thread, someone mentioned that using .color-accent is enough; it didn’t work for me, not even using the !important rule.
Selectors to Change Hex Colors on the Twenty Twenty Theme
Before heading on to the list of selectors, bear in mind that if you use plugins that add elements to your site (such as WooCommerce, with its own buttons) you’ll need to change those too.
Here are the selectors I could find; I grouped them in five sections and left comments to guide you. In the following snippets, I used a random blue as an example.
Note: If you’re codenewbie, everything between
/**/in CSS, it’s a comment and can be deleted; we use it to guide ourselves and everyone who wants to learn from our snippets.
Index:
- Hex Colors for Active Elements That Need the Important Rule
- Hex Colors for Other Active Elements
- Hex Colors for Elements That Use the Background-Color Property
- Hex Colors for Elements That Use the Border-Color Property
- Hex Color for Paginated Posts
- Hex Color for Previous and Next Posts
Hex Colors for Active Elements That Need the Important Rule
/* -------------------------------------------------------------------------- */
/* 3. Hex colors
/* -------------------------------------------------------------------------- */
.primary-menu a,
/*Arrows in Desktop*/
.primary-menu span.icon,
/* Text in Call to action buttons */
.is-style-outline .wp-block-button__link,
/*Categories in Single Posts*/
.entry-categories a {
color:#0066cc!important;
}Hex Colors for Other Active Elements
/*The Menus*/
.expanded-menu a,
.mobile-menu a,
.footer-menu a,
/*Widgets*/
.widget-content a,
/*The Drop Cap*/
.has-drop-cap:not(:focus)::first-letter,
/*Latest Posts Block*/
.wp-block-latest-posts a,
/*Archives Block*/
.wp-block-archives a,
/*Categories Block*/
.wp-block-categories a,
/*Latest Comments Block*/
.wp-block-latest-comments a,
/*Calendar Block*/
.wp-block-calendar a,
/*File Block*/
.wp-block-file a,
/*Archive Page Title*/
.archive-title .color-accent,
/*Links in Single Posts; If we don't use P it will affect the buttons*/
.entry-content p a,
/*Pagination in Single Posts*/
.pagination-single a {
color:#0066cc;
}Hex Colors for Elements That Use the Background-Color Property
/*Social Menu*/
.social-menu a,
/*Groups with accent bg*/
:root .has-accent-background-color,
/*Button Block*/
.wp-block-button__link,
/*Reply Comments*/
.comment-reply-link,
/*Input buttons such us "Post Comment"*/
input#submit,
input.search-submit {
background-color:#0066cc;
}
/*File Block Button*/
.wp-block-file__button {
background-color:#0066cc!important;
}Hex Colors for Elements That Use the Border-Color Property
/*Quotes*/
blockquote,
/*Call to action buttons border*/
.is-style-outline .wp-block-button__link {
border-color:#0066cc;
}Hex Color for Paginated Posts
/* Paginated posts: current*/
span.post-page-numbers,
/* Paginated posts: not current*/
span.page-number,
/* Paginated posts: make sure the underline has the same color*/
.post-nav-links > * {
color:#0066cc;
}
/* Adjust color of label 'Pages' if needed*/
.post-nav-links > span.label {
color:#000000;
}Hex Color for Previous and Next Posts
/* Next and Previous Post */
.next-post,
.previous-post {
color:#0066cc;
}And, that’s a wrap! Wasn’t that fun?
Updated: Jan, 2023
you’re the best Atty!
Thank you! I’m glad you found it useful!
Share your blog when it’s ready!
Really helpful, thank you. I added in span.icon to change the drop down arrows on desktop
Hey Jon! Welcome! Sorry it took me so long to reply.
Thank you so much for your input! I missed that!
I’m going to add it to the post ?
Stay safe! (and stick around ?)
Hi Laly. Awesome! But I need help finding the css lines for also changing the pagination links (newer and older posts, and page number), can you help? Thank you.
Hi! Thank you ? Sure, and done! LOL
I updated the post
Happy New Year! And welcome ?
This has been by far the most helpful article on the subject, thank you for that! The only thing missing for me is buttons. I’m a total newbie so I’m not sure what they’re called, but I’m guessing perhaps call to action buttons? Mine have a border and text in the accent color, the button itself is background color. None of the snippets you posted seem to affect border and text, the first one you said doesn’t work actually works for me, and Twentig provides an option to choose a hex code for the accent color, but it seems a little overpowered for just this one purpose. I’d like to use your CSS snippets, an idea which one would work for my button colors?
Thank you so much! And welcome! ?
I updated the post, but I added the selectors separately (to keep the order)
So, what you need is this:
/*Call to action buttons border*/.is-style-outline .wp-block-button__link {
border-color:#0099ff;
}
/* Text in Call to action buttons */
.is-style-outline .wp-block-button__link {
color:#0099ff!important;
}
Saludos!
Great post, I also included “.has-accent-color”
It doesn’t work.
That’s the whole point of this post.
.color-accent, .has-accent-color, .has-primary-color, won’t work because the author made it so the palette, meaning the contrast between the color of the elements and the background, could be accessible to everyone.
At the theme details, he wrote, “The colors of the elements on your site are automatically calculated based on the background colors you pick. This ensures that the color contrast is always high enough to be accessible to all visitors.”
Thank you and welcome, btw ☺️
Laly! Great work!
Many designers have given up trying to do something like this. You’ve done better for everyone. Incredible code optimization.
Could you tell me about the root directives? What can be done to change them? Thanks!
Thank you! but it wasn’t … science 🙃
About the root directives I haven’t written anything in this post; could please be more specific?
I stick to CSS snippets in these tuts
But stay tuned! I’m about to launch courses