Skip to main content

Slick admin styles for Django and django CMS.

Project description

Django Slick Admin

A slick & clean look for your Django (>=1.10) admin interface.

Slick admin works completely unobtrusive and does everything via CSS. Well not everything - there are some optional & tiny bits of JavaScript involved as well.

Slick admin works with the standard Django admin - and comes with support for:


Using the latest version from PyPI:

pip install django-slick-admin

Using this GitHub repository:

pip install -e "git://"

Then add django_slick_admin to INSTALLED_APPS, before django.contrib.admin.

CMS front end editing

To have the same color schema in the CMS front end there is a template tag included which loads additional CSS styles if 'editing mode' is enabled. To use them load slick_admin_tags in your base template and add slick_admin_cms_style next to cms_toolbar.

{% load cms_tags sekizai_tags slick_admin_tags %}
    {% cms_toolbar %}
    {% slick_admin_cms_style %}


To have a consistent look both for front end editing and administrative interface there are some additional styles available in 'cms mode'. The 'cms mode' is automatically activated when cms is present in your INSTALLED_APPS - but you can also override this behaviour with


Same behaviour applies for the admin-tools Dashboard. Automatically set to True if admin_tools.dashboard in INSTALLED_APPS.


Stylesheet locations:

SLICK_ADMIN_CSS = <path>     # default: STATIC_URL + 'django_slick_admin/css/django-slick-admin.css'

SLICK_ADMIN_CMS_CSS = <path> # default: STATIC_URL + 'django_slick_admin/css/cms-styles.css'

Dashboard Customization:

If you have django-admin-tools dashboard installed it's advised to copy the included templates in admin_tools/dashboard folder into your local projects templates folder.


Start with customizing the included admin/base_site.html template.


The stylesheets are based on Sass and live in the separate django-slick-admin-styles repository.

The versions/tags for the styles are aligned with the main repository. So if - for example - you are installing django-slick-admin==0.1.1 you should use the '0.1.1' version for the styles as well.

Quick & dirty way to compile stylesheets with adjusted settings

Install required npm modules:

npm install -D
npm install -D node-sass

Create a sass file - e.g. custom-admin-styles.sass to override some defaults and import django-slick-admin-styles. See _defaults.sass for vailable settings.

// custom-admin-styles.sass
@charset "UTF-8"

$color-primary: #00ccff
$color-secondary: #ffcc00

@import settings/base
@import mixins/base
@import components/base
@import admin_tools/base

Run sass compiler (adjust output path according to your setup):

./node_modules/node-sass/bin/node-sass \
--include-path ./node_modules/django-slick-admin-styles/sass \
custom-admin-styles.sass  \

Integrate via Gulp tasks

Intall all needed npm packages:

npm install

gulpfile.js: See gulpfile.js for reference.

gulp.task('admin-styles', function () {
    return gulp.src([
            includePaths: './node_modules/django-slick-admin-styles/sass/',
            outputStyle: 'expanded',
            precision: 10
        .pipe(autoprefixer({browsers: AUTOPREFIXER_BROWSERS}))

Project details

Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

django-slick-admin-0.2.3.tar.gz (632.4 kB view hashes)

Uploaded Source

Supported by

AWS AWS Cloud computing and Security Sponsor Datadog Datadog Monitoring Fastly Fastly CDN Google Google Download Analytics Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Sentry Sentry Error logging StatusPage StatusPage Status page