BACK TO TOP

How to Customize Your WordPress Website Colors

How to Customize Your WordPress Website Colors

Say that you like the overall look of your website or blog, you’ve found a perfect web hosting provider, and are more than satisfied with the theme you’ve picked. There is just one small, but still important thing that you’d like to change, though. You feel like you could add a more personal touch to your WordPress site by changing its color scheme. In order to make this process easier for you, we will show you a few different ways to adjust your WordPress colors – including how to do it in Qode Interactive’s WordPress themes.

Changing Colors Through the Default Customize Option

Before we show you how to change colors using the Customize option, we should note that these particular options depend on the theme you’re using. We used the Twenty Twenty-One default WordPress theme for the purposes of this article, so in case you’re using some other theme on your site and/or don’t have these options on your theme, you can always check out the plugin method instead (which we will cover a bit later).

Step 1

First things first, go to Appearance >> Customize.

Appearance Customize

Step 2

Once there, select the Colors & Dark Mode tab.

Colors and Dark Mode

Step 3

Here you will find the option to change your site’s Background color, called Select Color. You should click on this option.

Select Color

Step 4

This will open the color panel that you can use to add your own custom color or select the one from the palette. If you want to use the latter option, you can click anywhere you want on the palette, or simply drag the little circle around until you create the color that best suits your needs. Alternatively, you can also type the RGB code in the input field on the right.

Pick Color

Step 5

Right next to the palette, there is also an area where you can determine whether you want to go for the lighter or darker color shade. You can do this by dragging the slider up or down.

Pick Color Slider

Step 6

Once you’re satisfied with your choice, click on Select Color once again.

Select Color

As for your site’s elements, they will always be calculated and set automatically, according to the background colors you choose. This is great as it guarantees that the contrast between the background and the elements is always high enough in order to be easily visible to users.

Step 7

If you plan to use a light color for the background of your site, you will also be able to use the Dark Mode support option. This setting allows a site visitor to view your site in Dark mode, that is if they want it to be shown that way. Simply mark the “Dark mode support” option and your site will be displayed with a dark background and light text.

Dark Mode Support

Step 8

Also, to preview your dark scheme, you can click on the Dark Mode: Off button (located in the bottom right corner of the screen). This action will switch the Dark mode on:

Dark Mode Off
Dark Mode On

Step 9

Once you’re done with setting your colors, hit the Publish button and you’re all set.

Publish

Step 10

Finally, in order to return to the user dashboard, simply click the x button in the top left corner of the Customize screen.

Close Icon

Changing Colors With a Plugin

Most premium WordPress themes let you change their colors with ease. However, you should keep in mind that not all themes allow the same level of customization. If your theme doesn’t come with many customization options, you can always use one of the tools and plugins that can be found on the web to add custom CSS to change everything you need. Here’s how to change colors with the help of the SiteOrigin CSS plugin.

1. First, access your Plugins screen in the admin panel. Then, after finding the SiteOrigin CSS plugin, install and activate it.

SiteOrigin CSS plugin

2. Go to Appearance > Custom CSS.

Custom CSS Plugin

3. Once the CSS editor opens, click on the eye icon located in the upper right corner of the editor.

CSS editor

4. Now, upon clicking on the eye, a new screen will appear. On the left side, you will see a control panel, whereas on the right side of the screen you will have a live preview of what your page will look like while you edit.

SiteOrigin CSS plugin live preview

5. As you move your mouse around the page, you’ll see the elements on the page highlighted when you hover over them.

SiteOrigin CSS WordPress plugin

6. Just click on the element you wish to change (like the page background color, for example), and you will see the element’s name added in the top left corner of the control panel.

SiteOrigin CSS control panel

7. Now, click on the Decoration tab.

SiteOrigin CSS Description

8. A few new options will appear, and the background color will be among them.

SiteOrigin CSS Colors

9. Click on the input field, and again, you will be met with the color picker. You can choose any color you want by moving the little circle around, or by typing the color RGB code in the input field. You will be able to preview all the changes on the right.

WordPress SiteOrigin CSS Plugin

10. Once you’ve chosen your color, mark the checkbox.

Choose Color

11. You will be returned to the CSS editor screen, where you will see that your CSS has been added. All you need to do is click on Save CSS.

CSS editor screen

12. The plugin will let you know that the site has been updated. To see it live, simply refresh your page.

SiteOrigin

And that’s how you can use the SiteOrigin CSS plugin to change the colors on your website.

Top Themes for Creatives
Manon WordPress Theme
Manon

Portfolio & Agency Theme

Zermatt banner
Zermatt

Multi-concept Agency Theme

Cinerama WordPress Theme
Cinerama

A Theme for Movie Studios and Filmmakers

