Apply jazzmin theme to Django admin

The default django admin is not really easy for non programmers so you have to create new dashboard to make it easy for them.

But actually the django admin panel is really powerful so it will be really helpful if you can change its design.

You can do that by installing django-jazzmin.

- I prefer django-jazzmin version 2.5.0 because I faced bugs in the latest version and didn't like its new design.

$ pip install django-jazzmin==2.5.0

- In the settings.py we will add it to the Installed apps.

*Make sure it comes after the default django admin.

# settings.py

INSTALLED_APPS = [
    ....
    ....
    ....

    'jazzmin',
    'django.contrib.admin',
]

- Then we will add its settings and edit it as we need.

JAZZMIN_SETTINGS = {
    # title of the window (Will default to current_admin_site.site_title if absent or None)
    "site_title": "Admin",

    # Title on the brand, and login screen (19 chars max) (defaults to current_admin_site.site_header if absent or None)
    "site_header": "Django Tips",

    # square logo to use for your site, must be present in static files, used for favicon and brand on top left
    "site_logo": "img/favicon.ico",

    # Welcome text on the login screen
    "welcome_sign": "Admin Panel",

    # Copyright on the footer
    "copyright": "<a href='http://127.0.0.1:8000' target='_blank'>Django Tips</a>",

    # The model admin to search from the search bar, search bar omitted if excluded
    #"search_model": "auth.User",

    # Field name on user model that contains avatar image
    "user_avatar": None,

    ############
    # Top Menu #
    ############

    # Links to put along the top menu
    "topmenu_links": [

        # Url that gets reversed (Permissions can be added)
        {"name": "Home",  "url": "admin:index", "permissions": ["auth.view_user"]},

        # external url that opens in a new window (Permissions can be added)
        #{"name": "Support", "url": "https://github.com/farridav/django-jazzmin/issues", "new_window": True},

        # model admin to link to (Permissions checked against model)
        {"model": "auth.User"},

        # App with dropdown menu to all its models pages (Permissions checked against models)
        #{"app": "books"},
    ],

    #############
    # User Menu #
    #############

    # Additional links to include in the user menu on the top right ("app" url type is not allowed)
    "usermenu_links": [
        {"name": "View Site", "url": "/", "icon": 'fas fa-chart-bar'},
    ],

    #############
    # Side Menu #
    #############

    # Whether to display the side menu
    "show_sidebar": True,

    # Whether to aut expand the menu
    "navigation_expanded": False,

    # Hide these apps when generating side menu e.g (auth)
    "hide_apps": [],

    # Hide these models when generating side menu (e.g auth.user)
    "hide_models": [],

    # List of apps (and/or models) to base side menu ordering off of (does not need to contain all apps/models)
    "order_with_respect_to": ["auth",],# "books", "books.author", "books.book"],

    # Custom links to append to app groups, keyed on app name
    # "custom_links": {
    #     "books": [{
    #         "name": "Make Messages", 
    #         "url": "make_messages", 
    #         "icon": "fas fa-comments",
    #         "permissions": ["books.view_book"]
    #     }]
    # },

    # Custom icons for side menu apps/models See https://fontawesome.com/icons?d=gallery&m=free
    # for a list of icon classes
    "icons": {
        "auth": "fas fa-users-cog",
        "auth.user": "fas fa-user",
        "auth.Group": "fas fa-users",
    },
    # Icons that are used when one is not manually specified
    "default_icon_parents": "fas fa-chevron-circle-right",
    "default_icon_children": "fas fa-dot-circle",

    #################
    # Related Modal #
    #################
    # Use modals instead of popups
    "related_modal_active": True,

    #############
    # UI Tweaks #
    #############
    # Relative paths to custom CSS/JS scripts (must be present in static files)
    "custom_css": 'css/custom_admin.css', # path to a custom css file
    "custom_js": 'js/custom_admin.js', # path to a custom Js file
    # Whether to show the UI customizer on the sidebar
    "show_ui_builder": False,

    ###############
    # Change view #
    ###############
    # Render out the change view as a single form, or in tabs, current options are
    # - single
    # - horizontal_tabs (default)
    # - vertical_tabs
    # - collapsible
    # - carousel
    "changeform_format": "horizontal_tabs",
    # override change forms on a per modeladmin basis
    "changeform_format_overrides": {"auth.group": "vertical_tabs"},
    # Add a language dropdown into the admin
    "language_chooser": False,
}

And that's it! You can play around and edit this settings to create links, changes icons ...etc.
And the comments explain everything you can do, also you can see the docs here.

I hope the tutorial was simple.
Feel free to reach out if you have any questions.

Join to discord Server Here - Django Learn Together.