FAQ'S
1) 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 Slect 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: 0.8375rem;
font-weight: 400;
line-height: 1.5;
color: $default-color;
text-align: left;
background-color: $background;
}
2) How to change Menu icons ?
By default menu icons are themify icons if you want to change icons please follow below steps
Step 1 :
To change Menu icons, open html page and go through main-sidebar
section, in that section you will find themify icons of menu in i
tag, there you can replace previous icon with your icon. Example as shown in below
How to Change Primary Color?
Please follow the bellow steps to change Primary Color
Step 1 :
To change Primary Color you have to open _variables.scss file and replace what color you want as shown in below
Rootpath : _variables.scss (assets/scss/__variables.scss )
Note : After Changing color you must run gulp command's . Refer gulp page for more gulp commands click here.
4) 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.
5) How to Enable RTL version?
Changing to RTL version
open index.html path:(src/index.html). and
class 'rtl' to enable RTL version as shown in below
<body class="rtl">
...
<body>
6) How to Enable Darktheme?
open index.html path:(src/index.html). and
class 'dark-mode' to enable Dark mode version as shown in
below
<body class="dark-mode">
...
<body>
7) How to Enable Color-header?
open index.html path:(src/index.html). and
class 'color-header' to enable Color header version as
shown in below
<body class="color-header">
...
<body>
8) How to Enable Dark-header?
open index.html path:(src/index.html). and
class 'dark-header' to enable Dark header version as shown
in
below
<body class="dark-header">
...
<body>
9) How to Enable Light-header?
open index.html path:(src/index.html). and
class 'header-light' to enable Header ight version as
shown in
below
<body class="header-light">
...
<body>
10) How to Enable Light Menu?
open index.html path:(src/index.html). and
class 'light-menu' to enable Light menu version as shown in below
<body class="light-menu">
...
<body>
11) How to Enable Color Menu?
open index.html path:(src/index.html). and
class 'color-menu' to enable Color menu version as shown in below
<body class="color-menu">
...
<body>
12) How to Enable Dark Menu?
open index.html path:(src/index.html). and
class 'dark-menu' to enable Dark menu version as shown in below
<body class="dark-menu">
...
<body>
13) How to Enable Boxed-Layout?
open index.html path:(src/index.html). and
class 'layout-boxed' to enable layout-boxed version as shown in below
<body class="layout-boxed">
...
<body>
14) How to Enable Scrollable-Layout?
open index.html path:(src/index.html). and
class 'scrollable-layout' to enable scrollable-layout version as shown in below
<body class="scrollable-layout">
...
<body>
15) How to Enable Horizontal layout
Please follow the below steps to enable Horizontal Click Menu Style
To enable Horizontal Click Menu Style you have to open full-content.component.ts (src\app\shared\components\layout\full-content\full-content.component.ts) add function in the constructor
/*Horizontal start*/
//add
appSidebar?.classList.add('horizontal-main');
mainContent?.classList.add('hor-content');
mainContainer.forEach((e:any)=>{
e.classList.add('container')
})
header?.classList.add('hor-header');
appSidebar?.classList.add('horizontal-main');
mainSidemenu?.classList.add('container');
sideMenu?.classList.add('flex-nowrap');
// remove
sideMenu?.classList.remove('flex-wrap');
mainContent?.classList.remove('app-content');
mainContainer.forEach((e:any)=>{
e.classList.remove('container-fluid')
})
header?.classList.remove('app-header');
body?.classList.remove('sidebar-mini');
body?.classList.remove('sidenav-toggled');
body?.classList.remove('horizontal-hover');
/*Horizontal end*/
16) How to Enable Horizontal Hover layout
Please follow the below steps to enable Horizontal Hover Menu Style
To enable Horizontal Hover Menu Style you have to open full-content.component.ts (src\app\shared\components\layout\full-content\full-content.component.ts) add function in the constructor
/*Horizontal Hover start*/
//add
body?.classList.add('horizontal');
body?.classList.add('horizontal-hover');
mainContent?.classList.add('hor-content');
mainContainer.forEach((e:any)=>{
e.classList.add('container')
})
header?.classList.add('hor-header');
appSidebar?.classList.add('horizontal-main');
mainSidemenu?.classList.add('container');
sideMenu?.classList.add('flex-nowrap');
// remove
sideMenu?.classList.remove('flex-wrap');
mainContent?.classList.remove('app-content');
mainContainer.forEach((e:any)=>{
e.classList.remove('container-fluid')
})
header?.classList.remove('app-header');
body?.classList.remove('sidebar-mini');
body?.classList.remove('sidenav-toggled');
/*Horizontal Hover end*/
17) How to Remove Switcher
open header.component.html path:(src/app/shared/layout-components/header/header.component.html) Remove below code
18) How to remove Loader
open app.component.html path:(src/app/app.component.html) Remove below code
If you want to change loader image
open app.component.html path:(src/app/app.component.html)change the image path