The color scheme throughout the whole template 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 template.

First you need to create the custom.css file following this guide:

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;
Primary color scheme
Primary color scheme

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:

Primary color scheme changed
Primary color scheme changed

This is a example of how to change the standard orange color throughout the template. 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 templates use the same color scheme for consistency and a professional look. This includes pricing tables, feature boxes, highlight boxes, data tables, WHMCS 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;
Box color scheme
Box color scheme

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:

Box color scheme changed
Box color scheme changed

Comments

If you have any questions please leave a comment below or contact our support.