Template Customization

Apex HTML admin dashboard template 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.

HTML Snippet

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

<html class="loaded" lang="en">
    <head>
        ...
    </head>
    <!-- Body starts -->
    <body class="vertical-layout vertical-menu 2-columns menu-expanded" data-menu="vertical-menu" data-col="2-columns">
        <!-- Navbar starts -->
        <nav class="navbar navbar-expand-lg navbar-light header-navbar">
            ...
        </nav>
        <!-- Navbar ends -->

        <div class="wrapper">
            <!-- Menu starts -->
            <div class="app-sidebar menu-fixed" data-background-color="man-of-steel" data-image="../app-assets/img/sidebar-bg/01.jpg" data-scroll-to-active="true">
                ...
            </div>
            <!-- Menu ends -->

            <div class="main-panel">
                <div class="main-content">
                    <div class="content-overlay"></div>
                    <!-- Page Content starts -->
                    <div class="content-wrapper">
                        ...
                    </div>
                    <!-- Page Content ends -->
                </div>

                <footer class="footer">
                    ...
                </footer>
            </div>
        </div>
    </body>
    <!-- Body ends -->
</html>

Points to remember for vertical 2-columns layout:

  1. Set data-background-color from the gradients in Apex Color Palette for gradient background color in your menu or you may also set solid colors from the palette. Default value is set to "man-of-steel".
  2. Set data-image from app-assete/img for setting an image as a background-image in your menu.

Body Options

<body> tag has the following page customization options as shown in the table.

Values / Classes Description
"vertical-menu" data-menu attribute is used for the referance to know the menu type. Set data-menu attribute value "vertical-menu" for vertical menu type.
"horizontal-menu" data-menu attribute is used for the referance to know the menu type. Set data-menu attribute value "horizontal-menu" for horizontal menu type.
"1-column", "2-columns", "content-left-sidebar", "content-right-sidebar", "content-detached-left-sidebar", "content-detached-right-sidebar" data-col attribute is used for the referance to know the page columns. Set data-col attribute value based on your column structure requirement, for demo please check the template layout section.
"vertical-layout vertical-menu" for vertical layout & menu, use class "vertical-layout vertical-menu".
"horizontal-layout horizontal-menu" for horizontal layout & menu, use class "horizontal-layout horizontal-menu".

Layout Options

<body> tag has the following layout customization options as shown in the table.

Layouts Layout Classes Description
Dark Layout .layout-dark To Create a Dark Layout, you need to add .layout-dark class with <body> tag.
Transparent Layout .dark-layout.transparent-layout To Create a Transparent Layout, you need to add .dark-layout.transparent-layout class with <body> tag.
Default Menu Collapsed .menu-collapsed.nav-collapsed To Create a collapsed Layout, you need to add .menu-collapsed.nav-collapsed class and remove .menu-expanded class from <body> tag.
Template Customization