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

Bootstrap elements

Bird uses SCSS Configurations for styling default elements of Bootstrap. You can change look of these elements just by changing the values in _config.scss

1. Panels

Line no: 385

// Panels
$panel-shadow                                           :'true';
$panel-bg                                               :#FFFFFF;
$panel-border-thickness                                 :1;
$panel-border-color                                     :$body-bg;
$panel-title-padding-vertical                           :5;
$panel-title-padding-horizontal                         :15;
$panel-header-bg                                        :#FFFFFF;
$panel-title-text-size                                  :16px;
$panel-title-font-family                                :$ff-regular;
$panel-title-text-color                                 :lighten($text-color,20%);
$panel-title-text-align                                 :left;
$panel-body-padding-vertical                            :12;
$panel-body-padding-horizontal                          :15;
$panel-body-text-color                                  :$text-color;
$panel-footer-padding-vertical                          :8;
$panel-footer-padding-horizontal                        :15;
$panel-footer-bg                                        :#FCFCFC;
$panel-footer-text-color                                :$text-color;

2. Dropdown Menus

Line no: 405

// Dropdown Menus
$dropdown-menu-shadow                                   :'true';
$dropdown-menu-width                                    :180px;
$dropdown-menu-border-thickness                         :1;
$dropdown-menu-border-color                             :#DDDDDD;
$dropdown-menu-bg                                       :#FFFFFF;
$dropdown-menu-header-color                             :lighten($text-color,40%);
$dropdown-menu-header-highlight-bg                      :lighten($text-color,40%);
$dropdown-menu-header-highlight-color                   :#FFFFFF;
$dropdown-menu-link-color                               :$text-color;
$dropdown-menu-link-hover-bg                            :$theme-color;
$dropdown-menu-link-hover-text-color                    :#FFFFFF;

3. Lists Menus

Line no: 418

// Lists
$list-group-shadow                                      :'true';
$list-group-bg                                          :#FFFFFF;
$list-group-border-thickness                            :0;
$list-group-border-color                                :#DDDDDD;
$list-group-header-bg                                   :#FFFFFF;
$list-group-header-text-color                           :lighten($text-color,40%);
$list-group-link-color                                  :#1C263C;
$list-group-link-hover-bg                               :lighten($theme-color,45%);
$list-group-link-hover-color                            :$text-color;
$list-group-link-active-bg                              :$theme-color;
$list-group-link-active-color                           :#FFFFFF;

4. Modals

Line no: 431

// Modals
$modal-shadow                                           :'false';
$modal-backdrop-opacity                                 :0.8;
$modal-bg                                               :#FFFFFF;
$modal-border-thickness                                 :1;
$modal-border-color                                     :transparent;
$modal-header-footer-padding-vertical                   :15;
$modal-header-footer-padding-horizontal                 :20;
$modal-body-padding-vertical                            :15;
$modal-body-padding-horizontal                          :20;
$modal-header-footer-border                             :'false';
$modal-header-footer-border-thickness                   :0;
$modal-header-footer-border-color                       :transparent;
$modal-header-footer-bg-color                           :darken($modal-bg,4%);
$modal-title-font                                       :$ff-semibold;
$modal-title-font-size                                  :16px;
$modal-title-text-color                                 :$text-color;

5. Pagination

Line no: 449

// Pagination
$pagination-bg                                          :#FFFFFF;
$pagination-border-color                                :#DEE5E7;
$pagination-text-color                                  :#111111;
$pagination-hover-bg                                    :lighten($theme-color,45%);
$pagination-hover-color                                 :#111111;
$pagination-active-bg                                   :$theme-color;
$pagination-active-color                                :#FFFFFF;

6. Tabs & pills

Line no: 458

// Tabs & pills
$tabs-text-color                                        :$text-color;
$tabs-active-border-color                               :#DEE5E7;
$tabs-active-bg                                         :#FFFFFF;
$tabs-active-text-color                                 :$theme-color;
$tabs-bottom-border-color                               :#DEE5E7;
$tabs-content-border-color                              :#FFFFFF;
$tabs-content-padding-vertical                          :0;
$tabs-content-padding-horizontal                        :0;
$tabs-content-bg                                        :#FFFFFF;
$tabs-content-text-color                                :$text-color;
$tabs-highlight-border-color                            :$theme-color;

7. Tables

Line no: 471

// Tables
$table-header-footer-border                             :#EAEFF0;
$table-header-footer-bg                                 :#FFFFFF;
$table-header-footer-text-color                         :$text-color;
$table-row-border                                       :#EAEFF0;
$table-row-bg                                           :#FFFFFF;
$table-row-hover-bg                                     :#FAFBFC;
$table-row-striped-bg                                   :#FAFBFC;
$table-data-text-color                                  :$text-color;

8. Forms

Line no: 481

// Forms
$placeholder-text-color                                 :lighten($text-color,60%);
$form-control-border                                    :#EAEFF0;
$form-control-bg                                        :#FAFBFC;
$form-control-text-color                                :$text-color;
$form-input-group-addon-bg                              :darken($form-control-bg,6%);
$form-input-group-addon-border                          :#EAEFF0;
$form-input-group-addon-text-color                      :darken($form-control-bg,35%);
$tags-bg                                                :$theme-color;
$tags-text-color                                        :#FFFFFF;

9. Checkboxes and radiobuttons

Line no: 492

// Checkboxes and radiobuttons
$checkbox-shadow                                        :'true';
$checkbox-border-color                                  :#FAFBFC;
$checkbox-bg                                            :darken($body-bg,2%);
$checkbox-tick-color                                    :$theme-color;
To change bootstrap elements:
  1. Change the values.
  2. SAVE the file and compile it to CSS