shades - Customization

# Customization

Learn how to create your own style without changing the theme’s core files so you can take advantage of future updates.

### Sass

It's highly recommended that all the customized styles to be wriiten only within the `custom.scss` file from the scss folder so you can update this theme anytime with no effort. When you update Shade, make sure you backup your `custom.scss` file, that may contain styles you have created already.

`custom.scss` file is dedicated for custom edit and additions.

## How to include a typeface?

Add or change shades typography with the following instructions.

### With SASS

- open `scss/settings.scss` file and update your typeface from the top.

                                                      // Fonts
                                                      @import url('https://fonts.googleapis.com/css?family=Karla:400,400i,700,700i&display=swap');

### With CSS

1. open `css/settings.css` file and update your typeface from the top.

                                                       // Fonts
                                                       @import url('https://fonts.googleapis.com/css?family=Karla:400,400i,700,700i&display=swap');

2. Open `css/custom.css` files and simply replace the `font-family` from `<body>`.

                                                       body {
                                                           font-family: "Karla", sans-serif, "Aileron", sans-serif;
                                                         }

## How to update colors?

There are two options you have to update the colors.

- ### Applying your own colors using from SCSS

  open `scss/helpers/_variables.scss` files and update your color from the variable list.

  For example, if you need to change the primary color, all you need to do is replace `$primary-color` color value/code with your own color value/code.

                                                      $primary-color:                                                       #1290a4;

- ### Applying your own colors from CSS

  Open `css/custom.css` files and simply replace the color codes of `background, color, box-shadow, border-color` properties with yours.

                                                  .border-primary, .hr--blod, .btn--color-primary, .btn--color-dark.btn-text-hover:hover, .btn--outline:hover, .btn--outline-thick:hover, .btn-text-hover:hover {
                                                      border-color: #2f5bea;
                                                    }

## How to Change Logo?

open `index.html` file. look for the block called `<!-- Brand Logo -->` and change the image `src=""`:

                                                    <!-- Brand Logo -->
                                                    <div class="brand-logo">
                                                        <a href="">
                                                            <img src="image/main-logo.png" alt="" />
                                                        </a>
                                                    </div>

## How to Change the Copyright Text

open `index.html` file. look for the block called `<!-- Copyright Block -->` and change the Text inside the `p` Tag :

                                                    <!-- Copyright Block -->
                                                    <div class="copyright-block">
                                                        <p>
                                                            <img src="image/main-logo.png" alt="" />
                                                        </p>
                                                    </div>