Template Customization
Back to top
Template Customization
  1. Home
  2. Template Customization

Template Customization

Frest 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 the it.

              
                <html lang="en" data-textdirection="ltr" class="loaded">
                <head>
                ...
                </head>
                <!-- BODY -->

                <body class="vertical-layout vertical-menu-modern 2-columns navbar-sticky footer-static menu-expanded" data-open="click" data-menu="vertical-menu-modern" data-col="2-columns">

                    <!-- NAVBAR -->
                    <nav class="header-navbar main-header-navbar navbar-expand-lg navbar navbar-with-menu fixed-top">
                      ...
                    </nav>
                    <!--/ NAVBAR -->

                    <!-- NAVIGATION - MENU -->
                    <div data-scroll-to-active="true" class="main-menu menu-fixed menu-light menu-accordion menu-shadow">
                    ...
                    </div>
                    <!--/ NAVIGATION - MENU -->

                    <!-- CONTENT -->
                    <div class="app-content content">

                    </div>
                    <!--/ CONTENT -->

                    <footer class="footer footer-static footer-light">
                      ...
                    </footer>

                </body>
                <!--/ BODY -->
                </html>

Body Options

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

Values / Classes Description
"vertical-menu-modern" data-menu attribute use for the referance to know the menu type, Set data-menu attribute value "vertical-menu-modern" for vertical menu type.
"1-column", "2-columns", "content-left-sidebar", "content-right-sidebar", "content-detached-left-sidebar", "content-detached-right-sidebar" data-col attribute use 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-modern" for vertical layout & menu use class "vertical-layout vertical-menu-modern".

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

Layouts Layout Classes Description
Dark Layout .dark-layout To Create a Dark Layout, you need to add .dark-layout class with <body> tag. .menu-dark class in navigation <div> and .navbar-dark in <nav> tag.
Semi Dark Layout .semi-dark-layout To Create a Semi Dark Layout, you need to add .semi-dark-layout class with <body> tag..menu-dark class in navigation <div> and .navbar-light in <nav> tag.
Default Menu Collapsed .menu-collapsed To Create a collapsed Layout, you need to add .menu-collapsed class and remove .menu-expanded class from <body> tag.
Boxicons Layout - To Create Layout with boxicons in main-menu sidebar, you need to pass blank value for data-icon-style attribute in .main-menu-content .navigation-main.