Django Configurations

Customize Materio super easily using just config/template.py configuration file 🤘.

Introduction

To configure your template, we will be using config/template.py file, which has all the template configurations (THEME_LAYOUT_DIR, TEMPLATE_CONFIG & THEME_VARIABLES) listed with their valid values. Just change the configurations as per your requirement and you are done.

TemplateCustomizer settings: Template customization settings object to easily customize the template.

Important:

You must use(include) template-customizer.js to use TemplateCustomizer settings.
Make sure you clear the browser local storage In order to see the config changes in the template. Refer How to clear local storage?

Tip: To remove customizer, please find FAQ for How to remove template Customizer?

Config

Customization Options

Use config/template.py to configure TemplateCustomizer settings. It includes following parameters:

THEME_LAYOUT_DIR: Defines the theme layout directory. Don't change unless it's required.
TEMPLATE_CONFIG: Easily change the template styling and other configuration from here. Replace this object with template-config/demo-*.py file's TEMPLATE_CONFIG to change the template configuration as per our demos
THEME_VARIABLES: Personalize template by changing theme variables (For ex: Name, URL Version etc...).

# Template config
# ? Easily change the template configuration from here
# ? Replace this object with template-config/demo-*.py file's TEMPLATE_CONFIG to change the template configuration as per our demos
TEMPLATE_CONFIG = {
    "layout": "vertical",  # Options[String]: vertical(default), horizontal
    "theme": "theme-default",  # Options[String]: theme-default(default), theme-bordered, theme-semi-dark
    "style": "light",  # Options[String]: light(default), dark, system mode
    "rtl_support": True,  # options[Boolean]: True(default), False # To provide RTLSupport or not
    "rtl_mode": False,  # options[Boolean]: False(default), True # To set layout to RTL layout  (rtl_mode must be True for rtl mode)
    "has_customizer": True,  # options[Boolean]: True(default), False # Display customizer or not THIS WILL REMOVE INCLUDED JS FILE. SO LOCAL STORAGE WON'T WORK
    "display_customizer": True,  # options[Boolean]: True(default), False # Display customizer UI or not, THIS WON'T REMOVE INCLUDED JS FILE. SO LOCAL STORAGE WILL WORK
    "content_layout": "compact",  # options[String]: 'compact', 'wide' (compact=container-xxl, wide=container-fluid)
    "navbar_type": "fixed",  # options[String]: 'fixed', 'static', 'hidden' (Only for vertical Layout)
    "header_type": "fixed",  # options[String]: 'static', 'fixed' (for horizontal layout only)
    "menu_fixed": True,  # options[Boolean]: True(default), False # Layout(menu) Fixed (Only for vertical Layout)
    "menu_collapsed": False,  # options[Boolean]: False(default), True # Show menu collapsed, Only for vertical Layout
    "footer_fixed": False,  # options[Boolean]: False(default), True # Footer Fixed
    "show_dropdown_onhover": True,  # True, False (for horizontal layout only)
    "customizer_controls": [
        "rtl",
        "style",
        "headerType",
        "contentLayout",
        "layoutCollapsed",
        "showDropdownOnHover",
        "layoutNavbarOptions",
        "themes",
    ],  # To show/hide customizer options
}

Template customization settings to easily customize the template.

Variable	description
`layout`	Set current layout of the template. Value: `Vertical` (Default), `Horizontal` Default: `Vertical`
`theme`	Default theme name. Accepts string. Value: `theme-default` (Default), `theme-semi-dark` (Semi Dark), `theme-bordered` (Bordered) Default: `theme-default`
`style`	Set default light,dark or system style. Value: `light`, `dark`, `system` Default: `light`
`rtl_support`	To use same Layout style for LTR & RTL, set default value true. Value: `true`, `false` Default: `true`
`rtl_mode`	Set default text direction(Mode). `rtl_mode` must be true to use RTL direction. Value: `true`, `false` Default: `false`
`has_customizer`	Set default `true` to show customizer. If set to `false`, it will not include customizer js and LocalStorage won't work. Value: `true`, `false` Default: `true`
`display_customizer`	Set default `true` to show customizer UI. If set to `false`, it will hide only customizer UI and LocalStorage will work. Value: `true`, `false` Default: `true`
`content_layout`	Set content layout compact by default. Value: `compact`, `wide` Default: `compact`
`navbar_type`	Set Navbar type by default (For vertical layout only). Value: `true`, `false` Default: `false`
`header_type`	Set default header(navbar/title-bar) static/fixed style (for horizontal layout only). Value: `static`, `fixed` Default: `fixed`
`menu_fixed`	Set menu(navigation) fixed by default. Value: `true`, `false` Default: `true`
`menu_collapsed`	Set menu(navigation) collapsed by default. Value: `true`, `false` Default: `false`
`footer_fixed`	Set Footer fixed by default. Value: `true`, `false` Default: `false`
`show_dropdown_onhover`	Show Dropdown on mouse hover for Horizontal Layout. Value: `true`, `false` Default: `true`
`customizer_controls`	Manage TemplateSettings controls visibility using this option. Just pass an array of the required controls. Default: `controls: ['rtl', 'style', 'layoutType', 'showDropdownOnHover', 'layoutNavbarFixed', 'layoutFooterFixed', 'themes']` For ex. If you wish to display only style and theme options, just pass ['style', 'themes'].

