{"id":1519,"date":"2019-09-09T15:00:09","date_gmt":"2019-09-09T13:00:09","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=1519"},"modified":"2022-02-03T10:30:29","modified_gmt":"2022-02-03T09:30:29","slug":"customize-wordpress-website-colors","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/customize-wordpress-website-colors\/","title":{"rendered":"How to Customize Your WordPress Website Colors"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]Say that you like the overall look of your website or blog, you\u2019ve found a perfect web hosting provider, and are more than satisfied with the theme you\u2019ve picked. There is just one small, but still important thing that you\u2019d like to change, though. You feel like you could<strong> add a more personal touch to your WordPress site<\/strong> 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 \u2013 including how to do it in <a href=\"https:\/\/qodeinteractive.com\/themes-list\/\">Qode Interactive\u2019s WordPress themes<\/a>.[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#default-customize-option\">Changing Colors Through the Default Customize Option<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#changing-colors-with-a-plugin\">Changing Colors With a Plugin<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#changing-colors-in-qode-themes\">Changing Colors in Qode Themes<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"default-customize-option\"><\/a>Changing Colors Through the Default Customize Option<\/h2>\n<p>[\/vc_column_text][vc_column_text]Before we show you how to change colors using the Customize option, we should note that <strong>these particular options depend on the theme you\u2019re using.<\/strong> We used the Twenty Twenty-One default WordPress theme for the purposes of this article, so in case <a href=\"https:\/\/qodeinteractive.com\/magazine\/find-wordpress-theme-site-is-using\/\">you\u2019re using some other theme<\/a> on your site and\/or don\u2019t have these options on your theme, <strong>you can always check out the plugin method instead<\/strong> (which we will cover a bit later).[\/vc_column_text][vc_empty_space height=&#8221;40px&#8221;][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Step 1<\/h3>\n<p>[\/vc_column_text][vc_column_text]First things first, <strong>go to <em>Appearance &gt;&gt; Customize<\/em><\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"380\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/09\/Appearance-Customize-2.jpg\" class=\"attachment-full size-full\" alt=\"Appearance Customize\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/09\/Appearance-Customize-2.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/09\/Appearance-Customize-2-300x163.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/09\/Appearance-Customize-2-620x337.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;82px&#8221;][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Step 2<\/h3>\n<p>[\/vc_column_text][vc_column_text]Once there, <strong>select the <em>Colors &amp; Dark Mode<\/em> tab<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"380\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/09\/Colors-and-Dark-Mode.jpg\" class=\"attachment-full size-full\" alt=\"Colors and Dark Mode\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/09\/Colors-and-Dark-Mode.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/09\/Colors-and-Dark-Mode-300x163.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/09\/Colors-and-Dark-Mode-620x337.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;82px&#8221;][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Step 3<\/h3>\n<p>[\/vc_column_text][vc_column_text]Here you will find the option to change your site\u2019s Background color, called <em>Select Color<\/em>. You should click on this option.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"380\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/09\/Select-Color.jpg\" class=\"attachment-full size-full\" alt=\"Select Color\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/09\/Select-Color.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/09\/Select-Color-300x163.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/09\/Select-Color-620x337.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;82px&#8221;][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Step 4<\/h3>\n<p>[\/vc_column_text][vc_column_text]This will open the color panel that you can use to<strong> add your own custom color or select the one from the palette<\/strong>. If you want to use the latter option, you can <strong>click anywhere you want on the palette, or simply drag the little circle around<\/strong> until you create the color that best suits your needs. Alternatively, you can also<strong> type the RGB code in the input field on the right.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"380\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/09\/Pick-Color.jpg\" class=\"attachment-full size-full\" alt=\"Pick Color\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/09\/Pick-Color.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/09\/Pick-Color-300x163.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/09\/Pick-Color-620x337.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;82px&#8221;][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Step 5<\/h3>\n<p>[\/vc_column_text][vc_column_text]Right next to the palette, there is also an area where you can <strong>determine whether you want to go for the lighter or darker color shade.<\/strong> You can do this by dragging the slider up or down.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"380\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/09\/Pick-Color-Slider.jpg\" class=\"attachment-full size-full\" alt=\"Pick Color Slider\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/09\/Pick-Color-Slider.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/09\/Pick-Color-Slider-300x163.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/09\/Pick-Color-Slider-620x337.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;82px&#8221;][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Step 6<\/h3>\n<p>[\/vc_column_text][vc_column_text]Once you\u2019re satisfied with your choice, click on<em> Select Color<\/em> once again.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"380\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/09\/Select-Color-2.jpg\" class=\"attachment-full size-full\" alt=\"Select Color\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/09\/Select-Color-2.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/09\/Select-Color-2-300x163.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/09\/Select-Color-2-620x337.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]As for your site\u2019s 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.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Step 7<\/h3>\n<p>[\/vc_column_text][vc_column_text]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 <strong>mark the \u201cDark mode support\u201d option<\/strong> and your site will be displayed with a dark background and light text.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"380\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/09\/Dark-Mode-Support.jpg\" class=\"attachment-full size-full\" alt=\"Dark Mode Support\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/09\/Dark-Mode-Support.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/09\/Dark-Mode-Support-300x163.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/09\/Dark-Mode-Support-620x337.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;82px&#8221;][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Step 8<\/h3>\n<p>[\/vc_column_text][vc_column_text]Also, to preview your dark scheme, you can <strong>click on the <em>Dark Mode: Off<\/em> button<\/strong> (located in the bottom right corner of the screen). This action will switch the Dark mode on:[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"380\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/09\/Dark-Mode-Off.jpg\" class=\"attachment-full size-full\" alt=\"Dark Mode Off\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/09\/Dark-Mode-Off.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/09\/Dark-Mode-Off-300x163.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/09\/Dark-Mode-Off-620x337.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"380\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/09\/Dark-Mode-On.jpg\" class=\"attachment-full size-full\" alt=\"Dark Mode On\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/09\/Dark-Mode-On.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/09\/Dark-Mode-On-300x163.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/09\/Dark-Mode-On-620x337.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;82px&#8221;][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Step 9<\/h3>\n<p>[\/vc_column_text][vc_column_text]Once you\u2019re done with setting your colors, hit the <em>Publish<\/em> button and you\u2019re all set.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"380\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/09\/Publish.jpg\" class=\"attachment-full size-full\" alt=\"Publish\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/09\/Publish.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/09\/Publish-300x163.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/09\/Publish-620x337.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;82px&#8221;][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Step 10<\/h3>\n<p>[\/vc_column_text][vc_column_text]Finally, in order to return to the user dashboard, simply<strong> click the <em>x<\/em> button<\/strong> in the top left corner of the <em>Customize<\/em> screen.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"380\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/09\/Close-Icon.jpg\" class=\"attachment-full size-full\" alt=\"Close Icon\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/09\/Close-Icon.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/09\/Close-Icon-300x163.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/09\/Close-Icon-620x337.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"changing-colors-with-a-plugin\"><\/a>Changing Colors With a Plugin<\/h2>\n<p>[\/vc_column_text][vc_column_text]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\u2019t come with many customization options, <strong>you can always use one of the tools and plugins that can be found on the web to add custom CSS<\/strong> to change everything you need. Here\u2019s how to change colors with the help of the <a href=\"https:\/\/wordpress.org\/plugins\/so-css\/\" target=\"_blank\" rel=\"noopener\">SiteOrigin CSS plugin<\/a>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]1. First,<strong> access your <em>Plugins<\/em> screen<\/strong> in the admin panel. Then, after finding the SiteOrigin CSS plugin, <strong>install and activate it<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"710\" height=\"378\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-11.jpg\" class=\"attachment-full size-full\" alt=\"SiteOrigin CSS plugin\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-11.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-11-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-11-620x330.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]2. Go to <em>Appearance &gt; Custom CSS<\/em>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"710\" height=\"378\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-12.jpg\" class=\"attachment-full size-full\" alt=\"Custom CSS Plugin\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-12.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-12-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-12-620x330.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]3. Once the CSS editor opens, <strong>click on the eye icon<\/strong> located in the upper right corner of the editor.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"710\" height=\"378\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-13.jpg\" class=\"attachment-full size-full\" alt=\"CSS editor\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-13.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-13-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-13-620x330.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]4. Now, upon clicking on the eye, a new screen will appear. On the left side, you will see a <strong>control panel<\/strong>, whereas on the right side of the screen you will have <strong>a live preview of what your page will look like<\/strong> while you edit.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"710\" height=\"378\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-14.jpg\" class=\"attachment-full size-full\" alt=\"SiteOrigin CSS plugin live preview\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-14.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-14-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-14-620x330.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]5. As you move your mouse around the page, you\u2019ll see the elements on the page highlighted when you hover over them.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"710\" height=\"378\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-15.jpg\" class=\"attachment-full size-full\" alt=\"SiteOrigin CSS WordPress plugin\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-15.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-15-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-15-620x330.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]6. Just <strong>click on the element you wish to change<\/strong> (like the page background color, for example), and you will see the element\u2019s name added in the top left corner of the control panel.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"710\" height=\"378\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-16.jpg\" class=\"attachment-full size-full\" alt=\"SiteOrigin CSS control panel\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-16.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-16-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-16-620x330.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]7. Now, <strong>click on the <em>Decoration<\/em> tab<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"710\" height=\"378\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-17.jpg\" class=\"attachment-full size-full\" alt=\"SiteOrigin CSS Description\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-17.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-17-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-17-620x330.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]8. A few new options will appear, and the background color will be among them.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"710\" height=\"378\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-18.jpg\" class=\"attachment-full size-full\" alt=\"SiteOrigin CSS Colors\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-18.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-18-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-18-620x330.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]9. <strong>Click on the input field<\/strong>, 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.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"710\" height=\"378\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-19.jpg\" class=\"attachment-full size-full\" alt=\"WordPress SiteOrigin CSS Plugin\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-19.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-19-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-19-620x330.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]10. Once you\u2019ve chosen your color, <strong>mark the checkbox<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"710\" height=\"378\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-20.jpg\" class=\"attachment-full size-full\" alt=\"Choose Color\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-20.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-20-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-20-620x330.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]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 <strong>click on Save CSS<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"710\" height=\"378\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-21.jpg\" class=\"attachment-full size-full\" alt=\"CSS editor screen\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-21.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-21-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-21-620x330.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]12. The plugin will let you know that the site has been updated. To see it live, simply <strong>refresh your page<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"710\" height=\"378\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-22.jpg\" class=\"attachment-full size-full\" alt=\"SiteOrigin\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-22.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-22-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-22-620x330.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]And that\u2019s how you can use the SiteOrigin CSS plugin to change the colors on your website.[\/vc_column_text][vc_empty_space height=&#8221;81px&#8221;][vc_widget_sidebar sidebar_id=&#8221;new-creative-banner&#8221;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"changing-colors-in-qode-themes\"><\/a>Changing Colors in Qode Themes<\/h2>\n<p>[\/vc_column_text][vc_column_text]Each of Qode Interactive\u2019s themes comes with<strong> loads of color customization options<\/strong> for various parts of your site. There are two major places where you can change your site\u2019s color scheme: <strong>the general theme settings<\/strong>, and on each <strong>page\/post itself<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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.[\/vc_column_text][vc_empty_space height=&#8221;84px&#8221;][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">1. General Theme Settings<\/h3>\n<p>[\/vc_column_text][vc_column_text]Each theme has its own general settings with options that can be specified for the theme itself. [\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"710\" height=\"378\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-23.jpg\" class=\"attachment-full size-full\" alt=\"Qode General Theme Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-23.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-23-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-23-620x330.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The options are sorted into groups, with each group relating to a specific part of your site. This provides easier website management. <strong>There are certain groups of options that are available in all our themes, while some options vary slightly from theme to theme.<\/strong> What options the theme will have greatly depends on the theme\u2019s purpose and its requirements.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]1. <em><strong>General<\/strong><\/em> options[\/vc_column_text][vc_column_text]Here you can<strong> set some of the site\u2019s generally most dominant colors<\/strong>, like <em>First\/Second Main Color<\/em> (the theme\u2019s main colors) and <em>Page Background Color.<\/em> We have to remind you not to forget that everything you adjust in the general options will apply to the entire website.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"710\" height=\"378\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-24.jpg\" class=\"attachment-full size-full\" alt=\"Qode Theme General options color\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-24.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-24-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-24-620x330.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]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).[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]2. <em><strong>Fonts<\/strong><\/em>[\/vc_column_text][vc_column_text]With our themes, it\u2019s very easy to change font colors. In the <em>Fonts<\/em> 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.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"710\" height=\"378\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-25.jpg\" class=\"attachment-full size-full\" alt=\"Qode Theme Font Colors\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-25.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-25-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-25-620x330.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]3. <em><strong>Header<\/strong><\/em> options[\/vc_column_text][vc_column_text]Header options are <strong>where you can find all the header-related settings<\/strong>, such as the header type and appearance. As for the colors, you can adjust:[\/vc_column_text][vc_empty_space height=&#8221;6px&#8221;]<ul class=\"qodef-unordered-list-item \">\n    <li>\n\t        <ul class=\"qodef-ul-items\">\n\t\t            <li class=\"qodef-ul-item\">\n\t\t\t\t                    <span class=\"qodef-ul-item-title\">Background Color<\/span><span class=\"qodef-ul-mark\">: <\/span><span class=\"qodef-ul-item-text\">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. <\/span>\n\t\t\t\t            <\/li>\n\t\t            <li class=\"qodef-ul-item\">\n\t\t\t\t                    <span class=\"qodef-ul-item-title\">Background Transparency<\/span><span class=\"qodef-ul-mark\">: <\/span><span class=\"qodef-ul-item-text\">another useful option that lets you adjust the background transparency of your header.<\/span>\n\t\t\t\t            <\/li>\n\t\t            <li class=\"qodef-ul-item\">\n\t\t\t\t                    <span class=\"qodef-ul-item-title\">Text Color<\/span><span class=\"qodef-ul-mark\">: <\/span><span class=\"qodef-ul-item-text\">you can also set the color of the text located within the header.<\/span>\n\t\t\t\t            <\/li>\n\t\t            <li class=\"qodef-ul-item\">\n\t\t\t\t                    <span class=\"qodef-ul-item-title\">Dropdown Menu Color<\/span><span class=\"qodef-ul-mark\">: <\/span><span class=\"qodef-ul-item-text\">set the background color of dropdown menus.<\/span>\n\t\t\t\t            <\/li>\n\t\t            <li class=\"qodef-ul-item\">\n\t\t\t\t                    <span class=\"qodef-ul-item-title\">Border Menu Color<\/span><span class=\"qodef-ul-mark\">: <\/span><span class=\"qodef-ul-item-text\">set the color for borders within the header menu.<\/span>\n\t\t\t\t            <\/li>\n\t\t    <\/ul>\n        <\/li>\n<\/ul>[vc_empty_space height=&#8221;12px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"710\" height=\"378\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-26.jpg\" class=\"attachment-full size-full\" alt=\"Qode Theme Header options\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-26.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-26-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-26-620x330.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]4. <strong><em>Mobile Header<\/em><\/strong> options[\/vc_column_text][vc_column_text]Some themes also have separate color options for the header that\u2019s displayed when the site is viewed on mobile devices. Here you can <strong>adjust the background, text, as well as the navigation colors<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"710\" height=\"378\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-27.jpg\" class=\"attachment-full size-full\" alt=\"Qode Theme Mobile Header options\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-27.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-27-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-27-620x330.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]5. <em><strong>Title<\/strong><\/em> options[\/vc_column_text][vc_column_text]This is where you can <strong>set all the colors which can be found in the <em>Title<\/em> area<\/strong> \u2013 <em>Background<\/em>, <em>Text Title<\/em>, <em>Subtitle<\/em>, and <em>Breadcrumbs<\/em>, if they\u2019re available.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"710\" height=\"378\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-28.jpg\" class=\"attachment-full size-full\" alt=\"Qode Theme Title options\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-28.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-28-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-28-620x330.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]6. <em><strong>Content Bottom<\/strong><\/em> options[\/vc_column_text][vc_column_text]The <em>Content Bottom<\/em> is a widget area that is displayed<strong> below the content of your pages<\/strong>. In the <em>Content Bottom<\/em> section of your theme\u2019s general options, you can set the Background Color of this area.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"710\" height=\"378\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-29.jpg\" class=\"attachment-full size-full\" alt=\"Qode Theme Content Bottom options\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-29.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-29-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-29-620x330.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]7. <em><strong>Footer<\/strong><\/em> options[\/vc_column_text][vc_column_text]Unlike the <em>Title<\/em> and <em>Header<\/em> 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.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"710\" height=\"378\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-30.jpg\" class=\"attachment-full size-full\" alt=\"Qode Theme Footer options\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-30.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-30-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-30-620x330.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]8. <em><strong>Elements<\/strong><\/em>[\/vc_column_text][vc_column_text]Some themes have general options for specific theme elements\/shortcodes. Here you can set default colors for these elements.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"710\" height=\"378\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-31.jpg\" class=\"attachment-full size-full\" alt=\"Qode Theme Elements Options\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-31.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-31-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-31-620x330.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]9. <em><strong>Side Area<\/strong><\/em> options[\/vc_column_text][vc_column_text]Some of the options available in the <em>Side Area<\/em> tab include<em> Content Overlay Background Color<\/em> and <em>Content Overlay Background Transparency<\/em>. When the side area is active, <strong>these two options are used to darken or change the color of the page in the background<\/strong>. Aside from these two options, here you can also find the color options for the icon that opens and closes the side area.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"710\" height=\"378\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-32.jpg\" class=\"attachment-full size-full\" alt=\"Qode Theme Side Area\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-32.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-32-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-32-620x330.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]10. <em><strong>Search<\/strong><\/em> options[\/vc_column_text][vc_column_text]These options are usually used for <strong>setting the color of the open\/close search icon<\/strong>, but some other options may also appear depending on the theme.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]11. <em><strong>Contact Form 7<\/strong><\/em>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"710\" height=\"378\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-33.jpg\" class=\"attachment-full size-full\" alt=\"Qode Theme Contact Form 7\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-33.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-33-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-33-620x330.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;90px&#8221;][vc_separator color=&#8221;custom&#8221; accent_color=&#8221;#f0f0f0&#8243;][vc_empty_space height=&#8221;50px&#8221;][vc_widget_sidebar sidebar_id=&#8221;bridge-banner&#8221;][vc_empty_space height=&#8221;48px&#8221;][vc_separator color=&#8221;custom&#8221; accent_color=&#8221;#f0f0f0&#8243;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Page\/Post Settings<\/h2>\n<p>[\/vc_column_text][vc_column_text]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. [\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Below the editor area on each page\/post, you will find the<strong> options for specific parts of that page or post<\/strong>. Of course, some general options (such as side area options) cannot be set up on the page individually.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"710\" height=\"378\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-34.jpg\" class=\"attachment-full size-full\" alt=\"Qode Theme Page Post settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-34.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-34-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-34-620x330.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]In case you don\u2019t see some of these options in the backend, it means they need to be switched on. You can easily do this by <strong>accessing the <em>Screen Options<\/em><\/strong>, 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.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"710\" height=\"378\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-36.jpg\" class=\"attachment-full size-full\" alt=\"WordPress Page Screen Options\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-36.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-36-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-36-620x330.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"710\" height=\"378\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-35.jpg\" class=\"attachment-full size-full\" alt=\"Screen Options Wordpress\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-35.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-35-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/WordPress-Website-Colors-35-620x330.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;79px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Conclusion<\/h2>\n<p>[\/vc_column_text][vc_column_text]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,<strong> your possibilities will depend on the range of your theme\u2019s options<\/strong>. In case you don\u2019t want to be limited in this way, <strong>you can always install a color customization plugin<\/strong> which will give you more freedom to personalize your website\u2019s colors in any way you want. However, if you\u2019re using (or plan to use) one of Qode Interactive\u2019s WordPress themes, then you\u2019re pretty much covered as far as color customization goes. This also includes the ability to <a href=\"https:\/\/qodeinteractive.com\/magazine\/wordpress-change-text-color\/\">change your WordPress text color<\/a>, header and footer colors, and any other website sections and elements.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Finally, in case you ever need some additional inspiration, you can always <a href=\"https:\/\/qodeinteractive.com\/magazine\/color-combinations\/\">check out some of the many available color combinations<\/a> for a good head start.[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>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 website colors \u2013 including how to do it in Qode Interactive\u2019s WordPress themes.<\/p>\n","protected":false},"author":2,"featured_media":10257,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[15,4,13],"class_list":["post-1519","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-plugins","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/1519","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=1519"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/1519\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/10257"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=1519"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=1519"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=1519"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}