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:
- django CMS (>=3.4.0)
- django-admin-tools Dashboard
Installing
Using the latest version from PyPI:
pip install django-slick-admin
Using this GitHub repository:
pip install -e "git://github.com/palmbeach-interactive/django-slick-admin.git#egg=django-slick-admin"
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 %}
...
<body>
{% cms_toolbar %}
{% slick_admin_cms_style %}
...
Settings
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
SLICK_ADMIN_CMS_ENABLED = True # False
Same behaviour applies for the admin-tools Dashboard. Automatically set to True if admin_tools.dashboard in INSTALLED_APPS.
SLICK_ADMIN_DASHBOARD_ENABLED = True # False
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.
- Adjust your dashboard settings in your project settings folder according to the documentation:
- Documentation django-admin-tools
Customization
Start with customizing the included admin/base_site.html template.
Stylesheets
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 https://github.com/palmbeach-interactive/django-slick-admin-styles
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 \
./site-static/django_slick_admin/css/django-slick-admin.css
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([
'./sass/admin/custom.sass'
])
.pipe(sass({
includePaths: './node_modules/django-slick-admin-styles/sass/',
outputStyle: 'expanded',
precision: 10
}))
.pipe(autoprefixer({browsers: AUTOPREFIXER_BROWSERS}))
.pipe(concat('django-slick-admin.css'))
.pipe(gulp.dest('website/site-static/django_slick_admin/css/'))
});
