Theme Color

Updated on

For Certy we are using fully customizable color scheme.

To help you pick your website colours, here is a list of colour tools and resources.

Change theme colors using css

Open certy\assets\css\style.css file and find “Color Scheme” section and make changes as described below:

/**
 * Color Scheme
 */

/* Color Primary */
This section provides styles for the all primary (blue) colored elements.
If you want for example change all blue elements to red,
change all #c0e3e7 values in this section with the #d14b4a.

/* Color Darkest */
This section provides text color all over the site.
Change all #010101 values with the color you want to use.
For the our dark version use #ffffff.

/* Color Darker */
This section provides muted elements styles ( header navigation,
muted titles and texts, slider arrows, pagination ... )
Change all #bcbcbc colors with the color you want to use.
For the our dark version use #bcbcbc.

/* Color Dark */
This section styles are responsible for the borders & left background shape color.
To customize this elements color, change #e1e1e1 value with the color you want to use.
For the our dark version use #1f1f1f.

/* Color Light */
This section styles are responsible for the body & input elements background.
To customize this elements color, change #f3f3f3 value with the color you want to use.
For the our dark version use #2a2a2a.

/* Color Lighter */
This section styles are responsible for the papers background & other light colored elements.
To customize this elements color, change #fff value with the color you want to use.
For the our dark version use #373737.

/* Buttons */
This section styles are responsible for the light & dark buttons. Change colors as you needed.
For the our dark version use following styles:

.btn-default {
    color: #fff;
    background-color: #000;
}

.btn-light {
    color: #000;
    background-color: #fff;
}

After making changes, copy style.css content, minify (you need to minify css file for the performance reasons),save in the style.min.css file and overwrite certy\assets\css\style.min.css with the created one.

Change theme colors using scss

If you have enough skills to work with the sass files, than you can easily customize theme colors from the _variables.scss file and compile style.scss file to style.css.

// ColorScheme Light
$color-primary: #c0e3e7 !default; // Primary Colored Elements
$color-darkest: #010101 !default; // Main Text
$color-darker:  #757575 !default; // Muted Texts, Header Nav, Slider Arrows, Pagination etc.
$color-dark:    #e1e1e1 !default; // Borders, Background Shape
$color-light:   #f3f3f3 !default; // Body bg, Inputs bg
$color-lighter: #ffffff !default; // Papers Bg & Other White Elements

// Buttons
$btn-default-bg: #000 !default;
$btn-default-text: #fff !default;
$btn-light-bg: #fff !default;
$btn-light-text: #000 !default;

For dark version we have used following colors:

// ColorScheme Dark
$color-primary: #d14b4a !default; // Colored Elements
$color-darkest: #ffffff !default; // Main Text
$color-darker:  #bcbcbc !default; // Muted Text, Header Nav, Slider Arrows, Pagination etc.
$color-dark:    #1f1f1f !default; // Borders, Background Shape
$color-light:   #2a2a2a !default; // Body bg, Inputs bg
$color-lighter: #373737 !default; // Papers Bg & Other White Elements

// Buttons
$btn-default-bg: #fff !default;
$btn-default-text: #000 !default;
$btn-light-bg: #000 !default;
$btn-light-text: #fff !default