You can use below configuration variables to show/hide sections of layout. Like navbar, footer, etc...

Display Options

You can use below configuration variables to show/hide sections of layout. Like navbar, footer, etc...

Variable	description
`is_navbar`	To Hide/Show navbar on Layout/Page level. Value: `False`, `True` Default: `False`
`is_menu`	To Hide/Show menu on Layout/Page level. Value: `False`, `True` Default: `False`
`is_flex`	To Enable/Disable flex layout on Layout/Page level. Value: `False`, `True` Default: `False`
`is_footer`	To Hide/Show footer on Layout/Page level. Value: `False`, `True` Default: `False`
`is_front`	Define Layout/Page is Front Page. Value: `False`, `True` Default: `False`
`content_navbar`	Define Layout/Page navbar inside container. (Used in vertical layout) Value: `False`, `True` Default: `False`
`navbar_full`	Define Layout/Page navbar is full or not (outside container). (Used in horizontal layout) Value: `False`, `True` Default: `False`
`menu_horizontal`	Define Layout/Page uses horizontal menu option. (Used in horizontal layout) Value: `False`, `True` Default: `False`

Layout Level Configuration

You can use all the template.py file's TEMPLATE_CONFIG and Display options at page level to customize for particular page(s).

Info: Refer templates/layout/ files for more details on page level customizations.

Example: To create vertical layout

class TemplateBootstrapLayoutVertical:
  def init(context):
      context.update(
          {
              "layout": "vertical",
              "content_navbar": True,
              "is_navbar": True,
              "is_menu": True,
              "is_footer": True,
              "navbar_detached": True,
          }
      )

      # map_context according to updated context values
      TemplateHelper.map_context(context)

      TemplateBootstrapLayoutVertical.init_menu_data(context)

      return context

Page Level Configurations

You can use all the template.py file's TEMPLATE_CONFIG and Display options at page level to customize for particular page(s).

Tip: We use Django Context refers to a dictionary-like structure that holds data and variables to be made available to templates during rendering.

You need to set configurations options to view files as explain below :

Info: Refer apps/layouts/views.py file for more details on page level customizations.

Example: To create Sign Up page we need blank layout which should not have navbar, menu and footer.

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.setLayout("layout_blank.html", context),
            }
        )

        TemplateHelper.map_context(context)

        return context

Global Variable (JS)

As explained in introduction, config.js contain JS global variables (For ex. colors which are used in charts and other js library) to have consistent look and feel.

/**
* Config
* -------------------------------------------------------------------------------------
* ! IMPORTANT: Make sure you clear the browser local storage In order to see the config changes in the template.
* ! To clear local storage: (https://www.leadshook.com/help/how-to-clear-local-storage-in-google-chrome-browser/).
*/

'use strict';

// JS global variables
let config = {
  colors: {...},
  colors_label: {...},
  colors_dark: {...},
  enableMenuLocalStorage: true // Enable menu state with local storage support
};

window.assetsPath = document.documentElement.getAttribute('data-assets-path');
window.templateName = document.documentElement.getAttribute('data-template');
window.rtlSupport = true; // set true for rtl support (rtl + ltr), false for ltr only.

Global variables are explained in below table

Variable	description
`colors`, `colors_label`, `colors_dark`	JS global variables for colors. Value: for ex. `'#1e9ff2'`
`enableMenuLocalStorage`	Set true to enable storage to persist configuration changes. Value: `true`, `false`
`assetsPath`	`assets/` directory relative path. It use `data-assets-path` data attribute to get value of it.
`templateName`	Used in localStorage key to make it unique. It use `data-template` data attribute to get value of it. Value: for ex. `'vertical-menu-template'`, `'horizontal-menu-template'`
`rtl_support`	Set `true` if RTL support is required, it will load all styles from `rtl/` directory. Value: `true`, `false`