Skip to content
Clean & minimal theme for Django admin with support for custom sidebar and already prepared dashboard components.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
nucleus
.gitignore
LICENSE
MANIFEST.in
README.md
screenshot.png
setup.py

README.md

Screenshot

django-nucleus

Django Nucleus is Django admin theme extending default admin CSS styles.

Getting started

  1. Installation
pip install django-nucleus

or if you are using pipenv

pipenv install django-nucleus
  1. Add nucleus into INSTALLED_APPS in your settings file before django.contrib.admin.

  2. Update context_processors by adding new context processor nucleus.context_processors.nucleus

Nucleus settings

_ = lambda s: s  # Translations in setting file

NUCLEUS = {
    'sidebar': {
        # Title
        'title': _('Custom title'),

        # Footer
        'footer': {
            'title': _('Custom title'),
            'description': _('Longer text displayed below the title'),
        },

        # Navigation
        'navigation': {
            # Application
            'auth': {
                'title': _('Accounts'),  # Override title
                'icon': 'img/custom-icon.svg'  # Optional
            },

            # Model
            'auth.User': {
                'title': _('Users'),
                'icon': 'img/custom-icon.svg'  # Optional
            }        
        }    
    }
}

Custom dashboard page

apps.py

from django.contrib.admin.apps import AdminConfig


class AppAdminConfig(AdminConfig):
    default_site = 'app.admin.AppAdmin'

admin.py

from django.contrib.admin import AdminSite


class AppAdmin(AdminSite):
    def index(self, request, extra_context=None):
        # Update extra_context with new variables
        return super().index(request, extra_context)

settings.py

INSTALLED_APPS = [
    'app.apps.AppAdminConfig',
    # 'django.contrib.admin',    
]

templates/admin/index.html

{% extends "admin/base_site.html" %}
{% load i18n static %}

{% block bodyclass %}{{ block.super }} dashboard{% endblock %}

{% block breadcrumbs %}{% endblock %}

{% block content %}
 
{% endblock %}

Components

Heading

return render_to_string('nucleus/components/heading.html', {    
    'title': 'Title,
    'subtitle': 'Subtitle,
    'image': 'img/image.png', # Optional image
    'rounded': True, # Rounded corners, optional
    'initials': 'LV', # Optional text of the image is not available
    'background_color': 'red' # Optional background color
})

Stat item

return render_to_string('nucleus/components/stat_item.html', {
    value: '5269',
    title: 'Units Sold',
    subtitle: 'Avg. 351 per week', 
    label: '-12%',
})

Chart

return render_to_string('nucleus/components/chart.html', {
    series: '{"labels": ["1", "2", "3"], "datasets": [{"data": [1, 2, 3]}]}', # JSON object
    height: 360,  # Optional 
})

Signed number

return render_to_string('nucleus/components/signed_number.html', {
    'value': 21.87,  # Value which will be compared
    'display': '$21.87 ',  # For example string with currency to display (django-money object)
})

Progress

return render_to_string('nucleus/components/progress.html', {
    'value': 32,  # Value in percent in this case it will be (style="width: 32%")
})

Label

return render_to_string('nucleus/components/progress.html', {
    'title': _('Active'),
    'class': 'success',  # Optional. Accepted values: success, info, error 
})

User avatar

To display user avatar in top right corner before the currently signed user you can implement two methods in user model:

  • get_initials
  • get_avatar

Credits

You can’t perform that action at this time.