Django Configurations

Customize Sneat 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.

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).

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).

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

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
© 2017- ThemeSelection, Hand-crafted & Made with ❤️