Categories
Coding

How to Change the Colors on the Twenty Twenty Theme With Hex Codes, Using CSS

How to change the hex colors for the Twenty Twenty Theme, on links, buttons and accents.

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.

How it would look like by using the property color on “a”

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 list of selectors, I ask you to 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 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. Check out my Coding Toolkit to learn more.

/* -------------------------------------------------------------------------- */
/*	3. Hex colors
/* -------------------------------------------------------------------------- */
.primary-menu a,
/*Categories in Single Posts*/
.entry-categories a {
	color:#0066cc!important;
}

/*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 "Span"*/
.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;
}

/*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;
}

/*Quotes*/
blockquote {
	border-color:#0066cc;
}

And, that’s a wrap! Wasn’t that fun?

If you’re following this blog only on WordPress, you’re gonna miss a lot of goodies! Subscribe to this tutorial to get a cheat sheet, updates, free stuff and so we can keep in touch! I’d like to see how you’re shinning with your blog 😉

By Laly

B.Ed, Lawyer, Writer. I write, I code, and I take pictures. My identity is unknown, I have #ADHD superpowers and I'm from Jupiter. Also, I blog about the boys in the band 🎧 at nkotbtheblog.com.

Follow Laly on WordPress.com

4 replies on “How to Change the Colors on the Twenty Twenty Theme With Hex Codes, Using CSS”

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 😉)

Any thoughts?