Matching your cuffs with your collar

Many WordPress themes offer the ability to set the background color (at the very least). With a couple of custom CSS entries, though, you can extend that color selection to other page components.

Here’s how.

First, in your WordPress dashboard go to Appearance > Customize. Then click on Colors in the customizing sidebar. Click on Select Color under the Background Color section at the top of the color customizer. Then select whatever color you want.

Once you do, you will notice that in addition to the color-selection tools, WordPress shows you the hex value of the color you have selected.

Let’s say you select brown as your background color, like this:

The hex value of that color brown is #8f663b. Copy that value, or otherwise make a note of it.

While still in the Customize section, switch to Additional CSS and enter the following code:

.pagination .prev, .pagination .next, .search-submit {
    background-color: #8f663b;
}

.page-header, .pagination, .widget {
    border-top: 2px solid #8f663b;
}

Obviously, replace the #8f663b value with whatever hex value you get for the color you selected. Once you save, you will see that the color of other page components matches your background color.

I use the same color for the other page components as I do for the background color because I have zero sense of what other colors would look good, but if you have a more artistic bent you can knock yourself out. Note also that while the additional CSS code used the hex value copied from the Background Color picker, you can use any valid CSS color designation, including RGB, named colors, etc., unlike in the Background Color picker.

Advertisement