NopMekanik – (5) Customize Your Own Colors

Please make sure you have read our Theme Documentation

before proceeding to the steps below.

Below are the variables values for the six predefined theme colors in NopMekanik.

Blue

$primary-color: #0d3c5f;

$secondary-color: #f9c937;

$menu-text-color: #0d3c5f;

$button-text-color: #343434;

$button-hovered-text-color: #f9c937;

Green

$primary-color: #267326;

$secondary-color: #f9c937;

$menu-text-color: #274f27;

$button-text-color: #343434;

$button-hovered-text-color: #f9c937;

Teal

$primary-color: #195767;

$secondary-color: #f7bb5e;

$menu-text-color: #1b3f4f;

$button-text-color: #1b3f4f;

$button-hovered-text-color: #f7bb5e;

Grey

$primary-color: #32434c;

$secondary-color: #ee633f;

$menu-text-color: #ffffff;

$button-text-color: #ffffff;

$button-hovered-text-color: #f7bb5e;

Orange

$primary-color: #f0542d;

$secondary-color: #f8be1c;

$menu-text-color: #364352;

$button-text-color: #364352;

$button-hovered-text-color: #ffffff;

Black

$primary-color: #353535;

$secondary-color: #ffd200;

$menu-text-color: #343434;

$button-text-color: #343434;

$button-hovered-text-color: #ffd200;

1. To build your own theme color, first set “customize” value for NopMekanik.color option at advanced settings.

2. To generate your own colors, simply change the color values for all five

3. After updating the values in customize.scss, visit http://www.cssportal.com/scss to-css

4. Now paste your customize.scss codes (all) into SCSS field. Hit “Compile” button and wait…

5. Once the compilation is completed, copy the generated CSS codes and update customize.css file.

6. Replace the customize.css file in your NopMekanik theme/css/color folder.

Please watch our video for detailed instructions. Thanks.

https://screencast-o-matic.com/watch/cFfTQobXPT