Django FAQs


How can I create new theme (own theme)?

Vuexy admin template comes with unique feature to create custom theme. So user can easily integrate template with their own choice & requirements.

To create custom theme, you need to create scss files that contains variables, custom scss and primary color variable of the theme. It's required to set $primary-color variable to use base primary color for custom theme.

Let's say, if you want to create your own custom theme named as raspberry, follow steps below.

  1. First of all, create custom theme scss files, like theme-raspberry.scss and theme-raspberry-dark.scss inside src/scss/ and src/scss/rtl folder.
  2. You have to add your new theme css and name in scripts_includes.html and template-customizer.js to add theme option in Template Customizer.
  3. You can find scripts_includes.html file in templates/layout/partials/ folder.

    <script>
    if (typeof TemplateCustomizer !== 'undefined') {
      window.templateCustomizer = new TemplateCustomizer({
        cssPath: '',
        themesPath: '',
        defaultStyle: "{{style}}", // Required as system style can't decided without JS
        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",
    
            'theme-raspberry.css': "{% static 'vendor/css' %}{{rtl_support|yesno:'/rtl,'}}/theme-raspberry.css",
            'theme-raspberry-dark.css': "{% static 'vendor/css' %}{{rtl_support|yesno:'/rtl,'}}/theme-raspberry-dark.css"
    
          }
          return resolvedPaths[path] || path;
        },
        controls: {{ customizer_controls | safe }},
      });
    }
    </script>

    You can find template-customizer.js file in src/js/ folder.

    // Themes
    TemplateCustomizer.THEMES = [
      {
        name: 'theme-default',
        title: 'Default'
      },
      {
        name: 'theme-semi-dark',
        title: 'Semi Dark'
      },
      {
        name: 'theme-bordered',
        title: 'Bordered'
      },
      {
        name: 'theme-raspberry',
        title: 'Raspberry'
      }
    ];
  4. Now, you can set your newly created theme to config/templates.py.
  5. TEMPLATE_CONFIG = {
      ...
      "theme": "theme-raspberry",
      ...
    }

Now, How to add variables, styles & mixins to theme scss file.

  • To use declared variables & mixins, Theme requires to include library, pages, variable files.
  • Theme requires primary color variable to update color as require. So need to add $primary-color variable with basic includes like below
  • // Component variables include
    @import './_components/include';
    @import './_theme/common';
    @import './_theme/libs';
    @import './_theme/pages';
    
    $primary-color: #e30b5c;
    
    // To update color to custom theme's primary color
    @include template-common-theme($primary-color);
    @include template-libs-theme($primary-color);
    @include template-pages-theme($primary-color);
  • After applying primary color for each library, components & pages, To update navbar, You can add custom style after including mixin as below :
  • @include template-navbar-style('.bg-navbar-theme', BACKGROUND_COLOR, $color: TEXT_COLOR, $active-color: ACTIVE_TEXT_COLOR, $border: BORDER_COLOR);
  • To update menu, You can add custom style after including mixin as below :
  • @include template-menu-style('.bg-menu-theme',BACKGROUND_COLOR, $color: TEXT_COLOR, $active-color: ACTIVE_TEXT_COLOR, $border: BORDER_COLOR, $active-bg: ACTIVE_BACKGROUND_COLOR);
  • To update footer, You can add custom style after including mixin as below :
  • @include template-footer-style('.bg-footer-theme', BACKGROUND_COLOR, $color: TEXT_COLOR, $active-color: ACTIVE_TEXT_COLOR, $border: BORDER_COLOR);
  • You can also add style that should work for custom theme only.
  • That's All!!
How to remove Template Customizer?

It's only recommended to use template without customizer, if you wish to configure themes, layouts and other customizations by changing custom options from config/templates.py file.

We have provided template with customizer, So user can check all the layout options and it's classes and can get idea about all the possibilities.

But before deployment, you might not required this customizer. Then you can check below options :

Option 1: If you want to remove customizer and also not required LocalStorage, then you can use has_customizer option in config/templates.py file

If you set this option to false, it will remove customizer, template customizer js and initialization script as well.

TEMPLATE_CONFIG = {
  ...
  'has_customizer' => false,
  ...
}

Option 2: If you want to hide customizer and you need LocalStorage to store data like menuCollapse, light/dark layout, etc.., then you can use display_customizer option from config/templates.py file

If you set this option to false, it will hide customizer and won't remove/hide template customizer js.

TEMPLATE_CONFIG = {
  ...
  "display_customizer": False,
  ...
}
Multiple Migration Files

If you have multiple migration file such has below.

apps
└── 📂 test
    └── 📂 migrations
        ├── 📄 0001_initial.py
        ├── 📄 0002_auto_20210901_0000.py
        └── 📄 0003_auto_20210901_0001.py
      

You can delete migrations folder/files and run following command in the terminal. This will remove other instance and create only one file.

python manage.py makemigrations app_name
python manage.py migrate
How can I migrate from django v4.2 to v5.0 ?

Follow bellow step to update Django version in your current project.

  1. Update Django version in requirements.txt.
  2. Django==4.2.5 ==> Django==5.0
  3. Update python version in your system, as Django5 support python v3.10+.
  4. Update python version in docker file. Vuexy uses python v3.12.
  5. FROM python:3.9 ==> FROM python:3.12
  6. Delete your old .venv file and Follow the process to start django project, Refer Django Installation.
  7. To update your settings.py in line with Django5, you can create a new project and compare its settings.py with your existing project's configuration.
  8. Take a look at Django5 official documentation to find details about features that have been deprecated. Implement any necessary adjustments in your project accordingly.
© 2017- Pixinvent, Hand-crafted & Made with ❤️