5 Simple Hacks to Customize the Twenty Twenty Theme With CSS Only

How to center and hide menus from specific pages, change the background colors of different sections and the color of the Drop Cap.

I thought there was nothing left to do to customize the Twenty Twenty Theme only with CSS because it does look really nice (actually, I ran out of ideas) so I started showing you how to develop a Child Theme with a simple tweak to make clickable images on the Archive Pages.

But, today I payed my weekly visit at Twenty Twenty Forum and I found out that you guys have more questions! 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.

.archive header span {
	display:none;
}

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

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; if you’re not familiar with Flex, check out my Coding Toolkit.

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!

You can follow this blog post’s with your WordPress account, or get everything by subscribing to mailing list (like updates on the toolkits and more)

2 replies on “5 Simple Hacks to Customize the Twenty Twenty Theme With CSS Only”

Any thoughts?