django-jazzmin

repository·main·Indexed 23 days ago

https://github.com/farridav/django-jazzmin

A drop-in theme for the Django admin interface utilizing AdminLTE 3.2 and Bootstrap 5. It provides a modern, responsive UI with customizable side, top, and user menus, enhanced UI components like Select2 and Bootstrap 5 modals, and multiple change form layouts including horizontal tabs, vertical tabs, carousel, and collapsible views. Configuration is managed via the JAZZMIN_SETTINGS dictionary in Django settings.

Tokens
5.2K
Snippets
20
Records
28
Agent score
84%

What's inside django-jazzmin

  1. Overview of Jazzmin features

    main

    Jazzmin is a drop-in Django app designed to enhance the Django admin interface. Key features include:

    • Admin Skin: A complete UI overhaul that is fully optional and customizable.
    • UI Components: Built using Bootstrap 5 and AdminLTE.
    • Enhanced Inputs: Select2 drop-downs for better selection interfaces.
    • Search: A built-in search bar for any given model admin.
    • Modals: Uses modal windows instead of standard browser popups.
    • Navigation: Fully customizable side menu, top menu, and user menu.
    • Responsiveness: Optimized for mobile, tablet, and desktop layouts.
    • Customization: Supports live UI changes via a built-in UI Customiser, or through custom CSS/JS.
  2. Overview of django-jazzmin features

    main

    django-jazzmin is a drop-in skin for the Django admin that provides a modern, responsive UI using AdminLTE 3.2 and Bootstrap 5. Key features include:

    • Customizable Menus: Side, top, and user menus can be configured.
    • Change Form Templates: Four distinct layouts for change forms: horizontal tabs, vertical tabs, carousel, and collapsible.
    • Enhanced UI Components: Bootstrap 5 modals (replacing old popup windows), Select2 drop-downs, and a search bar for model admins.
    • Customization: Supports Live UI changes and custom CSS/JS integration.
    • Responsive Design: Optimized for mobile, tablet, and desktop layouts.
  3. Configure Side Menu ordering and visibility

    main

    The side menu is automatically generated from installed apps and models with admin classes.

    • Use hide_apps (e.g., ['auth']) or hide_models (e.g., ['auth.user']) to omit items.
    • Use order_with_respect_to to define the order. You can provide a full or partial list of apps, models, or custom link names.

    Note: Custom links cannot be ordered via this setting.

    # Order the auth app before the books app, other apps will be alphabetically placed after these
    "order_with_respect_to": ["auth", "books"],
    
    # Keep the same app ordering as above, but also order choice and book model links within the books app
    "order_with_respect_to": ["auth", "books", "books.author", "books.book"],
    
    # Just make sure auth is first
    "order_with_respect_to": ["auth"],
    
    # Order apps automatically, but make sure choice and book admin links are first within the books app
    "order_with_respect_to": ["books.author", "books.book"],
    
    # Place our choice model admin link and our custom link first within the books app
    "order_with_respect_to": ["books.author", "Make Messages"],
  4. Configure django-jazzmin in INSTALLED_APPS

    main

    To activate Jazzmin, add 'jazzmin' to your INSTALLED_APPS setting.

    Important: 'jazzmin' must be placed before 'django.contrib.admin' in the list to ensure the custom admin templates and styles are correctly applied.

    INSTALLED_APPS = [
        'jazzmin',
        'django.contrib.admin',
        ...
    ]
  5. Configure Jazzmin via JAZZMIN_SETTINGS

    main

    To configure the general behavior of Jazzmin, define a JAZZMIN_SETTINGS dictionary in your Django settings file. This dictionary controls branding, menus, UI tweaks, and change form layouts.

    JAZZMIN_SETTINGS = {
        "site_title": "Library Admin",
        "site_header": "Library",
        "site_brand": "Library",
        "site_logo": "books/img/logo.png",
        "login_logo": None,
        "login_logo_dark": None,
        "site_logo_classes": "img-circle",
        "site_icon": None,
        "welcome_sign": "Welcome to the library",
        "copyright": "Acme Library Ltd",
        "search_model": ["auth.User", "auth.Group"],
        "user_avatar": None,
        "topmenu_links": [
            {"name": "Home",  "url": "admin:index", "permissions": ["auth.view_user"]},
            {"name": "Support", "url": "https://github.com/farridav/django-jazzmin/issues", "new_window": True},
            {"model": "auth.User"},
            {"app": "books"},
        ],
        "usermenu_links": [
            {"name": "Support", "url": "https://github.com/farridav/django-jazzmin/issues", "new_window": True},
            {"model": "auth.user"}
        ],
        "show_sidebar": True,
        "navigation_expanded": True,
        "hide_apps": [],
        "hide_models": [],
        "order_with_respect_to": ["auth", "books", "books.author", "books.book"],
        "custom_links": {
            "books": [{
                "name": "Make Messages",
                "url": "make_messages",
                "icon": "fas fa-comments",
                "permissions": ["books.view_book"]
            }]
        },
        "icons": {
            "auth": "fas fa-users-cog",
            "auth.user": "fas fa-user",
            "auth.Group": "fas fa-users",
        },
        "default_icon_parents": "fas fa-chevron-circle-right",
        "default_icon_children": "fas fa-circle",
        "related_modal_active": False,
        "custom_css": None,
        "custom_js": None,
        "use_google_fonts_cdn": True,
        "show_ui_builder": False,
        "show_theme_chooser": False,
        "changeform_format": "horizontal_tabs",
        "changeform_format_overrides": {"auth.user": "collapsible", "auth.group": "vertical_tabs"},
        "language_chooser": True,
    }
  6. Add a new language translation

    main

    Jazzmin overrides Django templates, which can lead to many strings appearing as untranslated. When adding a new language, follow this workflow to ensure you only include strings unique to Jazzmin and avoid duplicating Django's built-in translations:

    1. Navigate to the jazzmin folder.
    2. Create the language directory structure (e.g., locale/de/LC_MESSAGES).
    3. Run django-admin makemessages to extract strings.
    4. Return to the project root.
    5. Run the pruning command: ./cli.py locales --prune <lang_code> (e.g., ./cli.py locales --prune de) to remove strings already provided by Django.
    6. Review the remaining strings. If any are not unique to Jazzmin, find them in the codebase and ensure they match the exact strings used in Django's admin translation files.
    7. Repeat makemessages until the file contains only unique Jazzmin strings.
    # Example for German (de)
    cd jazzmin
    mkdir -p locale/de/LC_MESSAGES
    django-admin makemessages
    cd ../
    ./cli.py locales --prune de
  7. Run the test project

    main

    To run the internal test_app for development and demonstration purposes, follow these steps:

    1. Setup database tables: Run migrations using uv.
    2. Generate test data: Reset the database state with the reset command.
    3. Run development server: Use runserver_plus (which includes the werkzeug debugger) or use the Makefile shortcut.

    Alternatively, you can use the Makefile to perform all setup and running steps at once.

  8. Install the development environment

    main

    This project uses uv for dependency management. To set up the development environment, clone the repository and use the provided Makefile to install dependencies.

    Ensure uv is installed on your system before proceeding.

    git clone git@github.com:farridav/django-jazzmin.git
    cd django-jazzmin
    make deps
  9. Enable the UI Customizer

    main
    Jazzmin includes a built-in UI configurator (inspired by AdminLTE) that allows you to interactively customize the interface. To enable it, set show_ui_builder to True within your JAZZMIN_SETTINGS dictionary. Once enabled, an icon will appear in the top right of the screen. After making changes, click the "Show Code" button in the customizer to generate a code snippet that you can copy into your Django settings to persist your changes.
  10. Target specific themes or color schemes in custom CSS

    main

    When writing custom CSS, you can target specific Bootswatch themes or the active color scheme (light/dark) using specific selectors.

    • To target a specific theme: Use body.theme-<themename>.
    • To target the dark color scheme: Use html[data-bs-theme="dark"].

    Example of targeting a specific paragraph in the darkly theme when in dark mode:

    /* Target theme specifically */
    body.theme-darkly p {
        color: pink;
    }
    
    /* Target theme specifically AND dark mode */
    html[data-bs-theme="dark"] body.theme-darkly p {
        color: pink;
    }