Django Layout

Main Layout

Info: There is a function called set_layout in template_helpers/theme.py which decides the layout (vertical/horizontal). This option can be updated from config/template.py file. Find customization-options here

Below is the template Master file located at templates/layouts/master.html. It includes styles and scripts files in Master Layout. You can find these files at the same path inside templates/layout/ folder.

{% load static %}

<!DOCTYPE html>

<html lang="en" class="{{style}}-style {{navbar_type_class}} {{header_type_class}} {{menu_fixed_class}} {{menu_collapsed_class}} {{footer_fixed_class}} {{display_customizer_class}} {{content_layout_class}}" dir="{{text_direction_value}}" data-theme="{{theme}}" data-assets-path="{% static '/' %}" data-base-url="{{url}}" data-framework="django" data-template="{{ menu_horizontal|yesno:'horizontal,vertical' }}-menu-{{ is_front|yesno:'front,' }}-{{ theme }}-{{style}}">

  <head>
    <title>{% block title %}{% endblock title %} | {% get_theme_variables 'template_name' %} - {% get_theme_variables 'template_suffix' %}</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
    <meta name="description" content="{% get_theme_variables 'template_description' %}" />
    <meta name="keywords" content="{% get_theme_variables 'template_keyword' %}" />
    <!-- Canonical SEO -->
    <link rel="canonical" href="{% get_theme_variables 'product_page' %}">
    <!-- Favicon -->
    <link rel="shortcut icon" type="image/x-icon" href="{% static 'img/favicon/favicon.ico' %}" />

    <!-- Include the styles partial -->
    {% include is_front|yesno:"./partials/styles_front.html,./partials/styles.html" %}

    {% block vendor_css %}{% endblock vendor_css %}

    <!--Page CSS-->
    {% block page_css %}{% endblock page_css %}


    <!-- Include the scripts partial (required ) -->
    {% include is_front|yesno:"./partials/scripts_includes_front.html,./partials/scripts_includes.html" %}

  </head>

  <body>

    {% block layout %}
    {% endblock layout %}

    {% include is_front|yesno:"./partials/scripts_front.html,./partials/scripts.html" %}

    <!--Vendors Javascript-->
    {% block vendor_js %} {% endblock vendor_js %}

    <!--Page Javascript-->
    {% block page_js %} {% endblock page_js %}

  </body>

</html>

Styles

Included styles file contains all the core css, theme css, demo css and more..

You can find this file at templates/layout/partials/styles.html

{% load static %}

<!--Fonts-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&ampdisplay=swap" rel="stylesheet">

<!-- Icons -->
<link rel="stylesheet" href="{% static 'vendor/fonts/remixicon/remixicon.css' %}" />
<link rel="stylesheet" href="{% static 'vendor/fonts/flag-icons.css' %}" />

<!--Core CSS -->
{% if rtl_support %}
<link rel="stylesheet" href="{% static 'vendor/css/rtl/core.css' %}" class="{{ has_customizer|yesno:'template-customizer-core-css,' }}" />
<link rel="stylesheet" href="{% static 'vendor/css/rtl/theme-default.css' %}" class="{{ has_customizer|yesno:'template-customizer-theme-css,' }}" />
{% else %}
<link rel="stylesheet" href="{% static 'vendor/css/core.css' %}" class="{{ has_customizer|yesno:'template-customizer-core-css,' }}" />
<link rel="stylesheet" href="{% static 'vendor/css/theme-default.css' %}" class="{{ has_customizer|yesno:'template-customizer-theme-css,' }}" />
{% endif %}


<link rel="stylesheet" href="{% static 'css/demo.css' %}" />

<!--Vendor CSS-->
<link rel="stylesheet" href="{% static 'vendor/libs/perfect-scrollbar/perfect-scrollbar.css' %}" />
<link rel="stylesheet" href="{% static 'vendor/libs/typeahead-js/typeahead.css' %}" />
<link rel="stylesheet" href="{% static 'vendor/libs/node-waves/node-waves.css' %}" />

Head Scripts

This file includes helpers, customization, config js along with templateCustomizer initialization script :

You can find this file at templates/layout/partials/scripts_includes.html

Info: Here TemplateCustomizer required only options are linked with Django's TEMPLATE_CONFIG object from template.py.

