WordPress Tricks

Wordpre Twenty Twenty-Two theme By the WordPress team : Modify header and content width using css

Here I am sharing you 2 technique using css. Please Feel Free to do comments if you have any question regarding Twenty Twenty Two theme of wordpress by Automattic.

1 ) To change font size, color and font family and spacing of H1 header tag for Page titles

h1 {
    font-family: cursive !IMPORTANT;
    color: darkred;
    font-size: 25px !important;
    margin-bottom: 12px !IMPORTANT;
    margin-top: 12px !IMPORTANT;
}

2) To make contents full width using css in Twenty Twenty Two theme

.wp-block-post-content > * {
    max-width: 1022px !important;
}

3) Reduce space between two blog posts using css in Twenty Twenty two theme

.blog .wp-block-group .wp-block-spacer {
    height: 50px !important;
}

4) To reduce gap at the top of Leave A Reply Comment box in Twenty Twenty Two theme

.wp-block-post-comments {
    margin-top: 0px !IMPORTANT;
    padding-top: 0px !important;
}

5) To change font size, color, font family, font weight and using background color and alignment of “Leave a Reply” in twenty twenty two theme

h3#reply-title {
    font-size: 25px;
    color: white !IMPORTANT;
    font-weight: bold;
    font-family: cursive !important;
    background: green;
    padding: 12px;
    text-align: center;
}

6) To Change font size, background color of this Post Comment button

input#submit {
    background: darkred;
    font-size: 14px;
    font-weight: bold;
} 

7) If you don’t want to show comments date in your blog post in Twenty Twenty Two theme

.comment-metadata {
    display: none;
}

8) If you want to change font size, color and font family of comments author in twenty twenty two theme

.comment-author, .comment-author * {
    font-size: 16px !IMPORTANT;
    color: darkblue;
    font-family: cursive;
}

9) If you want to make body background red and content header and footer background white

.wp-site-blocks header {
    background: white;
}
.wp-site-blocks main {
    background: white;
    margin-top: 0px;
}
.wp-site-blocks footer {
    background: white;
    margin-top: 0px !IMPORTANT;
    padding-top: 0px !IMPORTANT;
}
body {
    background: red;
}

16 thoughts on “Wordpre Twenty Twenty-Two theme By the WordPress team : Modify header and content width using css”

      1. Hi Jeannie
        can you try these codes please?

        .wp-site-blocks {
        padding-left: 0px !important;
        padding-right: 0px !IMPORTANT;
        }
        .wp-site-blocks .wp-block-columns {
        padding-left: 40px;
        padding-right: 40px;
        }
        div.wp-site-blocks div.wp-block-cover {
        margin-left: auto !IMPORTANT;
        /* padding: 0px !IMPORTANT; */
        max-width: auto !IMPORTANT;
        max-width: 100% !IMPORTANT;
        margin-right: auto !IMPORTANT;
        }

        Like

      2. Thank you. Poof – just like that it works now with:
        .wp-site-blocks {
        padding-left: 0px !important;
        padding-right: 0px !IMPORTANT;
        }

        I had the same code but mistakenly added “.wp-site-blocks footer {}”

        You’ve helped me leap a hurdle; it is much appreciated.

        Like

      1. With the Site Editor enabled there’s no customize. So, that is my question: where do you insert CSS within Twenty Twenty-Two?

        Like

      1. Hi Jojo
        i think you are searching this code ( to reduce gap between header and the top video)

        header .wp-block-group.alignwide {
        padding-bottom: 9px !important;
        padding-top: 20px !important;
        }
        please let me know

        Regards
        Om

        Like

      2. Hi Om
        I tried that but to no results I am wondering if I am placing in the wrong spot?
        Since this version there is no longer the additional css field that I used to have under themes>customise so I tried in the editor and placing this is the header block under additional css classes….
        Or should I install a custom css plug in? I was hoping to change it without adding another plugin

        Like

      3. HI Jojo
        are you using wordpress.com ?
        if yes, then u can check in editor to reduce padding
        or
        if you have option to install plugins, then you can use Custom Css plugins

        Regards
        Om

        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 )

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