Web Development & WordPress

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

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

      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.

    1. Hi Vicris,
      you can add it using Appearance > Customize > Additional css
      or
      if you are using wordpress.com then you need to upgrade your plan to Premium

      Regards
      Om

      Reply

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

  3. hello, how do you reduce the header size / space between header and content with additional CSS please?

    Reply

      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

      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

      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

  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

    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.

    Reply

Leave a Reply