WordPress Tricks

Twenty Twenty Theme: Modifications of Header, Titles, Links, Widget Section and More

Twenty Twenty  now arrived and become the new WordPress default theme. Mainly it is designed with the flexibility of the block editor at its core but you can use Visual Composer or Elementor too. You can use it for your organization or business and also for your traditional blog, the centered content column and considered typography makes it perfect for that as well. Here I am sharing some CSS Modifications which you can use

Download Twenty Twenty Child Theme

Download Twenty Twenty Parent Theme from wordpress.com

twenty twenty theme widget modifications

To change Widget title font size, font color, font family and space below the widget title

.widget .widget-title {
    margin-bottom: 3rem;
    font-size: 2rem !important;
    color: darkred !important;
    font-family: cursive !important;
}

To remove gap between widgets

.footer-widgets .widget {
     margin-top: 2rem !important;
}

To change font size, color and font family of footer widget links and also to remove underline on hover

.footer-widgets a {
    font-size: 15px !important;
    color: blue !important;
    text-decoration: none !important;
    font-family: cursive !important;
}

To change page title font size, color and font family in twenty twenty theme

h1.entry-title {
    font-size: 29px !important;
    color: darkred !important;
    font-family: cursive !important;
}

To reduce or remove gap from top and bottom of the title in twenty twenty theme

.singular .entry-header {
    padding-top: 2rem !important;
    padding-bottom: 4rem !important;
}

To change site title font color, font family, font size and text decoration

.site-title a {
    font-size: 23px !important;
    text-decoration: none;
    color: darkred !important;
    font-family: cursive !important;
}

To change Site Description or Tagline font size, font family , color and to make it bold

.site-description {
    font-size: 23px !important;
    color: darkred !important;
    font-family: cursive !important;
    font-weight: bold !important;
}

To change parent menu items font size, color , font family and font weight

ul.primary-menu.reset-list-style > li > a {
    color: red !important;
    font-size: 15px !important;
    font-family: cursive !important;
    font-weight: bold;
}

To change drop down or child menu black background color to a different one

ul.sub-menu {
    background: red !important;
}
body:not(.overlay-header) .primary-menu > li > ul:after {
    border-bottom-color: red !important;
}

To change dropdown/child menus font size, color and font family

ul.sub-menu a {
    font-size: 16px;
    color: white !IMPORTANT;
    font-family: cursive !important;
    font-weight: bold;
}

To change font size, color and font family of Leave A Reply in twenty twenty theme

.comment-reply-title {
    font-size: 2.6rem !important;
    line-height: 1.2;
    margin-bottom: 6rem;
    color: darkred !important;
    font-family: cursive !IMPORTANT;
}

To change “Post Comment” button font size, background color, Alignment and button size

input#submit {
    font-size: 12px !important;
    color: white !important;
    background: darkred;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

To change font color, size and font family of these Post metas ( author, date, comments etc)

ul.post-meta * {
    font-size: 12px;
    color: black !important;
    font-family: cursive !important;
}

To change Footer Copyright information check the screenshot above, here i showed how to do it by editing the footer.php . I have not used any plugins for this. Use the Child Theme of Twenty Twenty to modify theme files.

To Change Footer copyright text font size, color, font family and font weight

.footer-credits * {
    color: darkred !important;
    font-size: 14px !important;
    font-family: cursive;
    font-weight: bold;
   }

Twenty Twenty Theme with Gutenberg Editor

If you have any issue feel free to ask me question here in comments section
OR
Pay me some, I will help you for CSS Issue Personally CLICK HERE….

26 thoughts on “Twenty Twenty Theme: Modifications of Header, Titles, Links, Widget Section and More”

  1. Thank you so much for this post! I have used several of these to help customize a couple of sites. This is such a great resource! I’m trying to add a top bar (above the nav menu) with a phone number and a book now button sitewide on wordpress twenty twenty. Can you point me in the right direction for help with this? Thanks!

    Like

  2. For a topbar in the twenty twenty theme, what line of code do I need to put in the header.php file. For Beginners this is hard 🙂

    Best from Germany!
    Regards
    Daniel

    Like

  3. Thanks for this tutorial! really good and with useful tips.
    A question: is there a way to change the text in the “Leave a Reply” area? eg instead of “Leave a Reply” change to “What are your thoughts?”

    Like

      1. hi! yes. It’s hosted in a local provider and WordPress.com is installed. I am running the “ˇwenty Twenty” theme

        Like

  4. I am trying to use this CSS to not display the header name in 2020 theme;
    .h1.entry-title {
    display: none;
    }
    Which theme file should it go in? style.css, header.php? If I can get it to work I will put it in a child thesem

    Like

  5. glass500.com
    1. How to limit the cover header height or make it responsive? There is currently too much white space between background image and Entry Title.
    2. How to make the background image responsive? I would like max image width 400px.
    Thanks I’ve found your WP theme customization pages excellent over the years.

    Like

      1. Thanks for the reply. I have a background image that looks like text: “Up to $500 for solving the crime.”
        Here’s a screenshot: ttps://drive.google.com/file/d/10BlX9TCVsj1WoLHypsKKdn1n4cqphPdn/view?usp=sharing
        THank you!

        Like

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