{% load static %}
{% load i18n %}
<!-- Helpers -->
<!--! Template customizer & Theme config files MUST be included after core stylesheets and helpers.js in the <head> section -->
<script src="{% static 'vendor/js/helpers.js' %}"></script>
<!--? Template customizer: To hide customizer set display_customizer value false in config.js.  -->
{% if has_customizer %}
<script src="{% static 'vendor/js/template-customizer.js' %}"></script>
{% endif %}
<!--? Config:  Mandatory theme config file contain global vars & default theme options, Set your preferred theme option in this file.  -->
<script src="{% static 'js/config.js' %}"></script>
<!-- beautify ignore:start -->
{% if has_customizer %}
<script>
if (typeof TemplateCustomizer !== 'undefined') {
  window.templateCustomizer = new TemplateCustomizer({
    cssPath: '',
    themesPath: '',
    defaultStyle: "{{style}}", // Required as system style can't decided without JS
    defaultTextDir: '{% if rtl_mode %}rtl{% else %}ltr{% endif %}',
    defaultShowDropdownOnHover : {{show_dropdown_onhover_value}},
    lang: '{{LANGUAGE_CODE}}',
    pathResolver: function(path) {
      var resolvedPaths = {
        // Core stylesheets
        'core.css': "{% static 'vendor/css' %}{{rtl_support|yesno:'/rtl,'}}/core.css",
        'core-dark.css': "{% static 'vendor/css' %}{{rtl_support|yesno:'/rtl,'}}/core-dark.css",

        'theme-default.css': "{% static 'vendor/css' %}{{rtl_support|yesno:'/rtl,'}}/theme-default.css",
        'theme-default-dark.css': "{% static 'vendor/css' %}{{rtl_support|yesno:'/rtl,'}}/theme-default-dark.css",

        'theme-bordered.css': "{% static 'vendor/css' %}{{rtl_support|yesno:'/rtl,'}}/theme-bordered.css",
        'theme-bordered-dark.css': "{% static 'vendor/css' %}{{rtl_support|yesno:'/rtl,'}}/theme-bordered-dark.css",

        'theme-semi-dark.css': "{% static 'vendor/css' %}{{rtl_support|yesno:'/rtl,'}}/theme-semi-dark.css",
        'theme-semi-dark-dark.css': "{% static 'vendor/css' %}{{rtl_support|yesno:'/rtl,'}}/theme-semi-dark-dark.css"

      }
      return resolvedPaths[path] || path;
    },
    controls: {{ customizer_controls | safe }},
  });
}

</script>
{% endif %}

Scripts

This file includes main js along with template related vendor scripts :

You can find this file at templates/layout/partials/scripts.html

{% load static %}

<!--Core Javascript-->
<script src="{% static 'vendor/libs/jquery/jquery.js' %}"></script>
<script src="{% static 'vendor/libs/popper/popper.js' %}"></script>
<script src="{% static 'vendor/js/bootstrap.js' %}"></script>
<script src="{% static 'vendor/libs/node-waves/node-waves.js' %}"></script>
<script src="{% static 'vendor/libs/perfect-scrollbar/perfect-scrollbar.js' %}"></script>
<script src="{% static 'vendor/libs/hammer/hammer.js' %}"></script>
<script src="{% static 'vendor/libs/typeahead-js/typeahead.js' %}"></script>
<script src="{% static 'vendor/js/menu.js' %}"></script>
<script src="{% static 'js/main.js' %}"></script>

Dark Layout

To set default layout to dark layout, just need to update config/template.py file's style option :


'TEMPLATE_CONFIG' => [
...
'style' => 'dark',
...
],

You can also add page level configuration to set page to dark layout as described here

RTL

Materio provides built in support for RTL.

To use template with RTL support, you need to update config/template.py file's rtl_support option.

If you want to use LTR & RTL options both, you must set rtl_support to true else RTL Layout won't work.

If you want to use only LTR not RTL, you can set it to False

'TEMPLATE_CONFIG' => [
...
'rtl_support' => True,
...
],

To use template default in RTL Layout, you need to update config/template.py file's rtl_mode option.

If you want to set default layout to RTL, you can set this option to True


'TEMPLATE_CONFIG' => [
...
'rtl_mode' => True,
...
],

Layout Usage

