5 Simple CSS Hacks to Customize the Twenty Twenty Theme

Today I was at Twenty Twenty Forum and I found out that you guys have more questions and ideas to customize the Twenty Twenty theme. And since my ADHD brain is always eager to help, here are my answers without any further introduction.

How to Remove “Category:” and “Tag:” From the Archive’s Pages

Easy peasy _^[1]

.archive-title .color-accent {
	display:none;
}

How to Set Different Colors for the Header and Footer Section

I covered months ago how to change the hex colors of theme, but it never occurred to me to do this: to have one background color for the header and another one for the footer.

There’s one thing to bear in mind here: the Twenty Twenty Theme has two footer sections, sort of speak; those are: a) the footer widget area, and b) the site info area, the one at the very bottom.

So, here are the selectors you need:

#site-header,
#site-footer {
	background-color:#222;
}

.footer-nav-widgets-wrapper {
	background-color:#ddd;
}

Unlike what I replied to @camiloaccr, I set here a different color for the widget area, because I believe it looks better with a lighter color.

If you want all the sections with same color, simply list the selectors; like this:

#site-header,
.footer-nav-widgets-wrapper,
#site-footer {
	background-color:#222;
}

How to Center the Social Menu

This is a nice idea if you are not going to display a Footer Menu. The selector you need is .social-icons and since it’s using flex all we gotta do is write the following:

.footer-social-wrapper .social-icons {
	justify-content:center;
}

I wrote this in response to @ismolik’s topic.

How to Change the Color of the Drop Cap

This one never gets old! I mentioned it before, but here it goes again in response to @silaspayao’s topic:

.has-drop-cap:not(:focus)::first-letter {
	color:#222;
}

How to Hide the Top Menu from an Inner Page

This is a good one! The user @hopitix wants to have a landing page with no menu; I couldn’t leave my solution because he/she didn’t leave the urls of his/her blog (a thing you must do while asking at the forum) But, here it goes for you.

The first thing you need to do is to create that page (of course) and get its ID. So, once you’ve created the page, head over your list of pages and hover your mouse over the “edit” link; you’ll see at the bottom of your screen the ID (the number)

Then, you’ll be ready to hide the menu from that page only, with CSS:

.page-id-20800 .header-navigation-wrapper {
	display:none;
}

And, that’s a wrap!