WordPress Tricks

Twenty Nineteen (2019) theme By the WordPress team: CSS Style Modifications and documentation of Header, Footer, Menu, widget, Contents and more

WordPress Twenty Nineteen  (2019) theme is the latest theme for the year, developed by WordPress Team.  Creating Professional Business websites is the main focus of the theme. Also, they have created several child themes for this which you can check too.

You can check the Demo of Twenty Nineteen theme.

You can download Twenty Nineteen (2019) theme.

If you want to change site title font color, font size and font family  of Twenty Nineteen (2019) theme By the WordPress team

.site-title a {
color: darkred !important;
font-size: 3rem;
font-family: cursive !important;
}

To change font size, font weight, color and font family of site description of Twenty Nineteen (2019) theme By the WordPress team

.site-description {
color: darkred !important;
font-weight: normal;
font-family: cursive !important;
font-size: 23px !important;
}
You can ask question regarding any issue you are facing in comments section.

Or can take my personal help.

twenty nineteen theme by the wordpress team menu and child or sub menu items modification

To change Menu items ( Parent items) font size, weight, color and font family

.main-navigation .main-menu > li > a {
font-weight: 700;
font-size: 17px !important;
color: darkred !important;
font-family: cursive !important;
}

** To change sub-menu down arrow font color

span.submenu-expand {
color: darkred !important;
}

To change Menu items (Parent menu items) hover color

.main-navigation .main-menu > li > a:hover, .main-navigation .main-menu > li > a:hover + svg {
color: blue !important;
}

To change sub-menu items background color to different one

.main-navigation .sub-menu {
background-color: darkred !important;
}

To change sub-menu items color, line height, font size, font boldness (weight) and font family

.main-navigation .sub-menu > li > a, .main-navigation .sub-menu > li > .menu-item-link-return {
color: #fff;
line-height: 1.2;
font-size: 16px !IMPORTANT;
font-weight: normal;
font-family: cursive !important;
}

To change sub-menu items hover or focus background color

.main-navigation .sub-menu > li > a:hover, .main-navigation .sub-menu > li > a:focus, .main-navigation .sub-menu > li > .menu-item-link-return:hover, .main-navigation .sub-menu > li > .menu-item-link-return:focus {
background: green !important;
}

To change font size, color and font family of  Titles of  Posts, Pages, Blog page posts, category page posts etc

.entry-title, .entry-title a {
font-size: 21px !important;
color: darkred !important;
font-family: cursive !important;
}

To reduce gap between posts in blog , archive, category, tag or search page

twenty nineteen theme by the wordpress team reducing gap between posts in category blog archive or search page

.home .entry, .archive entry {
margin-top: 0px !important;
}
.home .entry .entry-footer, .archive .entry .entry-footer {
margin-top: 0px !important;
margin-bottom: 0px !important;
}
.home header.entry-header, .archive header.entry-header {
margin-top: 0px !important;
}

If you are not using post thumbnail then use the code below to reduce gap between post title and post contents

twenty nineteen theme by the wordpress team reducing gap between post title and post content in category blog archive or search page

figure.post-thumbnail {
margin-top: 5px !important;
margin-bottom: 5px !important;
}

.entry .entry-content > *, .entry .entry-summary > * {
margin-top: 10px !important;
}

In single post if you want to reduce gap just above the post content

twenty nineteen theme by the wordpress team reducing gap just above the post content in single post

.single .site-header.featured-image {
margin-bottom: 12px !important;
}

To change font size, color and font family of comments title “Join the conversation”

h2.comments-title {
font-size: 23px !important;
color: darkred !important;
font-family: cursive !important;
}

twenty nineteen theme by the wordpress team reduce gap just above or below the comments title Join the conversation

To reduce gap just above and below  of comments title “Join the conversation”

.comments-area .comments-title-wrap {
margin-top: 12px !important;
margin-bottom: 12px !important;
}
ol.comment-list {
margin-top: 12px !important;
}
div#comments {
margin-top: 12px !important;
}
nav.navigation.post-navigation {
margin-bottom: 12px !important;
}

twenty nineteen theme by the wordpress team comments section modification

To change Comments Author font size, color and font family

.comment-author.vcard * {
font-size: 15px !important;
color: darkred !important;
font-family: cursive !important;
}

If you don’t want to show comments date in comments section

.comment-metadata {
display: none;
}

To reduce gap just above and below comments content

.comment-content {
margin-top: 5px !important;
margin-bottom: 5px !important;
}

To change comments content font size, color and font family

.comment-content {
font-size: 19px !important;
color: darkred !important;
font-family: cursive !important;
}

**** Footer widget section ****

twenty nineteen theme by the wordpress team footer widget title links and border modifications

To change font size, color and font family of footer widget title

h2.widget-title {
font-size: 19px !important;
color: darkred !important;
font-family: cursive !important;
}

If you want to remove the border just above the footer widget title

h1:not(.site-title):before, h2:before {
display:none !important;
}

If you want to use background color just behind the widget title

