##### FAQS

##### General Style

#### How to Change Font Style ?

##### Step 1:

Go To _fonts.scss (assets/scss/custom/fonts/_fonts.scss )

if you want to change another font-family Go to the site Google Fonts And Select One font Family and import In to style.css file

#### How to Select font Family

###### Example:

##### Step 2:

And paste Your Selected font-family in _fonts.scss

###### Example:

@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900");

##### Step 3:

And add the Your Selected font-family in _bootstrap-styles.scss(assets/scss/bootstrap/_bootstrap-styles.scss)

###### Example:

    	body {
    		margin: 0;
    		font-family: "Roboto", sans-serif;
    		font-size: 14px;
    		font-weight: 400;
    		line-height: 1.5;
    		color: $default-color;
    		text-align: left;
    		background-color: $background;
    	}

Note : After Changing font you must run gulp command i.e, `gulp watch` . Refer gulp page for more gulp commands click here.

#### How to change Menu icons ?

###### By default menu icons are feather icons if you want to change icons please follow below steps

###### Step 1 :

To change Menu icons, open html page and go through app-sidebar section, in that section you will find feather icons of menu in `i` tag, there you can replace previous icon with your icon. Example as shown in below

#### How to Change Logo ?

Go To "assets/images/brand" folder and replace your logo with Previous Logos within in image size. note: Please don't increase logo sizes. Replace your logo within given image size. otherwise the logo will not fit in particular place it disturbs the template design.

#### How to change Date Format ?

###### Step 1 :

To change Date Format, you have to add below js `(dateFormat: "yy-mm-dd")` in respective folder (assets/js/form-elements.js)

##### How to Enable RTL Version

#### How to Enable RTL Version?

###### Please follow the below steps to enable RTL Version

###### Step 1 :

To enable RTL Version you have to open custom.js (assets/js/custom.js) file and remove comments for `rtl` as shown in below

    											/******* RTL VERSION *******/

    											// $('body').addClass('rtl');

###### Step 2 :

Remove the comments to enable `rtl` as shown below

    											/******* RTL VERSION *******/

    											$('body').addClass('rtl');

##### Theme Styles

#### How to Enable Dark Theme?

###### Please follow the below steps to enable Dark Theme

###### Step 1 :

To enable Dark Theme you have to open custom.js (assets/js/custom.js) file and remove comments for `dark-mode` as shown in below

    										//---- Dark mode ----- //
    										// $('body').addClass('dark-mode');
    										// $('body').removeClass('light-mode');
    										// $('body').removeClass('transparent-mode');

###### Step 2 :

Remove the comments to enable `dark-mode` as shown below

    										//---- Dark mode ----- //
    										$('body').addClass('dark-mode');
    										$('body').removeClass('light-mode');
    										$('body').removeClass('transparent-mode');

#### How to Enable Transparent Theme?

###### Please follow the below steps to enable Transparent Theme

###### Step 1 :

To enable Transparent Theme you have to open custom.js (assets/js/custom.js) file and remove comments for `transparent-mode` as shown in below

    										//---- Transparent mode ----//
    										// $('body').addClass('transparent-mode');
    										// $('body').removeClass('light-mode');
    										// $('body').removeClass('dark-mode');

###### Step 2 :

Remove the comments to enable `transparent-mode` as shown below

    										//---- Transparent mode ----//
    										$('body').addClass('transparent-mode');
    										$('body').removeClass('light-mode');
    										$('body').removeClass('dark-mode');

##### Header Styles

#### How to Enable Color-header?

###### Please follow the below steps to enable Color-header

###### Step 1 :

To enable Color-header you have to open custom.js (assets/js/custom.js) file and remove comments for `color-header` as shown in below

    										/******* Header Styles ********/

    										//$('body').addClass('color-header')

###### Step 2 :

Remove the comments to enable `color-header` as shown below

    										/******* Header Styles ********/

    										$('body').addClass('color-header')

#### How to Enable Dark-header?

###### Please follow the below steps to enable Dark-header

###### Step 1 :

To enable Dark-header you have to open custom.js (assets/js/custom.js) file and remove comments for `dark-header` as shown in below

    										/******* Header Styles ********/

    										//$('body').addClass('dark-header');

###### Step 2 :

Remove the comments to enable `dark-header` as shown below

    										/******* Header Styles ********/

    										$('body').addClass('dark-header');

#### How to Enable Light-header?

###### Please follow the below steps to enable Light-header

###### Step 1 :

To enable Light-header you have to open custom.js (assets/js/custom.js) file and remove comments for `light-header` as shown in below

    										/******* Header Styles ********/

    										//$('body').addClass('light-header');

###### Step 2 :

Remove the comments to enable `light-header` as shown below

    										/******* Header Styles ********/

    										$('body').addClass('light-header');

#### How to Enable Gradient-header?

###### Please follow the below steps to enable Gradient-header

###### Step 1 :

To enable Gradient-header you have to open custom.js (assets/js/custom.js) file and remove comments for `gradient-header` as shown in below

    										/******* Header Styles ********/

    										//$('body').addClass('gradient-header');

###### Step 2 :

Remove the comments to enable `gradient-header` as shown below

    										/******* Header Styles ********/

    										$('body').addClass('gradient-header');

##### Layout Width Styles

#### How to Enable Boxed-Layout?

###### Please follow the below steps to enable Boxed-Layout

###### Step 1 :

To enable Boxed-Layout you have to open custom.js (assets/js/custom.js) file and remove comments for `layout-boxed` as shown in below

    										/*Layout-width Styles*/
    										// $('body').addClass('layout-boxed');

###### Step 2 :

