Template Customization

TPro 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

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

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

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

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

        <!-- NAVBAR -->
        <nav class="header-navbar navbar-expand-lg navbar navbar-with-menu floating-nav navbar-light navbar-shadow">
          ...
        </nav>
        <!--/ NAVBAR -->

    </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-menuattribute 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".

Layout Options

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.

Navbar Options

Template <nav> tag has the following navbar customization options as shown in the table.

Navbar Classes	Description
`.navbar-floating` & `.floating-nav`	Create a navbar with margin space and fixed at top you need to add `.navbar-floating` class with `<body>` tag and add `.floating-nav` class with `<nav>` tag.
`.navbar-sticky` & `.fixed-top`	Create a navbar with full width and fixed at top you need to add `.navbar-sticky` class with `<body>` tag and add `.fixed-top` class with `<nav>` tag.
`.navbar-static` & `.navbar-static-top`	Create a full-width navbar that scrolls away with the page by adding `.navbar-static` class with `<body>` tag and add `.navbar-static-top` class with `<nav>` tag.

Navigation (Menu) Options

Note

TPro admin template provides vertical navigation options. Below tables shows the both navigation customization options, but most of all are the same.

Vertical Navigation

Below table contain vertical navigation customization options.

Navigation Classes	Description
`.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-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.

Footer Classes	Description
`.footer-static`	To set footer scrolled with content you need to add `.footer-static` class in `<body>`tag and `<footer>`tag.
`.footer-fixed`	To set footer fixed on content you need to add `.footer-fixed` class in `<body>` tag.
`.footer-light`	To set footer transparent you need to add `.footer-light` class in `<footer>` tag.

TPro

Template Customization

Back to top