You can set the layout in two ways:

Layout for the entire app - set Layout property in the config/template.py file.
Layout for the specific page - set Layout property in the page view.py file. Refer Page Level Configurations

Tip: Refer to the Django Configurations for more details on layout usage and customization.

Below are the examples for different layouts which we have showcased in our template demo, Refer apps/layouts/views.py file for more details on page level customizations.

from web_project.template_helpers.theme import TemplateHelper

class CollapsedMenuView(TemplateView):
# Predefined function
  def get_context_data(self, **kwargs):
# A function to init the global layout. It is defined in web_project/__init__.py file
    context = TemplateLayout.init(self, super().get_context_data(**kwargs))

# Update the context
    context.update(
      {
        "menu_collapsed": True,
      }
    )
    TemplateHelper.map_context(context)

    return context

from web_project.template_helpers.theme import TemplateHelper

class ContentNavView(TemplateView):
# Predefined function
  def get_context_data(self, **kwargs):
# A function to init the global layout. It is defined in web_project/__init__.py file
    context = TemplateLayout.init(self, super().get_context_data(**kwargs))

    return context

from web_project.template_helpers.theme import TemplateHelper

class ContentNavSidebarView(TemplateView):
# Predefined function
  def get_context_data(self, **kwargs):
# A function to init the global layout. It is defined in web_project/__init__.py file
    context = TemplateLayout.init(self, super().get_context_data(**kwargs))

# Update the context
    context.update(
      {
        "is_flex": True,
      }
    )

    TemplateHelper.map_context(context)

    return context

from web_project.template_helpers.theme import TemplateHelper

class HorizontalView(TemplateView):
# Predefined function
  def get_context_data(self, **kwargs):
# A function to init the global layout. It is defined in web_project/__init__.py file
    context = TemplateLayout.init(self, super().get_context_data(**kwargs))

# Update the context
    context.update(
      {
        "layout": "horizontal",
        "layout_path": TemplateHelper.set_layout("layout_horizontal.html", context),
      }
    )

    TemplateHelper.map_context(context)

    return context

from web_project.template_helpers.theme import TemplateHelper

class WithoutMenuView(TemplateView):
# Predefined function
  def get_context_data(self, **kwargs):
# A function to init the global layout. It is defined in web_project/__init__.py file
    context = TemplateLayout.init(self, super().get_context_data(**kwargs))

# Update the context
    context.update(
      {
        "is_menu": False,
      }
    )

    TemplateHelper.map_context(context)

    return context

from web_project.template_helpers.theme import TemplateHelper

class WithoutNavView(TemplateView):
# Predefined function
  def get_context_data(self, **kwargs):
# A function to init the global layout. It is defined in web_project/__init__.py file
    context = TemplateLayout.init(self, super().get_context_data(**kwargs))

# Update the context
    context.update(
      {
        "is_navbar": False,
        "navbar_type": "hidden",
      }
    )

    TemplateHelper.map_context(context)

    return context

from web_project.template_helpers.theme import TemplateHelper

class FluidView(TemplateView):
# Predefined function
  def get_context_data(self, **kwargs):
# A function to init the global layout. It is defined in web_project/__init__.py file
    context = TemplateLayout.init(self, super().get_context_data(**kwargs))

# Update the context
    context.update(
      {
        "content_layout": "wide",
      }
    )

    TemplateHelper.map_context(context)

    return context

from web_project.template_helpers.theme import TemplateHelper

class ContainerView(TemplateView):
# Predefined function
  def get_context_data(self, **kwargs):
# A function to init the global layout. It is defined in web_project/__init__.py file
    context = TemplateLayout.init(self, super().get_context_data(**kwargs))

# Update the context
    context.update(
      {
        "content_layout": "compact",
      }
    )

    TemplateHelper.map_context(context)

    return context

from web_project.template_helpers.theme import TemplateHelper

class BlankView(TemplateView):
# Predefined function
  def get_context_data(self, **kwargs):
# A function to init the global layout. It is defined in web_project/__init__.py file
    context = TemplateLayout.init(self, super().get_context_data(**kwargs))

# Update the context
    context.update(
      {
        "layout_path": TemplateHelper.set_layout("layout_blank.html", context),
      }
    )

    TemplateHelper.map_context(context)

    return context