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.
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.
Step 2
Once there, select the Colors & Dark Mode tab.
Step 3
Here you will find the option to change your site’s Background color, called Select Color. You should click on this option.
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.
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.
Step 6
Once you’re satisfied with your choice, click on Select Color once again.
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.
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:
Step 9
Once you’re done with setting your colors, hit the Publish button and you’re all set.
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.
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.
2. Go to Appearance > Custom CSS.
3. Once the CSS editor opens, click on the eye icon located in the upper right corner of the 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.
5. As you move your mouse around the page, you’ll see the elements on the page highlighted when you hover over them.
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.
7. Now, click on the Decoration tab.
8. A few new options will appear, and the background color will be among them.
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.
10. Once you’ve chosen your color, mark the checkbox.
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.
12. The plugin will let you know that the site has been updated. To see it live, simply refresh your page.
And that’s how you can use the SiteOrigin CSS plugin to change the colors on your website.
Top Themes for Creatives
View Collection
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.
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.
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.
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.
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.
5. Title options
This is where you can set all the colors which can be found in the Title area – Background, Text Title, Subtitle, and Breadcrumbs, if they’re available.
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.
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.
8. Elements
Some themes have general options for specific theme elements/shortcodes. Here you can set default colors for these elements.
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.
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.
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.
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.
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.