Remove the comments to enable `layout-boxed` as shown below

    										/*Layout-width Styles*/
    										$('body').addClass('layout-boxed');

##### Layout Positions

#### How to Enable Scrollable-Layout?

###### Please follow the below steps to enable Scrollable-Layout

###### Step 1 :

To enable Scrollable-Layout you have to open custom.js (assets/js/custom.js) file and remove comments for `scrollable-layout` as shown in below

    										/*Header-Position Styles*/
    										// $('body').addClass('scrollable-layout');

###### Step 2 :

Remove the comments to enable `scrollable-layout` as shown below

    										/*Header-Position Styles*/
    										$('body').addClass('scrollable-layout');

##### Sidemenu layout Styles

#### How to Enable Sidemenu-Icon-with Text?

###### Please follow the below steps to enable Sidemenu-Icon-with Text

###### Step 1 :

To enable Sidemenu-Icon-with Text you have to open custom.js (assets/js/custom.js) file and remove comments for `icontext-menu` as shown in below

    											// ***** Icon with Text *****//
    											// $('body').addClass('icontext-menu');
    											// $('body').addClass('sidenav-toggled');
    											// if(document.querySelector('.icontext-menu').firstElementChild.classList.contains('login-img') !== true){
    											// icontext();
    											// }

###### Step 2 :

Remove the comments to enable `icontext-menu` as shown below

    										// ***** Icon with Text *****//
    										$('body').addClass('icontext-menu');
    										$('body').addClass('sidenav-toggled');
    										if(document.querySelector('.icontext-menu').firstElementChild.classList.contains('login-img') !== true){
    										icontext();
    										}

#### How to Enable Sidemenu-Icon Overlay?

###### Please follow the below steps to enable Sidemenu-Icon Overlay

###### Step 1 :

To enable Sidemenu-Icon Overlay you have to open custom.js (assets/js/custom.js) file and remove comments for `icon-overlay` as shown in below

    											// ***** Icon Overlay ***** //
    											// $('body').addClass('icon-overlay');
    											// $('body').addClass('sidenav-toggled');

###### Step 2 :

Remove the comments to enable `icon-overlay` as shown below

    											// ***** Icon Overlay ***** //
    											$('body').addClass('icon-overlay');
    											$('body').addClass('sidenav-toggled');

#### How to Enable Closed Sidemenu?

###### Please follow the below steps to enable Closed Sidemenu

###### Step 1 :

To enable Closed Sidemenu you have to open custom.js (assets/js/custom.js) file and remove comments for `closed-leftmenu` as shown in below

    											// ***** closed-leftmenu ***** //
    											// $('body').addClass('closed-leftmenu');
    											// $('body').addClass('sidenav-toggled')

###### Step 2 :

Remove the comments to enable `closed-leftmenu` as shown below

    											// ***** closed-leftmenu ***** //
    											$('body').addClass('closed-leftmenu');
    											$('body').addClass('sidenav-toggled')

#### How to Enable Hover Sidemenu?

###### Please follow the below steps to enable Hover Sidemenu

###### Step 1 :

To enable Hover Sidemenu you have to open custom.js (assets/js/custom.js) file and remove comments for `hover-submenu` as shown in below

    											// ***** hover-submenu ***** //
    											// $('body').addClass('hover-submenu');
    											// $('body').addClass('sidenav-toggled')
    											// if(document.querySelector('.hover-submenu').firstElementChild.classList.contains('login-img') !== true){
    											// hovermenu();
    											// }

###### Step 2 :

Remove the comments to enable `hover-submenu` as shown below

    											// ***** hover-submenu ***** //
    											$('body').addClass('hover-submenu');
    											$('body').addClass('sidenav-toggled')
    											if(document.querySelector('.hover-submenu').firstElementChild.classList.contains('login-img') !== true){
    											hovermenu();
    											}

#### How to Enable Hover Sidemenu Style 1?

###### Please follow the below steps to enable Hover Sidemenu Style 1

###### Step 1 :

To enable Hover Sidemenu Style 1 you have to open custom.js (assets/js/custom.js) file and remove comments for `hover-submenu1` as shown in below

    											// ***** hover-submenu style 1 ***** //
    											// $('body').addClass('hover-submenu1');
    											// $('body').addClass('sidenav-toggled')
    											// if(document.querySelector('.hover-submenu1').firstElementChild.classList.contains('login-img') !== true){
    											// hovermenu();
    											// }

###### Step 2 :

Remove the comments to enable `hover-submenu1` as shown below

    											// ***** hover-submenu style 1 ***** //
    											$('body').addClass('hover-submenu1');
    											$('body').addClass('sidenav-toggled')
    											if(document.querySelector('.hover-submenu1').firstElementChild.classList.contains('login-img') !== true){
    											hovermenu();
    											}

##### Landing page switcher styles

#### How to Enable Dark mode for landing page?

###### Please follow the below steps to enable Dark mode

###### Step 1 :

To enable Dark mode you have to open landing.js (assets/js/landing.js) file and remove comments for `Dark Mode` as shown in below

    										// DARK MODE
    										// $('body').addClass('dark-mode');

###### Step 2 :

Remove the comments to enable `dark-mode` as shown below

    										// DARK MODE
    										$('body').addClass('dark-mode');

#### How to Enable RTL for landing page?

###### Please follow the below steps to enable RTL

###### Step 1 :

To enable RTL you have to open landing.js (assets/js/landing.js) file and remove comments for `RTL` as shown in below

    										// RTL
    										// $('body').addClass('rtl');

###### Step 2 :

Remove the comments to enable `RTL` as shown below

    										// RTL
    										$('body').addClass('rtl');