HTML Structure

  1. Docs
  2. HTML Structure
Overview

We have used gulp to compile the html, scss and js files.

{% load static %}
<!DOCTYPE html>
<html lang="en" {% block html %}data-layout="vertical" data-topbar="light" data-bs-theme="light" data-sidebar="dark" data-sidebar-size="lg" data-sidebar-image="none" data-preloader="disable" {% endblock html %}>
<head>
    <meta charset="utf-8" />
    <title>{% block title %}{% endblock title %} | Velzon - Admin & Dashboard Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta content="Premium Multipurpose Admin & Dashboard Template" name="description" />
    <meta content="Themesbrand" name="author" />
    <!-- App favicon -->
    <link rel="shortcut icon" href="{% static 'images/favicon.ico'%}">

    {% block css %}
    {% block extra_css %}
    {% endblock extra_css %}

    <!-- Layout config Js -->
    <script src="{% static 'js/layout.js'%}"></script>
    <!-- Bootstrap Css -->
    <link href="{% static 'css/bootstrap.min.css'%}" id="bootstrap-style" rel="stylesheet" type="text/css" />
    <!-- Icons Css -->
    <link href="{% static 'css/icons.min.css'%}" rel="stylesheet" type="text/css" />
    <!-- App Css-->
    <link href="{% static 'css/app.min.css'%}" id="app-style" rel="stylesheet" type="text/css" />
    <!-- custom Css-->
    <link href="{% static 'css/custom.min.css'%}" id="app-style" rel="stylesheet" type="text/css" />
    {% endblock css %}
</head>

<body>
    <!-- Begin page -->
    <div id="layout-wrapper">
        {% block header %}
        {% include "partials/topbar.html" %}
        {% endblock header %}
        {% block sidebar %}
        {% include "partials/sidebar.html" %}
        {% endblock sidebar %}
        {% block content %}
        {% block pagetitle %}
        {% endblock pagetitle %}
        {% block footer %}
        {% endblock footer %}
        {% endblock content %}
    </div>
    
    {% block extra_content %}        
    {% endblock extra_content %}
        
    <!-- END layout-wrapper -->
    {% block right_sidebar %}
    {% include "partials/customizer.html" %}
    {% endblock right_sidebar %}

    {% block javascript %}
    <!-- JAVASCRIPT -->
    <script src="{% static 'libs/bootstrap/dist/js/bootstrap.bundle.min.js'%}"></script>
    <script src="{% static 'libs/simplebar/dist/simplebar.min.js'%}"></script>
    <script src="{% static 'libs/node-waves/dist/waves.min.js'%}"></script>
    <script src="{% static 'libs/feather-icons/dist/feather.min.js'%}"></script>
    <script src="{% static 'js/pages/plugins/lord-icon-2.1.0.js'%}"></script>
    <script src="{% static 'js/plugins.js'%}"></script>

    {% block extra_js %}
    {% endblock extra_js %}

    <!-- App js -->
    <script src="{% static 'js/app.js'%}"></script>
    {% endblock javascript %}

</body>

</html>

Layout setup

You can set the default layout in the templates/partials/base.html file in the html tag.

<html lang="en" {% block html %}data-layout="vertical" data-topbar="light" data-bs-theme="light" data-sidebar="dark" data-sidebar-size="lg" data-sidebar-image="none" data-preloader="disable" {% endblock html %}>
data-layout="vertical" To set default layout as Vertical
data-layout="horizontal" To set default layout as Horizontal
data-layout="twocolumn" To set default layout as Two column
data-layout="semibox" To set default layout as Semibox
data-bs-theme="light" To set Light layout mode.
data-bs-theme="dark" To set Dark layout mode.
data-sidebar-visibility="show" To set sidebar show.
data-sidebar-visibility="hidden" To set sidebar hide.
data-sidebar-size="lg" data-layout-width="fluid" To set layout width Fluid and left sidebar large.
data-sidebar-size="sm-hover" data-layout-width="boxed" To set layout width Boxed and left sidebar on hover show menu.
data-layout-position="fixed" To set layout position Fixed.
data-layout-position="scrollable" To set layout position Scrollable.
data-topbar="light" To set the Light color of Topbar.
data-topbar="dark" To set the dark color of Topbar.
data-sidebar-size="lg" To set the Large left sidebar.
data-sidebar-size="md" To set the Compact left sidebar.
data-sidebar-size="sm" To set the Icon view left sidebar.
data-sidebar-size="sm-hover" To set the Icon hover left sidebar.
data-layout-style="default" To set the Default layout.
data-layout-style="detached" To set the Detached layout.
data-sidebar="light" To set the Light color left Sidebar.
data-sidebar="dark" To set the Dark color left Sidebar.
data-sidebar="gradient" To set the Gradient color left Sidebar.
data-sidebar="gradient-2" To set the Gradient-2 color left Sidebar.
data-sidebar="gradient-3" To set the Gradient-3 color left Sidebar.
data-sidebar="gradient-4" To set the Gradient-4 color left Sidebar.
data-sidebar-image="none" To Disable image on left Sidebar.
data-sidebar-image="img-1" To set the img-1 Image on left Sidebar.
data-sidebar-image="img-2" To set the img-2 Image on left Sidebar.
data-sidebar-image="img-3" To set the img-3 Image on left Sidebar.
data-sidebar-image="img-4" To set the img-4 Image on left Sidebar.
data-preloader="enable" To enable the preloader on the Page.
data-preloader="disable" To disable the preloader on the Page.

Galaxy Layout setup

You can set the galaxy layout in the templates/partials/base.html file in the html tag.

<html lang="en" {% block html %}data-layout="vertical" data-topbar="light" data-bs-theme="light" data-sidebar="dark" data-sidebar-size="lg" data-sidebar-image="none" data-preloader="disable" data-body-image="img-1" {% endblock html %}>
data-body-image="img-1" To set img-1 on whole page(body).
data-body-image="img-2" To set img-2 on whole page(body).
data-body-image="img-3" To set img-3 on whole page(body).
data-body-image="none" To remove image on whole page(body).

Notes:Above attributes works only in Galaxy version layout.

© Velzon.
Design & Develop by Themesbrand