The color scheme throughout the whole WordPress Theme is handled using CSS variables found in layout.css. You can easily change the color scheme by editing these variables, doing so will instantly updated every reference of that color in the theme.
First you need to create the custom.css file.
Once you have created the custom.css file you can customize the default color scheme. We will show some examples below, keep in mind each block also has a active (used for hover/highlight) that would need to be edited in the same way.
Changing the primary color
In Stellar for example the primary color is orange. The orange set of colors are defined in layout.css:
/* Primary color */
--color-primary-background: #f09546;
--color-primary-background-gradient-top: #f09546;
--color-primary-background-gradient-bottom: #f09546;
--color-primary-background-border: #df7e37;
--color-primary-background-shadow: #000;
--color-primary-foreground: #f1f1f1;
--color-primary-foreground-shadow: #000;
This CSS allows you change the color of every element such as the background, border, foreground etc. Let's say for example you wanted to change to a blue color scheme, all you need to do is add the above block to custom.css (within :root) and change the hex codes. For example:
:root {
/* Primary color */
--color-primary-background: #2f44c3;
--color-primary-background-gradient-top: #2f44c3;
--color-primary-background-gradient-bottom: #0b21a4;
--color-primary-background-border: #000;
--color-primary-background-shadow: #000;
--color-primary-foreground: #fff;
--color-primary-foreground-shadow: #000;
}Using the blue example above the same button (and all orange elements) will now display as:
This is a example of how to change the standard orange color throughout the theme. You can also follow this same step to change the orange active state (e.g hovering over buttons) and also the secondary color.
Changing the box color
All of the box elements within our themes use the same color scheme for consistency and a professional look. This includes pricing tables, feature boxes, highlight boxes, data tables, software elements and more.
The CSS of the box color found in layout.css is:
/* Box color */
--color-box-background: #f5f5f5;
--color-box-background-gradient-top: #f5f5f5;
--color-box-background-gradient-bottom: #f5f5f5;
--color-box-background-border: #dddddd;
--color-box-background-shadow: #dddddd;
--color-box-background-divider: #dbdada;
--color-box-foreground: var(--color-body);
--color-box-foreground-shadow: #fff;
--color-box-foreground-bold: #243141;
--color-box-foreground-bold-shadow: #fff;
--color-box-head-background: #3f3e3e;
--color-box-head-background-gradient-top: #3f3e3e;
--color-box-head-background-gradient-bottom: #3f3e3e;
--color-box-head-background-border: #dddddd;
--color-box-head-foreground: #fff;
--color-box-head-foreground-shadow: #000;
--color-box-head-foreground-bold: #fff;
--color-box-head-foreground-bold-shadow: #000;
--color-box-footer-background: #dddddd;
--color-box-footer-background-gradient-top: #dddddd;
--color-box-footer-background-gradient-bottom: #dddddd;
--color-box-footer-background-border: #cbcbcb;
--color-box-footer-foreground: #3f3e3e;
--color-box-footer-foreground-shadow: #3f3e3e;
--color-box-footer-foreground-bold: #000;
--color-box-footer-foreground-bold-shadow: #000;
To change the color scheme wrap this CSS in :root, add to custom.css and edit the values of the colors you want to change. For example:
:root {
/* Box color */
--color-box-background: #dddddd;
--color-box-background-gradient-top: #dddddd;
--color-box-background-gradient-bottom: #dddddd;
--color-box-background-border: #a9aaac;
--color-box-background-shadow: #a9aaac;
--color-box-background-divider: #d0cece;
--color-box-foreground: var(--color-body);
--color-box-foreground-shadow: #fff;
--color-box-foreground-bold: #243141;
--color-box-foreground-bold-shadow: #fff;
--color-box-head-background: var(--color-primary-background);
--color-box-head-background-gradient-top: var(--color-primary-background);
--color-box-head-background-gradient-bottom: var(--color-primary-background);
--color-box-head-background-border: #dddddd;
--color-box-head-foreground: var(--color-primary-foreground);
--color-box-head-foreground-shadow: var(--color-primary-foreground-shadow);
--color-box-head-foreground-bold: transparent;
--color-box-head-foreground-bold-shadow: transparent;
--color-box-footer-background: #c4c2c2;
--color-box-footer-background-gradient-top: #c4c2c2;
--color-box-footer-background-gradient-bottom: #c4c2c2;
--color-box-footer-background-border: #908f8f;
--color-box-footer-foreground: #3f3e3e;
--color-box-footer-foreground-shadow: #3f3e3e;
--color-box-footer-foreground-bold: #000;
--color-box-footer-foreground-bold-shadow: transparent;
}In this example we have changed the hex values to use a darker grey color scheme. The results of this change are:
Request Support
We hope you found this documentation useful. If you run into any issues we will be happy to assist you.