Статьи Веб-разработка 7 мин

Темизация Django Admin: корпоративный стиль без хаков

person
Редакция Django-Admin.ru
Редакция • Опубликовано 15 сентября 2024 г.
Веб-разработка CSS Темизация Дизайн-система

Стандартный Django Admin выглядит одинаково — будь то блог стартапа или инвентарная система крупной компании. Для организаций, где внутренние инструменты должны соответствовать бренду, кастомизация внешнего вида обязательна — но без патчинга исходников Django.

Метод 1: Только CSS

Самый чистый подход — создать кастомное admin-приложение и переопределить базовый шаблон:

class MyAdminSite(admin.AdminSite):
    site_header = 'Acme Corp Admin'
    site_title = 'Acme Admin Portal'
    index_title = 'Панель управления'

    class Media:
        css = {'all': ('admin/css/custom.css',)}
:root {
  --primary: #1a1a2e;
  --secondary: #16213e;
  --accent: #0f3460;
}

#header {
  background: var(--primary);
  color: white;
}

.module h2,
.module caption {
  background: var(--accent);
}

Метод 2: django-jazzmin

Полная замена внешнего вида на Bootstrap-основу:

INSTALLED_APPS = ['jazzmin'] + INSTALLED_APPS

JAZZMIN_SETTINGS = {
    "site_title": "Acme Admin",
    "site_brand": "Acme Corp",
    "welcome_sign": "Добро пожаловать",
    "theme": "darkly",
}

Чего делать НЕ нужно

  • Не патчите шаблоны Django в site-packages/
  • Не используйте !important повсюду — работайте со спецификой CSS
  • Не забывайте о тёмной теме — используйте prefers-color-scheme
  • Не забывайте о мобильных — тестируйте на планшетах

forum Обсуждение

Комментарии скоро будут доступны. Следите за обновлениями!