WordPress Tricks

WordPress theme Twenty Twenty-One: Modifications and customizations of headers, fonts, styles and more

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.

wordpress theme twenty twenty-one
wordpress theme twenty twenty-one header background color
  1. 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%;
}
wordpress theme twenty twenty-one site title and site description modifications

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;
}
wordpress theme twenty twenty-one header logo and menu area centralized

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;
}
}
wordpress theme twenty twenty-one full width footer background color

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;
}
wordpress theme twenty twenty-one powered by centered

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;
}
wordpress theme twenty twenty-one remove left padding

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;
 
}
wordpress theme twenty twenty-one title modifications

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;
}
wordpress theme twenty twenty-one comments section modifications

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;
}
wordpress theme twenty twenty-one footer widget modifications

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;
}
wordpress theme twenty twenty-one footer site name and powered by info

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

1 thought on “WordPress theme Twenty Twenty-One: Modifications and customizations of headers, fonts, styles and more”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s