h2.widget-title {
background: darkred;
color: white;
text-align: center;
padding-bottom: 12px;
}

If you want to change font size, color and font family of footer widget links

footer#colophon li a, footer#colophon li {
color: darkred;
font-size: 15px !important;
font-family: cursive !important;
}

*** Next / Previous Post Links Modificatins ***

twenty nineteen theme by the wordpress team Next Post and Previous Post modifications

If you want to change the font size, color and font family of the text “Next Post” and “Previous Post”

.post-navigation .nav-links a .meta-nav {
color: #767676;
font-size: 16px !important;
font-family: cursive !important;
}

To change Next Post and Previous Post title links font color, size and font family

.post-navigation .nav-links a .post-title {
font-size: 23px !important;
color: darkred !important;
font-weight: 400;
font-family: cursive !important;
}

If you want to use footer copyright info or Proudly Powered By WordPress in Twenty Nineteen (2019) theme By the WordPress team

twenty nineteen theme by the wordpress team footer proudly powered by wordpress removal and company info modifications

Go to your dashboard. Then Appearance > Editor > footer.php . Please check the screenshot for better understanding and use the code i shared below the screenshot to change copyright info

 
				© Copyright 2018 or 2019
				<span class="sep"> | </span>
                Message about your company

If you have any issue feel free to ask me question here in comments section

OR

You can take my personal help in skype : om2000_cuet

Child Themes of WordPress Twenty Nineteen (2019) Theme

Creating Prefessional Business Websites with twenty Nineteen (2019) theme using WordPress Latest Gutenberg Editor blocks  

twenty-nineteen-home-page-blocks

Creating Prefessional Websites For Natural, Organic Items  with twenty Nineteen (2019) Child theme Friendly Business  using WordPress Latest Gutenberg Editor blocks  

Download Friendly Business Child Theme

See Friendly Business Child Theme Demo

friendly_business_editor

Creating  Websites to showcase your Stylish Rooms and Quallity Products using twenty Nineteen (2019) Child theme Calm Business.  

Download Calm Business Child Theme

See Calm Business Child Theme Demo

Your chic establishment needs an equally chic website to showcase your stylish rooms and quality products. With its solid typography and peaceful color scheme, Calm Business exudes a tranquil, inviting atmosphere that’s an especially good fit for bed and breakfasts, time-share rooms, and brick and mortar stores.

Wordpress theme for Stylish room and Quality Products

33 thoughts on “Twenty Nineteen (2019) theme By the WordPress team: CSS Style Modifications and documentation of Header, Footer, Menu, widget, Contents and more”

      1. Right on! It works even better for my Chinese website at hanzicode.com ! And it makes the mobile view font smaller without affecting the font size for the desktop view, which was just what I wanted. Thank you so much!

        BTW, if I only want to change the font size for mobile view, what should I add to the code you gave me?

        Like

  1. Hi my footer says my name and Welcome, which is the first post I made. Why is this? How do I change it and where do I change it? I’d like it to say Proudly powered by WordPress.com, but I’m not that good at code…

    Like

    1. This is what the code is right now:

      <a class="site-name" href="” rel=”home”>,

      <a href="” class=”imprint”>

      <?php
      if ( function_exists( 'the_privacy_policy_link' ) ) {
      the_privacy_policy_link( '', '’ );
      }
      ?>

      <nav class="footer-navigation" aria-label="”>
      ‘footer’,
      ‘menu_class’ => ‘footer-menu’,
      ‘depth’ => 1,
      )
      );
      ?>

      Like

  2. Thank you for sharing. It is well explained indeed.

    Is there any way to add hover effect to the menu? Something like we see in twenty fourteen theme.

    Speaking of which, maybe you would know how to get rid of sidebar container in twenty fourteen? I know there are articles on that but still it is rocket science to me what is to be pasted and where. Regards.

    Like

      1. Hi Om,

        Sorry to say that but the website… does not exist just yet. I am at the stage of planning it and just looking for a suitable theme.

        Those css codes you kindly share with us, do they work on every theme or they are just for twenty nineteen? (Apologies if I ask stupid questions here)

        Like

  3. Hi

    Ive added the following to custom css to change to site title colour but it doesnt seem to work.

    h1.site-title a {
    color: darkred !important;
    font-size: 3rem;
    font-family: cursive !important;
    }

    What have i missed?

    Thanks

    Like

  4. Hello, I want to thank you for taking the time to put this article together, it has REALLY helped in getting my new site looking better. One question: I am trying to minimize that pesky white space at the top of every page, just below the menu and the beginning of the page. I believe I used this code to make it somewhat smaller:

    .home .site-main:first-child .entry-header {
    display: none;
    }

    But there is still too much space (between top menu/social media icons and the top of the slider video): http://www.strategicgrowthsummit.com.

    Any suggestions? Many thanks!

    Like

  5. Thanks for helpful explanations! Any idea how to style the current/active menu items (main-navigation parent pages)?

    Like

Leave a comment