WordPress Tricks

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

allaboutbasic

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;
}

Published by allaboutbasic

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

      2. 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

      3. 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

      2. 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

      3. 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

      4. 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

  4. Hello,
    how do I change the width of the very last paragraph on the page? It seems to have the exact same classes as the upward paragraphs, yet it is wider.
    The site is https://petrbren.eu and the theme is 2022.
    Thank you very much

    Like

    Reply

  5. Hi, can I define in 2022 theme the max-width for all site? I want to make it narrow with white margins on wide screens. I tried
    body {
    max-width: 80%;
    }
    but it does not work.

    Like

    Reply

Leave a Reply

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

Gravatar
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 )

Cancel

Connecting to %s