SCSS Configurations


Please note in order to change template configurations through config.scss file, you must have knowledge of SASS compilation. A SASS compiler must be installed and running in order to save the changes in .scss file. If you need any support regarding this, please contact us.

If you want to change the configurations for the template you can do it just by changing values in config.scss file.

Location: lib/scss/config.scss

Theme settings

1. Default theme color

Line no: 192

$theme-color                                            :#23B7E5 !global;   // This will work as default color for bootstrap elements and other color settings

2. Theme style

Theme style applies border radius to the elements, if you set style as FLAT birder radius will be removed and all elements will be sharp cornered.
Line no: 194

// Style
$style                                                  :'rounded' !global; // Options: 'rounded', 'flat'
$radius                                                 :2px !global;       // Works when Style is selected to 'rounded'

3. Scrollbar

Line no: 198

// Scrollbar
$scrollbar-style                                        :'rounded' !global; // Options: 'rounded', 'flat'
$scrollbar-color                                        :#23B7E5 !global;

4. Box-shadows

Line no: 202

// Box-shadows
$shadow-style                                           :'flat' !global;
$shadow-color                                           :#E3E4E5 !global;
$shadow-opacity                                         :0.5 !global;
$shadow-blur-radius                                     :2px !global;
$shadow-spread-radius                                   :2px !global;
$shadow-vertical-offset                                 :2px !global;
$shadow-horizontal-offset                               :2px !global;

5. Main body background

Line no: 211

// Main body background
$body-bg                                                :#F0F3F4 !global;

6. Topbar

Line no: 214

// Topbar
$topbar-vertical-padding                                :0;     // Padding in 'px'
$topbar-horizontal-padding                              :0;     // Padding in 'px'

7. Branding

Line no: 218

// Branding
$logo-width                                             :95px;
$logo                                                   :'../../img/logo-light.png';
$logo-mobile                                            :'../../img/logo-dark.png';
$brand-bg-color                                         :$text-color;
$brand-border-bottom-color                              :none;
$brand-border-right-color                               :$text-color;

8. Main navbar

Line no: 226

// Main navbar
$navbar-shadow                                          :'true';
$navbar-bg-color                                        :#FFFFFF;
$navbar-border-bottom-color                             :none;

9. Navbar icons

Line no: 231

// Navbar icons
$icons-color                                            :#58666E;

10. Searchbar

Line no: 234

// Searchbar
$search-icon-color                                      :$text-color;
$search-text-color                                      :$text-color;

11. Quick apps dropdown

Line no: 238

// Quick apps dropdown
$quick-apps-dropdown-shadow                             :'true';
$quick-apps-dropdown-border                             :#DDDDDD;
$quick-apps-dropdown-bg                                 :#FFFFFF;
$quick-apps-label-bg                                    :$theme-color;
$quick-apps-label-color                                 :#FFFFFF;

12. User profile dropdown

Line no: 245

// User profile dropdown
$navbar-username-text-color                             :$text-color;
$navbar-userinfo-text-color                             :$theme-color;
$user-dropdown-shadow                                   :'true';
$user-dropdown-border                                   :#DDDDDD;
$user-dropdown-bg                                       :#FFFFFF;
$user-profile-bg                                        :#DDDDDD;
$user-name-text-color                                   :#222222;
$user-links-color                                       :#222222;
$logout-button-bg                                       :$theme-color;
To change theme settings:
  1. Change the values.
  2. SAVE the file and compile it to CSS