DEV Community

Cover image for Soft Django Theme - How to use it (Free Product)
Sm0ke
Sm0ke

Posted on • Originally published at blog.appseed.us

Soft Django Theme - How to use it (Free Product)

Hello Coders!

This article explains how to enhance the UI for a newly created Django project by using Soft UI Dashboard, an open-source theme released under the MIT license on GitHub. The theme can be installed using PIP and the activation requires a single line to be added to the configuration. Thanks for reading!

In the end, the default Django UI will have a modern, mobile-friendly UI styled with Bootstrap 5 and Dark-Mode.

Django Soft Theme - Login Page (open-source)


✨ Create the project

To understand and explain the whole process, a new Django project is started from scratch using the terminal.

πŸ‘‰ Create the directory

$ mkdir my-django-project
$ cd my-django-project
Enter fullscreen mode Exit fullscreen mode

πŸ‘‰ Install the dependencies - only Django for now

$ virtualenv env
$ source env/bin/activate
$ pip install Django
Enter fullscreen mode Exit fullscreen mode

πŸ‘‰ Create the Django project

$ django-admin startproject core . 
Enter fullscreen mode Exit fullscreen mode

This command will create a new folder named core in the current project directory and the usual manage.py, main Django script.

πŸ‘‰ Start the app

$ python manage.py migrate
$ python manage.py runserver
Enter fullscreen mode Exit fullscreen mode

At this point, we can visit the app in the browser and we should see the default splash screen that Django serves on 1st install.

Django - The Default Screen


πŸ‘‰ Create a superuser

The admin section, the one styled by our new theme, is accessible only to the superusers. Let's create one using this command:

$ python manage.py createsuperuser
Enter fullscreen mode Exit fullscreen mode

At this point, we can access the admin section that uses a minimal style.

Django - The Default Admin UI.


✨ Install Soft UI Design

The product is published on PyPi, the official platform for Python packages.

$ pip install django-admin-soft-dashboard 
Enter fullscreen mode Exit fullscreen mode

After theme installation, we need to inform Django to use it and this requires a minor configuration update.

πŸ‘‰ Configure Django to use the new design

Add admin_soft application to the INSTALLED_APPS settings of your Django project settings.py file (note it should be before django.contrib.admin):

    INSTALLED_APPS = (
        ...
        'admin_soft.apps.AdminSoftDashboardConfig',   # <-- NEW
        'django.contrib.admin',
    )
Enter fullscreen mode Exit fullscreen mode

πŸ‘‰ Start the app and access the new admin design

$ python manage.py runserver
Enter fullscreen mode Exit fullscreen mode

Django Soft Admin - Edit Users Page


As mentioned in the first paragraph, the sample source used to create and install the theme can be found on GitHub. Thanks for reading!

For more resources and support, please access:

Top comments (0)