Yoha - Angular Admin & Dashboard Template

FAQ'S
General Style

How to Change Font Style ?

Step 1:

Go To style.scss (assets/scss/style.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 Style.scss i.e (root:-assets/scss/style.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 _custom.scss(assets/scss/custom/_custom.scss)

Example:



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

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.

RTL Version & LTR Version

How to Enable RTL version?

open (src/app/shared/layout-components/switcher/switcher.ts) add class rtl to enable RTL version style as shown in below


<body class="rtl">
...
</body>
Light Theme & Dark Theme

How to Enable Darktheme?

open (src/app/shared/layout-components/switcher/switcher.ts)add class dark-mode to enable dark-mode style as shown in below


<body class="dark-mode">
	...
</body>
Header Styles

How to Enable Color-header?

open (src/app/shared/layout-components/switcher/switcher.ts) add class color-header to enable color-header style as shown in below


<body class="color-header">
	...
</body>

How to Enable Dark-header?

open (src/app/shared/layout-components/switcher/switcher.ts) add class dark-header to enable dark-header style as shown in below


<body class="dark-header">
	...
</body>

How to Enable header-light?

open (src/app/shared/layout-components/switcher/switcher.ts) add class header-light to enable header-light style as shown in below


<body class="header-light">
	...
</body>

How to Enable Gradient-header?

open (src/app/shared/layout-components/switcher/switcher.ts) add class gradient-header to enable gradient-header style as shown in below


<body class="gradient-header">
	...
</body>
Menu Styles

How to Enable Light Menu?

open (src/app/shared/layout-components/switcher/switcher.ts) add class light-menu to enable light-menu style as shown in below


<body class="light-menu">
	...
</body>

How to Enable Color Menu?

open (src/app/shared/layout-components/switcher/switcher.ts) add class color-menu to enable color-menu style as shown in below


<body class="color-menu">
	...
</body>

How to Enable Dark Menu?

open (src/app/shared/layout-components/switcher/switcher.ts) add class dark-menu to enable dark-menu style as shown in below


<body class="dark-menu">
	...
</body>

How to Enable Gradient Menu?

open (src/app/shared/layout-components/switcher/switcher.ts) add class gradient-menu to enable gradient-menu style as shown in below


<body class="gradient-menu">
	...
</body>
Switcher Styles

How to Enable Boxed-Layout?

open (src/app/shared/layout-components/switcher/switcher.ts)add class layout-boxed to enable Boxed Layout as shown in below


<body class="layout-boxed">
	...
</body>

How to Enable Scrollable-Layout?

open (src/app/shared/layout-components/switcher/switcher.ts) add class scrollable-layout to enable scrollable-layout Layout as shown in below


<body class="scrollable-layout">
	... 
</body>
Horizontal Click & Horizontal Hover styles

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 index.html (src/app/shared/layout-components/switcher/switcher.ts) add class horizontal as shown in below 


												/*Horizontal start*/
                                                 //add
                                                     body?.classList.add('horizontal');
                                                     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*/

												To achive the Excicution of horizontal with this code
												 we need to be paste this code in  OnInit() or constructor().

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 index.html (src/app/shared/layout-components/switcher/switcher.ts) add class horizontal horizontal-hover as shown in below 


												/*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');
                                                    });
                                                    // console.log(mainContainer);
                                                    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*/

												To achive the Excicution of horizontal hover with this code
												 we need to be paste this code in  OnInit() or constructor().
Important License Terms
  • You cannot charge from your end product end users with a Regular License.
  • If you want to collect payments from end product end users then you must buy an Extended License for each of the end product.
  • You must buy one license for one domain only.(i.e Either Regular or Extended)
  • You cannot use Multi Domain,Multi Client, Multiple end Products with any of the licenses (i.e Either Regular or Extended).

for more details please click the link

Theme Styles
Primary Color

How to Change Primary Color?

Please follow the bellow steps to change Primary Color
Step 1 :

To change Primary Color you have to open _custom.scss file and replace what color you want as shown in below

Rootpath : _custom.scss (assets/scss/custom/_custom.scss )

Note : After Changing color you must run gulp command's . Refer gulp page for more gulp commands click here.

Light Theme Style

How to Change Light Background Color?

Please follow the bellow steps to change Light Background Color
Step 1 :

To change Light Background 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.

How to Change Light Text Color?

Please follow the bellow steps to change Light Text Color
Step 1 :

To change Light Text 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.

How to Change Light Border Color?

Please follow the below steps to change Light Border Color
Step 1 :

To change Light Border 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.

Dark Theme Style

How to Change Dark body Color?

Please follow the bellow steps to change Dark body Color
Step 1 :

To change Dark body Color you have to open _custom.scss file and replace what color you want as shown in below

Rootpath : _custom.scss (assets/scss/custom/_custom.scss )

Note : After Changing color you must run gulp command's . Refer gulp page for more gulp commands click here.

How to Change Dark Theme Color?

Please follow the bellow steps to change Dark Theme Color
Step 1 :

To change Dark Theme Color you have to open _custom.scss file and replace what color you want as shown in below

Rootpath : _custom.scss (assets/scss/custom/_custom.scss )

Note : After Changing color you must run gulp command's . Refer gulp page for more gulp commands click here.

How to Change Dark default Color ,border color ,and shadow color?

Please follow the below steps to change Dark default Color ,border color ,and shadow color
Step 1 :

To change Dark default Color ,border color ,and shadow color you have to open _custom.scss file in scss folder and replace what color you want as shown in below

Rootpath : _custom.scss (assets/scss/custom/_custom.scss )

Note : After Changing color you must run gulp command's . Refer gulp page for more gulp commands click here.

How to remove Switcher from template

Please follow the below steps to change Dark default Color ,border color ,and shadow color
Step 1 :

To change Switcher from template you have to open switcher.ts file in switcher() folder and replace what color you want as shown in below

Rootpath : _custom.scss (assets/scss/custom/_custom.scss )

Note : After Changing color you must run gulp command's . Refer gulp page for more gulp commands click here.