WordPress 5.6 comes with a brand new default theme: Twenty Twenty-One. Here I am sharing you some basic css or style modifications using which you can give it a look of your own. I have added the child theme below which you can download and use without any issue.
Download Twenty Twentyone Child theme.


- If you want to change the background color of header area, also to control the top and bottom gap or padding of header area
header#masthead {
max-width: 100% !important;
padding-left: 10%;
padding-right: 10%;
background: red !important;
padding-bottom: 2%;
padding-top: 2%;
}

2) If you want to change Site title and Site description or taglines font size color and font family
header#masthead .site-title, header#masthead .site-title * {
color: darkred !IMPORTANT;
font-size: 27px;
font-family: cursive !important;
}
.site-description {
color: darkred !IMPORTANT;
font-size: 17px;
font-family: cursive !important;
}

3) If you want to centralized top title / logo and menu position
@media (min-width: 500px) {
header#masthead {
display: block;
text-align: center;
float: none !IMPORTANT;
}
.site-branding {
margin-left: auto;
margin-right: auto;
display: block;
clear: both;
float: none;
}
nav#site-navigation {
text-align: center;
float: none;
margin-left: auto !IMPORTANT;
margin-right: auto !IMPORTANT;
/* margin-right: auto; */
display: flex;
position: inherit;
justify-content: center;
}
}
4) If you want to change top menu font size, color and font family
@media only screen and (min-width: 482px){
.primary-navigation .primary-menu-container > ul > .menu-item > a {
color: green !important;
font-size: 18px !IMPORTANT;
font-family: cursive !important;
}
}
To change hover menu color
@media only screen and (min-width: 482px){
.primary-navigation .primary-menu-container > ul > .menu-item > a:hover {
color: darkred !IMPORTANT;
}
}

5) If you want to use full width footer background color
footer#colophon {
clear: both;
width: 100% !IMPORTANT;
max-width: 100% !important;
padding-left: 10% !important;
padding-right: 10% !important;
background: red;
}

6) If you want to remove the Site Name and make the Powered By text centered
.powered-by {
margin-left: auto !important;
margin-right: auto !important;
}
7) To change Produdly Powered by text font size color and font family
.powered-by, .powered-by * {
font-size: 15px;
color: darkred;
font-family: cursive !IMPORTANT;
}
8) To change the link color of Powered By text
.powered-by a {
color: green !IMPORTANT;
}

9) If you want to remove the left padding of pages and make it full width (if this code doesn’t work please let me know in comments section)
.post-thumbnail, .entry-content .wp-audio-shortcode, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce), *[class*=inner-container] > *:not(.entry-content):not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce), .default-max-width {
max-width: var(--responsive--alignwide-width) !important;
}

10) If you want to change page or post title’s font size, color and font family
.singular .entry-title {
font-size: 28px !important;
color: darkblue;
font-family: cursive;
}
11) If you want to reduce gap below the title
header.entry-header {
padding-bottom: 20px !important;
}
12) If you want to reduce gap above title
header#masthead {
padding-bottom: 23px !important;
}

13) If you want to change font size color and font family of “Leave a comment”
h2#reply-title {
font-size: 23px;
color: darkblue;
font-family: cursive;
}
14) If you want to change Comments Label font size color and font family
label[for="comment"] {
font-size: 21px !IMPORTANT;
color: darkred !important;
font-family: cursive;
}
15) If you want to change “Post comment” button background and border color
#respond input#submit {
border-color: red !IMPORTANT;
background: red !important;
}

16) If you want to use background color in footer widget title, show bottom border, change font size color and font family — all in a single code I have shared, u can remove the line in code which you don’t want
h2.widget-title {
font-size: 23px;
color: darkred;
font-family: cursive;
border-bottom: 1px solid red;
text-align: center;
background: red;
}
17) If you want to remove the Underline which is showing in the links in widget area
.widget a {
text-decoration: none;
}
18) If you want to change font size, color and font family in widget links
.widget a {
font-size: 16px;
color: blue !important;
font-family: cursive !IMPORTANT;
}

