Template Customization

Chameleon Admin - Modern Bootstrap 4 WebApp & Dashboard HTML Template + UI Kit provides different types of id, classes & attributes to customize the template.

This template can be customize directly from HTML code, please refer below section for more information.

If you have knowledge of our PUG template building system you can use PUG template & page config variables to customize it. Refer

HTML Snippet

Below HTML Snippet is the structutre of this template, you can use the defined id, class & attributes to customize the it.

              
                <html lang="en" data-textdirection="ltr" class="loaded">
                <head>
                ...
                </head>
                <!-- BODY -->
                <body data-open="click" data-menu="vertical-menu" data-col="2-columns" data-color="bg-gradient-x-purple-blue" class="vertical-layout vertical-menu 2-columns  fixed-navbar  pace-done menu-expanded">
                    
                    <!-- NAVBAR -->
                    <nav class="header-navbar navbar navbar-with-menu fixed-top navbar-semi-light bg-gradient-x-grey-blue">
                      ...
                    </nav>
                    <!--/ NAVBAR -->
                
                    <!-- NAVIGATION - MENU -->
                    <div data-scroll-to-active="true" data-img="app-assets/images/backgrounds/02.jpg" class="main-menu menu-fixed menu-light menu-accordion menu-shadow">
                    ...
                    </div>
                    <!--/ NAVIGATION - MENU -->
                
                    <!-- CONTENT -->
                    <div class="app-content content container-fluid">
                    ...
                    </div>
                    <!--/ CONTENT -->
                
                    <footer class="footer footer-static footer-dark navbar-border">
                      ...
                    </footer>
                    
                </body>
                <!--/ BODY -->
                </html>

Body Options

Template <body> tag has the following page customization options as shown in the table. Please Refer line no: 6 in the above HTML Snippet.

Section

Body

Attribute	Values / Classes	Description
data-color	"bg-gradient-x-purple-blue", "bg-blue" etc...	To change the navbar and navbar before color you can change this value, you can use any color options from color pallet by usin bg-* prefix. i.e bg-blue.
data-open	"hover", "click"	Set data-open attribute value hover/click to open the dropdown on hover/click.
data-menu	"vertical-menu"	This attribute use for the referance to know the menu type, Set data-menu attribute value "vertical-menu" for vertical menu type.
data-col	"1-column", "2-columns", "content-left-sidebar", "content-right-sidebar", "content-detached-left-sidebar", "content-detached-right-sidebar"	This attribute use for the referance to know the page columns, Set data-menu attribute value based on your column structure requirement, for demo please check the template layout section.
class	".vertical-layout .vertical-menu"	For verticl layout & menu you use ".vertical-layout .vertical-menu" classes & for horizontal layout.
class	".boxed-layout"	For boxed layout use this class along with ".container" class.
class	".fixed-navbar"	This is optional class and you need to include only if your layout navbar is fixed.

Navbar Options

Template <nav> tag has the following navbar customization options as shown in the table. Please Refer line no: 9 in the above HTML Snippet.

Section

Navbar

Classes	Description
`.fixed-top`	To set navbar fixed at top you need to add `.fixed-top` class in navbar `<nav>` tag.
`.navbar-fixed-bottom`	To set navbar fixed at bottom you need to add `.navbar-fixed-bottom` class in navbar `<nav>` tag.
`.navbar-static-top`	Create a full-width navbar that scrolls away with the page by adding `.navbar-static-top`. Unlike the `.navbar-fixed-*` classes, you do not need to change any padding on the `body`.
`.navbar-brand-center`	This class allow you to set navbar branding portion at center. Add `.navbar-brand-center` class in navbar `<nav>` tag. This is optional class.
`.navbar-light`	To set navbar light color you need to add `.navbar-light` class in navbar `<nav>` tag.
`.navbar-dark`	To set navbar dark color you need to add `.navbar-dark` class in navbar `<nav>` tag.
`.navbar-semi-dark`	To set navbar semi dark color you need to add `.navbar-semi-dark` class in navbar `<nav>` tag.
`.navbar-border`	You can add navbar border bottom by adding `.navbar-border` class in navbar `<nav>` tag. This navbar class is optional.
`.navbar-shadow`	You can also apply navbar shadow bottom by adding `.navbar-shadow` class in navbar `<nav>` tag. This navbar class is optional.
`.disabled`	To disabled navbar menu item link, you need to add `.disabled` class in navigation `<li>` tag. This navigation class is optional.

Navigation (Menu) Options

Note

Chameleon Admin template provides vertical navigation options. Below tables shows the both navigation customization options.

Vertical Navigation

Below table contain vertical navigation customization options. Please Refer line no: 15 in the above HTML Snippet.

Section

Navigation
vertical

Data/Classes	Description
`data-img`	To change the menu background image in vertical layout, you can change data-img attribute value "app-assets/images/backgrounds/02.jpg". You can also add new image to this location 'app-assets/images/backgrounds/' also and use it.
`.menu-fixed`	To create vertical fixed navigation, you need to add `.menu-fixed` class in navigation `<div>` tag.
`.menu-static`	To create vertical static navigation, you need to add `.menu-static` class in navigation `<div>` tag.
`.menu-light`	To create light vertical navigation, you need to add `.menu-light` class in navigation `<div>` tag.
`.menu-dark`	To create dark vertical navigation, you need to add `.menu-dark` class in navigation `<div>` tag.
`.menu-accordion`	Default vertical navigation type is accordion navigation. To create vertical accordion navigation, you need to add `.menu-accordion` class in navigation `<div>` tag.
`.menu-collapsible`	To create vertical collapsible navigation, you need to add `.menu-collapsible` class in navigation `<div>` tag.
`.menu-flipped`	Change navigation menu position to right with the help of flipped navigation menu options. You need to add `.menu-flipped` class in navigation `<div>` tag.
`.menu-native-scroll`	To create vertical navigation with native scroll, you need to add `.menu-native-scroll` class in navigation `<div>` tag. This navigation class is optional.
`.menu-icon-right`	To create vertical navigation right side icons, you need to add `.menu-icon-right` class in navigation `<div>` tag. This navigation class is optional.
`.menu-bordered`	To create vertical bordered navigation, you need to add `.menu-bordered` class in navigation `<div>` tag. This navigation class is optional.
`.disabled`	To disabled vertical navigation menu link, you need to add `.disabled` class in navigation `<li>` tag. This navigation class is optional.
`.menu-shadow`	You can also apply navigation shadow bottom by adding `.menu-shadow` class in navigation `<div>` tag. This navigation class is optional.

Footer Options

Below table contain footer customization options. Please Refer line no: 26 in the above HTML Snippet.

Section

Footer

Classes	Description
`.footer-light`	To set footer light color you need to add `.footer-light` class in footer `<footer>` tag.
`.footer-dark`	To set footer dark color you need to add `.footer-dark` class in footer `<footer>` tag.
`.footer-transparent`	To set footer transparent color you need to add `.footer-transparent` class in footer `<footer>` tag.
`.footer-fixed`	To set footer fixed, you need to add `.footer-fixed` class in footer `<footer>` tag.

Chameleon

Template Customization

Back to top