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

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

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

                    </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 as 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 Use these classes for vertical layout and menu.

Layout Options

<body> tag has the following layout customization options:

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 with .main-menu class and .navbar-dark class with <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 with .main-menu class and .navbar-light class with <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 .boxicon-layout To create layout with boxicons in main-menu sidebar, you need to add .boxicon-layout class with <body> tag and pass blank value for data-icon-style attribute in .main-menu .main-menu-content .navigation.navigation-main.