The Sorbet theme has served me well for a number of years, but it doesn’t have full support for everything that the new editor introduced in WordPress 5.0 offers, so I figured it was time to move on to the new Twenty Nineteen default theme.

Twenty Nineteen is a beautiful, simple, and clean theme, but there are a few things I didn’t like, so I figured I’d share how I handled them.

Accent Color

This site has used the same shade of blue as its accent color for the past 14 years. Twenty Nineteen has a built-in color slider to choose your accent color, but no way to specify a particular shade. This is because Twenty Nineteen’s color slider only includes shades that are easily visible against the white background and black text. This is definitely a worthy reason to finally change, so I just used the slider to pick the shade of blue that most closely matched my logo.

Square Logo

Speaking of my logo, I love it, it was designed by Josรฉ Marques, and keeping it contained in Twenty Nineteen’s circular crop was absolutely not what I wanted, so I added the following via Customize > Additional CSS to remove that circle effect:

.site-logo .custom-logo-link {
    border-radius: 0;
}

Props to Kathryn Presner for reminding me how to do that since my CSS has gotten a bit rusty lately!

Menu Separator

Twenty Nineteen’s menu simply includes space between items, and that just didn’t look right to me. Was “About Categories” an About page, a Category page, or was it a page about categories? This quick addition via Customize > Additional CSS adds a simple separator between the menu items:

#menu-name li:not(:last-child):after {
content: "|";
padding-right: 5px;
color: #000;
}

.site-header.featured-image #menu-name li:not(:last-child):after {
	color: #fff;
}

You’ll need replace “name” with the name that you gave the menu. For example, if you called the menu “Main,” you would use “#menu-main” in the code above.

Props to Pascal Cescato for improving on the code that was originally here!

That’s all I’ve done to Twenty Nineteen so far, but I never stop messing with the themes I’m using, so I’m sure there will be more tweaks to share later on. ๐Ÿ™‚

Update: I figured the search shortcut deserved its own post.

For further help with Twenty Nineteen, please visit the Twenty Nineteen support forum.

Join the Conversation

8 Comments

  1. HELLO JAMES, i appreciate your support. Please, i need a css tweak trick to erasing that hyphen in the site description and Header titles…

  2. Hi and thanks for your post!
    I’ve tried, it runs, that’s right, but I improved it:
    #menu-(yourMenuName) li:not(:last-child):after {
    content: "|";
    padding-right: 5px;
    color: #fff;
    }

    And there’s no more a separator after the last item in your menu, and you just have to retrieve the name of your main menu (eg. #menu-main if you called your menu ‘main’.
    I will serve this code in my upcoming Twenty Nineteen hacks (fr), I will refer to your post as one of my inspiration sources.

  3. I just switched to the theme as well and googled a fix for the round logo and found your site. I had already noticed the menu looked mushed as well and both of these changes are perfect, thank you!

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.