19) If you want to change footer site info and Powered by info without using any plugins and using Child themes only
** In the screenshot above I have marked the portion where you can edit the child theme footer to add Powered by Info or Company info with site name.
If you need any help regarding this ask me in comments section. You can consult with me in my skype at om2000_cuet
Dude….lifesaver. Will see if the full-width adjustment works and if so thanks so much buddy.
LikeLike
Yep, I came here for that as well. Thank you!
LikeLike
6) If you want to remove the Site Name and make the Powered By text centered
Cannot remover
LikeLike
would you mind to clarify?
you mean the code didnt work?
Regards
Om
LikeLike
Any thoughts on editing the logo size? I see weird css on it with –branding–logo–max-width, and I’m not sure where that gets set.
LikeLike
Hi
would you mind to share me your site url to check please
Regards
Om
LikeLike
I ended up find it. There were variables set in the parent I was able to override in my child theme:
:root {
–branding–logo–max-width: 450px; /*was 300*/
–branding–logo–max-height: 150px; /*was 100*/
}
LikeLike
It would be so great if you also told us WHERE to put all that css code for us novices, it would be cool
LikeLike
Hi Isodev
you can put the code in Appearance > Customize > Additional CSS portion and then publish it
Regards
Om
LikeLike
Hi, thanks for all information. Looking for a guide that to translate Twenty Twenty-One theme to another language because there is no pot file. How can I do that? Thanks.
LikeLike
Hi,
there are plugins for that, Like WPML and free plugins like https://wordpress.org/plugins/google-language-translator/
Regards
Om
LikeLike
Hi, what is the specific font type used for the body text in Twenty Twenty-one?
LikeLike
you can check this
https://www.cufonfonts.com/font/segoe-ui-4
LikeLike
Thanks for this great info! I was able to remove the extra padding around the header. What about the footer – there seems to be a ton of padding there that I would like to get rid of, specifically the space in the “widget area” of the footer. (I have removed all widgets from this area and added just a text widget with contact information. There is a ton of blank space above this contact information that I would like to get rid of.)
LikeLike
Hi Melissa
please share me your site url to check please
Regards
Om
LikeLike
Thank you.
Really save my time for a little tweak.
LikeLike
Pleasure, nice to know it helps you.
LikeLike
Just changed from Salient to 2021 for AMP compatibility. I was concerned by the new look of header and footer, but you have provided solutions to all of my concerns. Thank you so much for sharing.
LikeLike
Great, nice to know the code helped you.
Regards
Om
LikeLike
Hi these all work great but arent translating well on my mobile version. For example, my logo isn’t centered on mobile view.
LikeLike
Please share me you your site url where u r working
Regards
Om
LikeLike
Is there a way to make the page titles show up? You can enter them in the block editor, but it’s not at all representative of what will actually show later as those titles vanish.
LikeLike
Hi Fred
would you mind to clarify?
sorry didnt get your point
Regards
Om
LikeLike
Hello Om,
Thank you for this wonderful article. But I can not still figure it out on my website How to change color for this excerpts text? As you can see on this page https://www.hot-hobby.events/events/
Same problem on the sidebar as well. As I have dark background and below yellow titel excerpts text color and sidebar text and link color is grey so that is not readble!
Maybe if you will select this text then you can read it. I just want to make this text white, so visitor can read it. Can you please help me for changing CSS for this?
Thank you for your support.
LikeLike
Hi Michael
can u try these please
.tribe-common–breakpoint-medium.tribe-events .tribe-events-calendar-list__event-description {
color: white;
}
.tribe-events-widget-events-list__events, .tribe-events-widget-events-list__events * {
color: white !important;
}
let me know if that helps
Regards
Om
LikeLike
Thank you for your response. It worked but only on Sidebar. You can refresh the page then you can see the the excerpts which is below the yellow title of events color of that text did not changed! Also in Sidebar Title (Upcoming Events) did not change. I would appriciate help on that also.
Thank you in advance for your help
LikeLike
Hi Michael
can u try this please
.tribe-events-calendar-list__event-description, .tribe-events-calendar-list__event-description * {
color: white !IMPORTANT;
}
This is for Upcoming Events
h2.tribe-events-widget-events-list__header-title {
color: white !IMPORTANT;
}
LikeLiked by 1 person
Thank you very much for your help. It has worked very nicely. You can also see by refreshing the page. But there still some grey text left on this page. For example Dates (left of the events), Ticket price which is next to the Get Tickets, And the place name which you can see below the yellow title of second Event.
Which reads like this:
Don’t look, just touch – Exklusiver Partyabend (Ausgebucht) (Yellow)
Dein Fetichhaus Schoßbergstraße 16, Wiesbaden, Hessen (Grey, not readble)
I hope I am not bothering you too much. But I really appriciate your help.
Thanks a million.
LikeLike
Hi Michael
for the Date and price would u mind to try this please
.tribe-events-calendar-list time, .tribe-events-calendar-list time *, .tribe-events-calendar-list span {
color: white !IMPORTANT;
}
please let me know
** i found other portion seems readable now
LikeLike
Thank you very much for your support. It has worked wonderfully fine.
LikeLike
Pleasure Michael
Nice to know it worked 🙂
and if you need any other help feel free to ask here.
Regards
Om
LikeLike
Sir, Using WP TwentyTwentyOne, to simply center the menu bar on https://quesara.com I have added your option #3 to the style.css in my child theme:
@media (min-width: 500px) {
header#masthead {
display: block;
text-align: center;
float: none !IMPORTANT;
}
.site-branding {
margin-left: auto;
margin-right: auto;
display: block;
clear: both;
float: none;
}
nav#site-navigation {
text-align: center;
float: none;
margin-left: auto !IMPORTANT;
margin-right: auto !IMPORTANT;
/* margin-right: auto; */
display: flex;
position: inherit;
justify-content: center;
}
}
HOWEVER nothing changes! I have searched many recommendations, like:
.site-header .main-navigation {
text-align: center;
}
Still, nothing changes!
Is there something on the site preventing centering the menu bar?
Please Advise. With Gratitude, Jacob
LikeLike
Hi Jacob
can u try putting the css code in Appearance > Customize > Additional CSS and publish it
or
try to use Custom CSS plugins?
please let me know
Regards
Om
LikeLike
AllAboutBasic Om ~
Indeed, that worked perfectly! Thank you for your fast and accurate reply!
Could you perhaps comment on why the code did not work in the child theme’s style.css?
With Gratitude, Jacob
LikeLike
Hi Jacob
nice to know it helped
to tell you why style.css didn’t work i need to check the child theme codes you used.
so could not tell u about it
Regards
Om
LikeLike
Understood. Thank you again. Namasté
LikeLike