SCSS Configuration

Important

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: [root]/layout/default/ltr/assets/scss/_config.scss

Content Direction

$direction                                              :ltr;    //You can change the content direction using this variable
Default theme color

$theme-color                                            :#4361ee; !global;   // This will work as default color for bootstrap elements and other color settings
Pace preloader color

$pace-color                                             :$success !global;   // This will work as default color for Pace preloader
Text color

// Text colors
$text-color                                             :#212121;
$link-color                                             :$theme-color;
$hover-color                                            :lighten($link-color, 5%);
$text-muted                                             :#96a2ba;
Brand colors

These colors are used as default colors for different elements.


$brand-color-dark                                       :$theme-color;
$brand-color-light                                      :#96a2ba;
Global colors

Set default border colors, background colors and text color on hover.


$global-border-color                                    :rgba($black,0.06);
$global-hover-bg-color                                  :#f2f6fa;
$global-hover-text-color                                :$text-color;
Template style

Change template style to rounded or flat as per your taste. If you want a really rounded style, you can also change the roundness of elements by changing radius value.


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

Change scrollbar colors and settings.


// Scrollbar
$scrollbar-style                                        :'flat';    // 'flat', 'rounded'
$scrollbar-track-color                                  :transparent;
$scrollbar-color                                        :$theme-color;
Shadows

Change global shadows colors and settings.


// Box-shadows
$shadows                                                :'true';
$shadow-style                                           :'gradient';
$shadow-vertical-offset                                 :0px;
$shadow-horizontal-offset                               :0px;
$shadow-blur-radius                                     :20px !global;
$shadow-spread-radius                                   :1px !global;
$shadow-color                                           :#96a2ba;
$shadow-opacity                                         :0.1;