Sneat Dashboard FREE by ThemeSelection

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.

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`