---
description: Scss base approach will make a better customization in styling template
---

# Style Customization

### **Design style customization**

Angly is developed with [Bootstrap 4](https://v4-alpha.getbootstrap.com/getting-started/introduction/) so its easy to change the styling for your app. It uses bootstrap variables along with some custom variables which provides you the more flexibility and control over design

#### **Changing Default Variables**

Open `_bootstrap-override.scss` file under `assets/scss` folder and change style variable values as per your requirement.

#### **Change Theme Colors**

```
// Start with assigning color names to specific hex values.
 
 
$blue:              #0066EB !default;     //Manage default primary color
$green:             #00caac !default;     //Manage default Success color
$teal:              #51CAE3 !default;     //Manage default info color
$orange:            #ff5723 !default;     //Manage default warning color
$red:               #F54B5E !default;     //Manage default danger color
```



#### **Changing Basic Variables**

`_custom.var.scss` file holds custom style variables. They can be used to change css attribute values like border color, font colors etc.

```
        /*=========== Custom Variables integrated =============*/
//--- Html Variables ---//
$html-font-size:                    16px;
 
//--- Main Menu ---//
$menu-bg-color:                     rgba(255, 255, 255, 1);
$menu-nav-color:                    $gray-700;
 
//--- Preloader variable ---//
$perloader-bg-overlay:              rgba(20, 24, 40, 0.87);
$preloader-bg-one:                  $blue;
$preloader-bg-two:                  $orange;
 
//--- Square box ---//
$square-font-size:                  0.5; // 50% relative to the container
$square-box:                        (10, 15, 20, 30, 40, 50, 60, 70, 100);
 
//--- Back to top style ---//
 
$to-top-bg:                             #fff !default;
$to-top-border-color:                   $gray-500 !default;
$to-top-border-radius:                  5em !default;
$to-top-icon-color:                     $blue !default;
$to-top-icon-hover-color:               #fff !default;
```

Google font example

```
1 <link href="https://fonts.googleapis.com/css?family=Montserrat:100,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,900" rel="stylesheet">
```

