Let’s say you like the overall look of your website or blog, you’ve found the perfect web hosting provider, and you’re more than happy with the theme you’ve chosen. There is still one small but still important thing that you want to change. you feel you can Add a more personal touch to your WordPress site by changing the color scheme. To make this process easier for you, we’ll show you a few different ways to set your WordPress colors – including how to do this in WordPress themes from Qode Interactive.
Before we show you how to change colors using the customize option, we should point out that: these specific options depend on the theme you are using. For the purposes of this article we have used the Twenty Twenty-One default WordPress theme, so if you are using another theme on your site and/or your theme does not have these options, you can always check the plugin method instead (we’ll cover it a little later).
Stage 1
Everything in order to go Appearance >> Customize.
step 2
once there, choose Colors and Dark Mode tab.
Stage 3
Here you will find the option to change the Background color of your site. choose color. You must click on this option.
Step 4
This will open the color panel you can use. add your own custom color or choose from the palette. If you want to use the second option, click anywhere on the palette or drag the small circle around it until you create the color that best suits your needs. Alternatively, you can also: Type the RGB code in the right input field.
step 5
There is also an area right next to the pallet where you can do it. Determine if you want to go for a lighter or darker shade. You can do this by dragging the slider up or down.
Step 6
When you are satisfied with your selection, click on it. choose color once again.
As for the elements of your site, they will always be automatically calculated and adjusted according to the background colors you choose. This is great because it ensures that the contrast between the background and elements is always high enough for users to see it easily.
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 if they want it to be displayed that way. simply Check the “Dark mode support” option and your site will be displayed with a dark background and clear text.
Step 8
Also, to preview your dark layout, you can: click Dark Mode: Off button (located in the lower right corner of the screen). This action turns on Dark mode:
Step 9
After you’ve finished adjusting your colors, Publish Press the button and you’re all set.
step 10
Finally, to get back to the user control panel, simply click x button in the upper left corner 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 a lot of customization options, you can always use one of the tools and plugins available on the web to add custom CSS. to replace everything you need. Here’s how to change colors with the help of it. SiteOrigin CSS plugin.
1. First, to your access Additions screen in the admin panel. Then, after finding the SiteOrigin CSS plugin, install and activate.
2. Go Appearance > Custom CSS.
3. When the CSS editor opens, click on the eye icon It is located in the upper right corner of the editor.
4. Now clicking the eye will open a new screen. One on the left control Panelon the right side of the screen a live preview of what your page will look like while editing.
5. While moving your mouse around the page, you will see the items on the page are highlighted when you hover over them.
6. Just click on the item you want to change (such as the page background color) and you’ll see the item’s name added in the top left corner of the control panel.
7. Now, click Decoration tab.
8. Several new options will appear and the background color will be among them.
9. Click in the input field, and you’ll be greeted with the color picker again. You can choose the color you want by moving the small circle or typing the color RGB code in the input field. You can preview all the changes on the right.
10. After choosing your color, tick the checkbox.
11. You will return to the CSS editor screen where you will see your CSS added. all you have to do Click Save CSS.
12. The plugin will notify you that the site has been updated. Just to see it live refresh your page.
This is how you can use the SiteOrigin CSS plugin to change the colors on your website.
Each of Qode Interactive’s themes comes with: lots of color customization options for various parts of your site. There are two main places where you can change the color scheme of your site: general theme settingsand in each page/post itself.
The options you customize in the general settings will apply to your entire website, while the items you set on the page or post will (naturally) apply only to that page/post.
1. General Theme Settings
Each theme has its own general settings with options that can be specified for the theme itself.
The options are grouped into groups, with each group related to a specific part of your site. This provides easier website management. There are certain sets of options available in all of our themes, but some options differ slightly from theme to theme. What options the theme will have depends largely on the purpose and requirements of the theme.
one. general Options
you can here set some of the site’s most dominant colors overalllike First/Second Primary Color (the main colors of the theme) and Page Background Color. We need to remind you to remember that everything you set in the general options will apply to the entire site.
Here you can also find options such as Text Selection Color (choose the colors users will see when selecting any text on your page) and Page Loader Background Color (the color that is visible before the page loads).
2nd. Fonts
It’s easy to change font colors with our themes. Inside Fonts In the section of the Options panel, you can adjust the colors of all headings (1 to 6), paragraphs, links, and hover colors.
3. title Options
Title options where you can find all the header related settings, such as header type and appearance. As for the colors, you can adjust:
4. Mobile Header Options
Some themes also have separate color options for the title displayed when the site is viewed on mobile devices. you can here set background, text and navigation colors.
5. Title Options
this is where you can Set all the colors that can be found in it. Title domain – Background, Text Title, Subtitleand Breadcrumbsif they are available.
6. Content Sub Options
this Content Sub is a displayed widget area below the content of your pages. Inside Content Sub You can set the Background Color of this area from the general options section of your theme.
7. sub information Options
on the contrary Title and title options where you can set 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 used in the footer.
8. elements
Some themes have global options for specific theme elements/shortcodes. Here you can set the default colors for these items.
9. Side Area Options
Some of the options available in Side Area tab included Content Layout Background Color and Content Layout 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. In addition to these two options, you can find the color options of the icon that turns the side area on and off.
10. Call Options
These options are usually set the color of the toggle search iconhowever, other options may appear depending on the theme.
11th. Contact Form 7
Here you can customize all the colors related to the Contact Form 7 plugin (a great tool that allows you to gather information, ask your visitors to add them to your mailing list, etc.). Multiple styles are available and you can choose the text, background, border and button color for each style.
Page/Post Settings
As we mentioned earlier, if you want to change the color options for a particular page or post, you can do so from the page or post itself.
Below the editor area on each page/post, options for certain parts of that page or post. Of course, some global options (like side field options) cannot be set individually on the page.
If you don’t see some of these options in the backend, it means they should be turned on. You can easily do this here: access Display Options, located in the upper right corner of the page. There you can check all unmarked fields and the relevant options will appear in your page/post settings.
Solution
And that wraps up our guide on how to set WordPress website colors. As you can see, there are many different ways to customize colors in WordPress. Comprehensive, your possibilities will depend on the range of your theme’s options. If you don’t want to be limited in this way, you can always install a color customization plugin this will give you more freedom to customize your website colors the way you want. However, if you’re using (or planning to use) one of Qode Interactive’s WordPress themes, you’re pretty much covered when it comes to color customization. This also includes the ability to change your WordPress text color, header and footer colors, and other website parts and elements.
Finally, in case you need a little more inspiration, you can always take a look at some of the many color combinations available to get off to a good start.
