SCSS Configurations

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: lib/scss/config.scss

Typography

1. Font-families

Line no: 73

// Fonts
$tahoma                                                 :Tahoma, Geneva, sans-serif !global;
$times-new-roman                                        :"Times New Roman", Times, serif !global;
$trebuchet                                              :"Trebuchet MS", Helvetica, sans-serif !global;
$courier-new                                            :"Courier New", serif !global;
$verdana                                                :Verdana, Geneva, sans-serif !global;
$ff-regular                                             :"OpenSans", sans-serif !global;           // Default font family for default text
$ff-light                                               :"OpenSans_Light", sans-serif !global;     // Default font family for light text
$ff-semibold                                            :"OpenSans_SemiBold", sans-serif !global;  // Default font family for semibold text
$ff-bold                                                :"OpenSans_Bold", sans-serif !global;      // Default font family for bold text
$ff-extrabold                                           :"OpenSans_ExtraBold", sans-serif !global; // Default font family for extrabold text
To add new font-families:
Method 1: Download for FREE

Download fonts from our website and embed them directly. To download fonts for free click here.

Method 2: Create your own font-families

Steps to follow:

  1. Download Web fonts from any website
  2. Extract the font files in this location: lib/fonts/
  3. Open file: lib/scss/assets/_fonts.scss
  4. Add these lines at the end of file:
  5. 
    // Replace YOUR_FONT_NAME with the real names & FONT_FILE_NAME with real file names
    @include font(YOUR_FONT_NAME,'../fonts/FONT_FILE_NAME');
    @include font(YOUR_FONT_NAME_Light,'../fonts/FONT_FILE_NAME');
    @include font(YOUR_FONT_NAME_SemiBold,'../fonts/FONT_FILE_NAME');
    @include font(YOUR_FONT_NAME_Bold,'../fonts/FONT_FILE_NAME');
    @include font(YOUR_FONT_NAME_ExtraBold,'../fonts/FONT_FILE_NAME');
    
  6. SAVE the file
  7. Open file: lib/scss/_config.scss
  8. Go to Line No: 79
  9. Replace Line No: 78 to 82 with following code
  10. 
    // Replace YOUR_FONT_NAME with the real names
    $ff-regular                                             :"YOUR_FONT_NAME", sans-serif !global;
    $ff-light                                               :"YOUR_FONT_NAME_Light", sans-serif !global;
    $ff-semibold                                            :"YOUR_FONT_NAME_SemiBold", sans-serif !global;
    $ff-bold                                                :"YOUR_FONT_NAME_Bold", sans-serif !global;
    $ff-extrabold                                           :"YOUR_FONT_NAME_ExtraBold", sans-serif !global;
    
  11. SAVE the file and compile CSS, DONE!

2. Text colors

Line no: 132

// Text colors
$text-color                                             :#1C2B36 !global;
$link-color                                             :$text-color !global;
$hover-color                                            :$text-color !global;
$text-muted                                             :#666666 !global;
To change text color:
  1. Change the color value to the value you want. Do not remove !global at the end
  2. SAVE the file and compile it to CSS

$text-color                                             :your-color-value !global;
To change link color:
  1. Change the color value to the value you want. Do not remove !global at the end
  2. SAVE the file and compile it to CSS

$link-color                                             :your-color-value !global;
To change link hover color:
  1. Change the color value to the value you want. Do not remove !global at the end
  2. SAVE the file and compile it to CSS

$hover-color                                            :your-color-value !global;
To change muted text color:
  1. Change the color value to the value you want. Do not remove !global at the end
  2. SAVE the file and compile it to CSS

$text-muted                                             :your-color-value !global;

3. Font sizes

Line no: 138

// Font sizes
$font-base                                              :13px !global;
$font-xlg                                               :ceil(($font-base * 1.50)) !global;  // 20px
$font-lg                                                :ceil(($font-base * 1.25)) !global;  // 17px
$font-sm                                                :ceil(($font-base * 0.90)) !global;  // 12px
$font-xs                                                :ceil(($font-base * 0.80)) !global;  // 11px
To change font size:
  1. Change the value to the value you want. Do not remove !global at the end
  2. SAVE the file and compile it to CSS

$font-base                                              :your_value !global;

4. Heading sizes

Line no: 145

// Headings sizes
$h1                                                     :floor(($font-base * 2.15)) !global; // 28px
$h2                                                     :floor(($font-base * 1.90)) !global; // 24px
$h3                                                     :ceil(($font-base * 1.65)) !global;  // 21px
$h4                                                     :ceil(($font-base * 1.35)) !global;  // 18px
$h5                                                     :ceil(($font-base * 1.20)) !global;  // 16px
$h6                                                     :$font-base !global;                 // 13px
To change font size:
  1. Change the value to the value you want. Do not remove !global at the end
  2. SAVE the file and compile it to CSS

$font-base                                              :your_value !global;

5. Line height

Line no: 160

// Line height
$line-base                                              :1.8 !global;
To change line height:
  1. Change the value to the value you want. Do not remove !global at the end
  2. SAVE the file and compile it to CSS

$line-base                                              :your_value !global;

6. Letter spacing

Line no: 163

// Letter spacing
$letter-base                                            :1px !global;
$letter-xlg                                             :3px !global;
$letter-lg                                              :2px !global;
$letter-sm                                              :.8 !global;
$letter-xs                                              :.5 !global;
$heading-spacing                                        :1px !global;