Theme Configuration
Apex admin template manages its layout configuration from single file
config.service.ts
. This file you can find at
src\app\shared\services\config.service.ts
Configuration Options
setConfigValue() {
this.templateConf = {
layout: {
variant: "Light", // options: Dark, Light & Transparent
menuPosition: "Side", // options: Side, Top
customizer: {
hidden: true // options: true, false
};
navbar: {
type: 'Static' // options: Static & Fixed
}
sidebar: { // Options for Vertical Side menu
collapsed: false, // options: true, false
size: "sidebar-md", // Options: 'sidebar-lg', 'sidebar-md', 'sidebar-sm'
backgroundColor: "man-of-steel", // Options: 'black', 'pomegranate', 'king-yna', 'ibiza-sunset', 'flickr', 'purple-bliss', 'man-of-steel', 'purple-love'
/* If you want transparent layout add any of the following mentioned classes to backgroundColor of sidebar option :
bg-glass-1, bg-glass-2, bg-glass-3, bg-glass-4, bg-hibiscus, bg-purple-pizzaz, bg-blue-lagoon, bg-electric-viloet, bg-protage, bg-tundora
*/
backgroundImage: true, // Options: true, false | Set true to show background image
backgroundImageURL: "assets/img/sidebar-bg/01.jpg"
}
};
}
}
Option | Description |
---|---|
variant |
Light for light layout, Dark for dark
layout and Transparent for transparent layout
|
menuPosition |
Side for vertical menu, Top for horizontal
menu
|
hidden |
false to hide customizer by default and
true to show customizer by default
|
type |
Static for static navbar
Fixed for fixed navbar
|
collapsed |
false for collapsed sidebar and true for
regular sidebar
|
size |
sidebar-md for for medium size sidebar,
sidebar-sm for small size sidebar and
sidebar-lg for large size sidebar
|
backgroundColor | You can choose from many options like 'black', 'pomegranate', 'king-yna' etc. For transparent Layout Use :' bg-glass-1', 'bg-glass-2', 'bg-glass-3', 'bg-glass-4', 'bg-hibiscus', 'bg-purple-pizzaz', 'bg-blue-lagoon', 'bg-electric-viloet', 'bg-protage', 'bg-tundora' |
backgroundImage |
false to hide background image in sidebar menu and
true to show background image in sidebar menu you can
select from six diffrent images 'assets/img/sidebar-bg/01.jpg'
just change 01 to any image between 01 - 06
|
backgroundImageURL | You can choose sidebar menu image url from many pre-defined options or you can create your custom background image as well |