Template Customization

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">
                <!-- 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">
                    <!--/ 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">
                    <!--/ NAVIGATION - MENU -->
                    <!-- CONTENT -->
                    <div class="app-content content container-fluid">
                    <!--/ CONTENT -->
                    <footer class="footer footer-static footer-dark navbar-border">
                <!--/ BODY -->

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.

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.