Adminor – Angular Admin & Dashboard Template

Adminor - Angular Admin & Dashboard Template

Note:-

Please refer Faq's page in documentation itself for queries of customization like colors,rtl ,dark,transparent styles,etc..

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 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-styles.scss(assets/scss/bootstarp/_bootstrap-custom.scss)

Example:


	body {
		font-family: "Roboto", sans-serif;
	}

2) How to Change Primary Color ?

Step 1:

Go To _custom-styles.scss (assets/scss/variables )

You will find --primary-bg-color: #623AA2; , where you can simply change color code to change primary color

How to Change Primary Color


														BEFORE:
																:root {
																	--primary-bg-color: #623AA2;


														AFTER:
																:root {
																	--primary-bg-color: #0162e8;

Simply you can also change color for primary-bg-hover:#025cd8; & --primary-bg-border:#0162e8; , where you can simply change color code to change them

3) How to Change Logo ?

Go To "assets/img/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.

4) How to Enable RTL version?

One more methode to add RTL version

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


<body class="">
...
</body>

Remove the comments to enable rtl as shown below


<body class="rtl">
...
</body>

5) How to Enable Darktheme?

open path:(src/app/shared/layout-components/switcher/switcher.ts). and class 'dark-theme' to enable dark theme version as shown in below


/*Dark Layout Start*/
<body class="dark-theme">
...
<body>
/*Dark Layout End*/

6) How to Enable Color-header?

open path:(src/app/shared/layout-components/switcher/switcher.ts) file and remove comments for color-header to enable color-header style as shown in below


	/*color header Layout Start*/
	<body class="color-header">
	...
	<body>
	/*color header Layout End*/

Remove the comments to enable color-header as shown below



	/*--- Color Header Start --*/
		$('body').addClass('color-header');
	/*--- Color Header End --*/

7) How to Enable Dark-header?

open path:(src/app/shared/layout-components/switcher/switcher.ts) file and remove comments for dark-header to enable dark-header style as shown in below


	/*dark header Layout Start*/
	<body class="dark-header">
	...
	<body>
	/*dark header Layout End*/

Remove the comments to enable dark-header as shown below


	/*--- Dark Header Start --*/
	 $('body').addClass('dark-header');
	/*--- Dark Header End --*/

8) How to Enable Light-header?

open path:(src/app/shared/layout-components/switcher/switcher.ts) file and remove comments for light-header to enable light-header style as shown in below


	/*light header Layout Start*/
	<body class="light-header">
	...
	<body>
	/*light header Layout End*/

Remove the comments to enable light-header as shown below


	/*--- Light Header Start --*/
		$('body').addClass('light-header');
	/*--- Light Header End --*/

10) How to Enable Light Menu?

open path:(src/app/shared/layout-components/switcher/switcher.ts) file and remove comments for light-menu to enable light-menu style as shown in below


	/*light menu Layout Start*/
	<body class="light-menu">
	...
	<body>
	/*light menu Layout End*/

Remove the comments to enable light-menu as shown below


	/*--- Light Menu Start --*/
		 $('body').addClass('light-menu');
	/*--- Light Menu End --*/

11) How to Enable Color Menu?

open path:(src/app/shared/layout-components/switcher/switcher.ts) file and remove comments for color-menu to enable color-menu style as shown in below


	/*color menu Layout Start*/
	<body class="color-menu">
	...
	<body>
	/*color menu Layout End*/

Remove the comments to enable color-menu as shown below


	/*--- Color Menu Start --*/
		$('body').addClass('color-menu');
	/*--- Color Menu End --*/

12) How to Enable Dark Menu?

open path:(src/app/shared/layout-components/switcher/switcher.ts)file and remove comments for dark-menu to enable dark-menu style as shown in below


	/*dark menu Layout Start*/
	<body class="dark-menu">
	...
	<body>
	/*dark menu Layout End*/

Remove the comments to enable dark-menu as shown below


	/*--- Dark Menu Start --*/
		$('body').addClass('dark-menu');
	/*--- Dark Menu End --*/

14) How to Enable Boxed-Layout?

open path:(src/app/shared/layout-components/switcher/switcher.ts)file and remove comments for layout-boxed to enable layout-boxed style as shown in below


	/*layout boxed Start*/
	<body class="layout-boxed">
	...
	<body>
	/*layout boxed End*/

Remove the comments to enable layout-boxed as shown below


	/*---  Boxed Layout Start --*/
		 $('body').addClass('layout-boxed');
		 if (document.querySelector('body').classList.contains('horizontal')) {
		 	checkHoriMenu();
		 }
	/*---  Boxed Layout End --*/

15) How to Enable Scrollable-Layout?

open path:(src/app/shared/layout-components/switcher/switcher.ts) file and remove comments for scrollable-layout to enable scrollable-layout style as shown in below


	/*scrollable layout Start*/
	<body class="scrollable-layout">
	...
	<body>
	/*scrollable layout End*/

Remove the comments to enable scrollable-layout as shown below


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

16) How to Enable Closed-Menu?

open path:(src/app/shared/layout-components/switcher/switcher.ts) file and remove comments for Closed Sidemenu to enable closed menu style as shown in below


	/*scrollable layout Start*/
	<body class="Closed-Menu">
	...
	<body>
	/*scrollable layout End*/

