HTML Structure

Overview

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

 
<html lang="en" data-layout="vertical" data-topbar="light" data-sidebar="dark" data-sidebar-size="lg" data-sidebar-image="none" data-preloader="disable">

    <head>
    
        <meta charset="utf-8" />
        <title>{{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">
    
    
        %extra_css()
    
        <!-- Layout config Js -->
        <script src="/static/js/layout.js"></script>
        <!-- Bootstrap Css -->
        <link href="/static/css/bootstrap.min.css" 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" rel="stylesheet" type="text/css" />
        <!-- custom Css-->
        <link href="/static/css/custom.min.css" rel="stylesheet" type="text/css" />
        
    </head>
    
    <body>
        <!-- Begin page -->
        <div id="layout-wrapper">
            
        % include('partials/topbar')         
           
        % include('partials/sidebar')

        <div class="main-content">

            <div class="page-content">
                <div class="container-fluid">
           
        %content()

        % include('partials/footer')
                      
        </div>
        <!-- END layout-wrapper -->

       %extra_content()
        
        
        % include('partials/customizer')
        
        
        <!-- 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>
        
        %extra_js()
                
        <!-- App js -->
        <script src="/static/js/app.js"></script>
        
    </body>
    
    </html>

Layout setup

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


<html lang="en" data-layout="vertical" data-topbar="light" data-sidebar="dark" data-sidebar-size="lg" data-sidebar-image="none" data-preloader="disable">

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 Admin/galaxy/views/partials/base.html file in the html tag.


<html lang="en" data-layout="vertical" data-topbar="light" data-sidebar="dark" data-sidebar-size="lg" data-sidebar-image="none" data-layout-mode="dark" data-body-image="img-1" data-preloader="disable">

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.