FAQS
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: 'Nunito Sans', sans-serif !important;
font-size: .81rem;
text-align: start;
font-weight: 500;
background: $background;
overflow-x: hidden;
line-height: 1.5;
color: #495046;
}
2) 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.
3) 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>
4) 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>
5) 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>
6) How to Enable Light-header?
open index.html path:(src/index.html). and
class 'light-header' to enable Header ight version as
shown in
below
<body class="light-header">
...
<body>
7) How to Enable Gradient-header?
open index.html path:(src/index.html). and
class 'gradient-header' to enable Header ight version as
shown in
below
<body class="gradient-header">
...
<body>
8) 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>
9) 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>
10) 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>
11) How to Enable Gradient Menu?
open index.html path:(src/index.html). and
class 'gradient-menu' to enable gradient menu version as shown in below
<body class="gradient-menu">
...
<body>
12) 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>
13) 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>
21) 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>
22) How to Enable Horizontalmenu?
23) 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-layout.component.ts (src\app\shared\layout-components\layout\full-layout\full-layout.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*/
25) How to Enable Horizontal Centerlogo
Changing Center logo
open index.html path:(src/index.html). and
class 'center-logo' to enable center logo as shown in below
<body class="center-logo">
...
<body>
Theme Style
How to Change Primary Color for Light & Dark Themes?
Please follow the below steps to Change Primary Color
Step 1 :
To change Primary Color you have to open _bootstrap-styles.scss file and replace what color you want as shown in below
Rootpath : _bootstrap-styles.scss (assets/scss/bootstrap/_bootstrap-styles.scss )
Step 2 :
Note : After Changing color you must run gulp command i.e, gulp watch . Refer gulp page for more gulp commands click here.
How to Change Dark Theme Color?
Please follow the below steps to Change Dark Theme Color
Step 1 :
To change Dark Theme Color you have to open _bootstrap-styles.scss file and replace what color you want as shown in below
Rootpath : _bootstrap-styles.scss (assets/scss/bootstrap/_bootstrap-styles.scss )
Step 2 :
Note : After Changing color you must run gulp command i.e, gulp watch . Refer gulp page for more gulp commands click here.
How to Change Dark Body Color?
Please follow the below steps to Change Dark Body Color
Step 1 :
To change Dark Body Color you have to open _bootstrap-styles.scss file and replace what color you want as shown in below
Rootpath : _bootstrap-styles.scss (assets/scss/bootstrap/_bootstrap-styles.scss )
Step 2 :
Note : After Changing color you must run gulp command i.e, gulp watch . Refer gulp page for more gulp commands click here.