Remove the comments to enable Closed Sidemenu as shown below


		/*Closed Sidemenu Start*/
			 $('body').addClass('closed-menu');
			 $('body').addClass('sidenav-toggled');
		/*Closed Sidemenu End*/

17) How to Enable Hover Submenu

open path:(src/app/shared/layout-components/switcher/switcher.ts) file and remove comments for Hover Submenu to enable Hover submenu style as shown in below


	/*scrollable layout Start*/
	<body class="hover-submenu">
	...
	<body>
	/*scrollable layout End*/

18) How to Enable Double-menu

open path:(src/app/shared/layout-components/switcher/switcher.ts) file and remove comments for Double-menu to enable Double-menu style as shown in below


	/*scrollable layout Start*/
	<body class="Double-menu">
	...
	<body>
	/*scrollable layout End*/

19) How to Enable Horizontal layout

open path:(src/app/shared/layout-components/switcher/switcher.ts) file and remove comments for Horizontal layout to enable Horizontal layout style as shown in below


	/*Horizontal start*/
	//add
		body?.classList.add('horizontal');
		mainContent?.classList.add('horizontal-content');
		mainContainer?.classList.add('container');
		mainHeader?.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?.classList.remove('container-fluid');
		mainHeader?.classList.remove('side-header');
		body?.classList.remove('sidebar-mini');
		body?.classList.remove('sidenav-toggled');
		body?.classList.remove('horizontal-hover');
		sidebarFn.checkHoriMenu();
	/*Horizontal end*/

20) How to Enable Horizontal Hover layout

open path:(src/app/shared/layout-components/switcher/switcher.ts) file and remove comments for Horizontal Hover layout to enable Horizontal Hover layout style as shown in below


	/*Horizontal-hover start*/
	//add
		body?.classList.add('horizontal');
		body?.classList.add('horizontal-hover');
		mainContent?.classList.add('horizontal-content');
		mainContainer?.classList.add('container');
		mainHeader?.classList.add('hor-header');
		mainHeader?.classList.remove('side-header');
		appSidebar?.classList.add('horizontal-main');
		mainSidemenu?.classList.add('container');
		sideMenu?.classList.add('flex-nowrap');
	// remove
		sideMenu?.classList.remove('flex-nowrap');
		mainContent?.classList.remove('app-content');
		mainContainer?.classList.remove('container-fluid');
		body?.classList.remove('sidebar-mini');
		body?.classList.remove('sidenav-toggled');
		body?.classList.remove('closed-menu');
		body?.classList.remove('hover-submenu');
		body?.classList.remove('hover-submenu1');
		body?.classList.remove('icontext-menu');
		body?.classList.remove('sideicon-menu');

		let li = document.querySelectorAll('.side-menu li');
		li.forEach((e, i) => {
		e.classList.remove('is-expanded');
		});
		sidebarFn.checkHoriMenu();
	/*Horizontal-hover end*/

21) How to Enable Horizontal or Horizantal Hover layout With Wrap Style

open path:(src/app/shared/layout-components/switcher/switcher.ts) file and replacenoWrap with wrap in Horizontal (or) Horizontal Hover layout to enable wrap style for Horizantal or Horizantal Hover


	/*Horizontal start*/
	//add
		body?.classList.add('horizontal');
		mainContent?.classList.add('horizontal-content');
		mainContainer?.classList.add('container');
		mainHeader?.classList.add('hor-header');
		appSidebar?.classList.add('horizontal-main');
		mainSidemenu?.classList.add('container');
		sideMenu?.classList.add('flex-wrap');		// Should need to changed compared with default
	// remove
		sideMenu?.classList.remove('flex-wrap');
		mainContent?.classList.remove('app-content');
		mainContainer?.classList.remove('container-fluid');
		mainHeader?.classList.remove('side-header');
		body?.classList.remove('sidebar-mini');
		body?.classList.remove('sidenav-toggled');
		body?.classList.remove('horizontal-hover');
		sidebarFn.checkHoriMenu();
	/*Horizontal end*/


	/*Horizontal-hover start*/
	//add
		body?.classList.add('horizontal');
		body?.classList.add('horizontal-hover');
		mainContent?.classList.add('horizontal-content');
		mainContainer?.classList.add('container');
		mainHeader?.classList.add('hor-header');
		appSidebar?.classList.add('horizontal-main');
		mainSidemenu?.classList.add('container');
		sideMenu?.classList.add('flex-wrap');	// Should need to changed compared with default
		// remove
		sideMenu?.classList.remove('flex-nowrap');
		mainContent?.classList.remove('app-content');
		mainContainer?.classList.remove('container-fluid');
		mainHeader?.classList.remove('side-header');
		body?.classList.remove('sidebar-mini');
		body?.classList.remove('sidenav-toggled');
		body?.classList.remove('closed-menu');
		body?.classList.remove('hover-submenu');
		body?.classList.remove('hover-submenu1');
		body?.classList.remove('icontext-menu');
		body?.classList.remove('sideicon-menu');

		let li = document.querySelectorAll('.side-menu li');
		li.forEach((e, i) => {
		e.classList.remove('is-expanded');
		});
		sidebarFn.checkHoriMenu();
	/*Horizontal-hover end*/

Below Image Shows How Wrap and Nowrap Styles Looks like.

Example:

Simply you can change noWrap with wrapto change the style of Horizontal or Horizontal Hover Menus

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