Changing Colors in Qode Themes

Each of Qode Interactive’s themes comes with loads of color customization options for various parts of your site. There are two major places where you can change your site’s color scheme: the general theme settings, and on each page/post itself.

Whatever options you customize in the general settings will apply to your entire website, while the elements you set up on the page or post will (naturally) only be applied to the page/post in question.

1. General Theme Settings

Each theme has its own general settings with options that can be specified for the theme itself.

Qode General Theme Settings

The options are sorted into groups, with each group relating to a specific part of your site. This provides easier website management. There are certain groups of options that are available in all our themes, while some options vary slightly from theme to theme. What options the theme will have greatly depends on the theme’s purpose and its requirements.

1. General options

Here you can set some of the site’s generally most dominant colors, like First/Second Main Color (the theme’s main colors) and Page Background Color. We have to remind you not to forget that everything you adjust in the general options will apply to the entire website.

Qode Theme General options color

Here you can also find options like Text Selection Color (choose the colors the users see when selecting any text on your page) and Page Loader Background Color (the color that can be seen before the page loads).

2. Fonts

With our themes, it’s very easy to change font colors. In the Fonts section of the options panel, you can set up the colors of all headings (from 1 to 6), paragraphs, links, as well as the hover colors.

Qode Theme Font Colors

3. Header options

Header options are where you can find all the header-related settings, such as the header type and appearance. As for the colors, you can adjust:

    • Background Color: it lets you set the background color of your header. Just keep in mind that you need to set colors separately for every different header type.
    • Background Transparency: another useful option that lets you adjust the background transparency of your header.
    • Text Color: you can also set the color of the text located within the header.
    • Dropdown Menu Color: set the background color of dropdown menus.
    • Border Menu Color: set the color for borders within the header menu.
Qode Theme Header options

4. Mobile Header options

Some themes also have separate color options for the header that’s displayed when the site is viewed on mobile devices. Here you can adjust the background, text, as well as the navigation colors.

Qode Theme Mobile Header options

5. Title options

This is where you can set all the colors which can be found in the Title areaBackground, Text Title, Subtitle, and Breadcrumbs, if they’re available.

Qode Theme Title options

6. Content Bottom options

The Content Bottom is a widget area that is displayed below the content of your pages. In the Content Bottom section of your theme’s general options, you can set the Background Color of this area.

Qode Theme Content Bottom options

7. Footer options

Unlike the Title and Header options, where you can adjust the text color, here you can only set the background color of your footer. The color of the text in the footer is drawn from the widgets being used in the footer.

Qode Theme Footer options

8. Elements

Some themes have general options for specific theme elements/shortcodes. Here you can set default colors for these elements.

Qode Theme Elements Options

9. Side Area options

Some of the options available in the Side Area tab include Content Overlay Background Color and Content Overlay Background Transparency. When the side area is active, these two options are used to darken or change the color of the page in the background. Aside from these two options, here you can also find the color options for the icon that opens and closes the side area.

Qode Theme Side Area

10. Search options

These options are usually used for setting the color of the open/close search icon, but some other options may also appear depending on the theme.

11. Contact Form 7

Here you can customize all colors related to the Contact Form 7 plugin (a great tool that allows you to collect information, ask your visitors to add them to your email list, etc.). There are multiple styles available, and for each style, you can choose the text, background, border and button color.

Qode Theme Contact Form 7
A Top-Selling Creative Theme
Stockholm big banner
Stockholm small banner
Stockholm

A Genuinely Multi-Concept Theme

Page/Post Settings

Like we mentioned earlier, if you wish to change the color options for a specific page or post, you can do so on the page or post itself.

Below the editor area on each page/post, you will find the options for specific parts of that page or post. Of course, some general options (such as side area options) cannot be set up on the page individually.

Qode Theme Page Post settings

In case you don’t see some of these options in the backend, it means they need to be switched on. You can easily do this by accessing the Screen Options, located in the upper right corner of the page. There you can check all the fields that are unchecked, and the corresponding options will appear in your page/post settings.

WordPress Page Screen Options
Screen Options Wordpress

Conclusion

And that concludes our guide on how to adjust WordPress website colors. As you can see, there are many different ways in which you can customize colors in WordPress. Overall, your possibilities will depend on the range of your theme’s options. In case you don’t want to be limited in this way, you can always install a color customization plugin which will give you more freedom to personalize your website’s colors in any way you want. However, if you’re using (or plan to use) one of Qode Interactive’s WordPress themes, then you’re pretty much covered as far as color customization goes. This also includes the ability to change your WordPress text color, header and footer colors, and any other website sections and elements.

Finally, in case you ever need some additional inspiration, you can always check out some of the many available color combinations for a good head start.

Post your comment

Comments0