Skip to content

About

A professional implementation of a modern, responsive Django Admin interface using the Unfold theme. Features adaptive dark/light modes, custom branding, and a Tailwind CSS-based design for an enhanced management experience.

Topics

Resources

Stars

2 stars

Watchers

1 watching

Forks

Latest commit

 

History

19 Commits

Folders and files

NameName
Last commit message
Last commit date
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

🛠️ Unfold Admin Panel Customization

A modern, professional, and fully customizable Django Admin panel interface powered by django-unfold. This configuration improves admin UX/UI with branding, theming, and user management enhancements.


📁 Project Structure Overview

django-unfold/
├── AdminPanel/
├── media/
├── mediafiles/
├── static/
│   ├── css/style.css
│   ├── js/script.js
│   ├── icons/
│   │   ├── icon-light.svg
│   │   └── icon-dark.svg
│   ├── logos/
│   │   ├── logo-light.PNG
│   │   └── logo-dark.svg
│   └── favicons/favicon.svg
├── staticfiles/
├── settings/
│   ├── __pycache__/
│   ├── __init__
│   ├── asgi.py
│   ├── settings.py
│   ├── unfold_callbacks.py
│   ├── urls.py
│   ├── wsgi.py
├── templates/
├── .gitignore
├── db.sqlite3
├── manage.py
└── README.md

🚀 Features

✅ Fully branded admin interface

✅ Sidebar navigation with grouping & permissions

✅ Themed login background and layout

✅ Custom icons, logos, and favicons

✅ Tabbed model view support

✅ Support for multi-language flags

✅ Ready-to-use user management dashboard


🔧 Configuration Details

UNFOLD Settings (in settings.py or custom config module)

UNFOLD = {
    "SITE_TITLE": "Customize Admin Panel",
    "SITE_HEADER": "Admin Panel",
    "SITE_SUBHEADER": "Manage Users and Access",
    "SITE_URL": "/",
    "SITE_ICON": {
        "light": lambda request: static("icons/icon-light.svg"),
        "dark": lambda request: static("icons/icon-dark.svg"),
    },
    "SITE_LOGO": {
        "light": lambda request: static("logos/logo-light.PNG"),
        "dark": lambda request: static("logos/logo-dark.svg"),
    },
    "SITE_FAVICONS": [
        {
            "rel": "icon",
            "sizes": "32x32",
            "type": "image/svg+xml",
            "href": lambda request: static("favicons/favicon.svg"),
        },
    ],
    "SITE_DROPDOWN": [
        {
            "icon": "diamond",
            "title": _("Portfolio"),
            "link": "https://ajim-dev.vercel.app/",
        },
    ],
    "SITE_SYMBOL": "speed",
    "SHOW_HISTORY": True,
    "SHOW_VIEW_ON_SITE": True,
    "SHOW_BACK_BUTTON": True,
    "ENVIRONMENT": environment_callback,
    "ENVIRONMENT_TITLE_PREFIX": environment_title_prefix_callback,
    "DASHBOARD_CALLBACK": dashboard_callback,
    "THEME": True,
    "LOGIN": {
        "image": lambda request: static("images/login-bg.jpg"),
        "redirect_after": lambda request: reverse_lazy("admin:auth_user_changelist"),
    },
    "STYLES": [
        lambda request: static("css/style.css"),
    ],
    "SCRIPTS": [
        lambda request: static("js/script.js"),
    ],
    "BORDER_RADIUS": "8px",
    "COLORS": {
        "base": {
            "50": "249 250 251",
            "100": "243 244 246",
            ...
        },
        "primary": {
            "50": "240 249 255",
            ...
        },
        "font": {
            "subtle-light": "var(--color-base-500)",
            ...
        },
    },
    "EXTENSIONS": {
        "modeltranslation": {
            "flags": {
                "en": "🇬🇧",
                "bn": "🇧🇩",
            },
        },
    },
    "SIDEBAR": {
        "show_search": True,
        "show_all_applications": True,
        "navigation": [
            {
                "title": _("User Management"),
                "separator": True,
                "collapsible": True,
                "items": [
                    {
                        "title": _("Dashboard"),
                        "icon": "dashboard",
                        "link": reverse_lazy("admin:index"),
                        "permission": lambda request: request.user.is_superuser,
                    },
                    {
                        "title": _("Users"),
                        "icon": "people",
                        "link": reverse_lazy("admin:auth_user_changelist"),
                        "permission": lambda request: request.user.is_staff,
                    },
                ],
            },
        ],
    },
    "TABS": [
        {
            "models": [
                "auth.user",
            ],
            "items": [
                {
                    "title": _("All Users"),
                    "link": reverse_lazy("admin:auth_user_changelist"),
                    "permission": lambda request: request.user.is_staff,
                },
            ],
        },
    ],
}

  • Login screen
  • Admin dashboard
  • User list with tab views


✅ Requirements

  • Python 3.8+
  • Django 4.2+
  • django-unfold (UI customization plugin)

⚙️ Setup Instructions

pip install django-unfold

Add 'unfold' to INSTALLED_APPS before 'django.contrib.admin':

INSTALLED_APPS = [
    'unfold',
    'django.contrib.admin',
    ...
]

Then load the config (UNFOLD) in your settings.


📎 Useful Links


🙌 Author

MD AJIM 💼 Full-stack Developer 🌐 Portfolio 📧 mdajim2669@gmial.com


📜 License

🪪 License This project is open-source under the MIT License.

MIT — free to use for reference and learning.

About

A professional implementation of a modern, responsive Django Admin interface using the Unfold theme. Features adaptive dark/light modes, custom branding, and a Tailwind CSS-based design for an enhanced management experience.

Topics

Resources

Stars

2 stars

Watchers

1 watching

Forks

Releases

Packages

Contributors

Languages