Twenty Nineteen Tweaks

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.