Code Monkey home page Code Monkey logo

djangocms-admin-style's Introduction

django CMS Admin Style

pypi python django djangocms djangocms4 coverage

Adds pretty CSS styles for the django CMS admin interface. Supports optional django-admin-shortcuts package.

Note

This project is considered 3rd party (no supervision by the django CMS Association). Join us on Slack for more information.

https://raw.githubusercontent.com/divio/djangocms-admin-style/master/preview/dashboard.png https://raw.githubusercontent.com/divio/djangocms-admin-style/master/preview/listview.png
https://raw.githubusercontent.com/divio/djangocms-admin-style/master/preview/datepicker.png https://raw.githubusercontent.com/divio/djangocms-admin-style/master/preview/shortcuts.png

The shortcuts you see on top of the dashboard are from django-admin-shortcuts

Contribute to this project and win rewards

Because this is a an open-source project, we welcome everyone to get involved in the project and receive a reward for their contribution. Become part of a fantastic community and help us make django CMS the best CMS in the world.

We'll be delighted to receive your feedback in the form of issues and pull requests. Before submitting your pull request, please review our contribution guidelines.

We're grateful to all contributors who have helped create and maintain this package. Contributors are listed at the contributors section.

Documentation

See REQUIREMENTS in the setup.py file for additional dependencies:

Installation

For a manual install:

  • run pip install djangocms-admin-style
  • add djangocms_admin_style to your INSTALLED_APPS just before 'django.contrib.admin'
  • run python manage.py migrate djangocms_admin_style

Configuration

The django CMS Admin Style overrides django admin's base_site.html, but you can still partially customize this page. Look at the source of templates/admin/base_site.html and override the templates that are included in various blocks. For example, you can add your own CSS in templates/admin/inc/extrastyle.html.

The following additional settings can be set:

  • CMS_ENABLE_UPDATE_CHECK = True Set to False to disable the update notification.
  • CMS_UPDATE_CHECK_TYPE = ('minor') Set to ('patch') to get only patch notifications. (minor = 3.x.x, patch = 3.4.x)

The update checker does not gather or record any data.

To compile CSS run the following commands using node 16:

  • nvm use
  • npm install
  • npx gulp icons sass bundle

For further options have a look at the gulpfile.js.

Dark mode support

Django supports a dark mode admin since version 3.1. djangocms-admin-style introduces css variables that contain color codes and change with the selected mode:

CMS variable name Color Django admin fallback Color
--dca-white #ffffff --body-bg #ffffff
--dca-black #000000 --body-fg #303030
--dca-gray #666 --body-quiet-color #666
--dca-gray-lightest #f2f2f2 --darkened-bg #f8f8f8
--dca-gray-lighter #ddd --border-color #ccc
--dca-gray-light #999 --close-button-bg #888
--dca-gray-darker #454545    
--dca-gray-darkest #333    
--dca-gray-super-lightest #f7f7f7    
--dca-primary #00bbff --primary #79aec8

Extending styles in your own app

If your project or app requires specific styles if djangocms-admin-style is installed (e.g., to better adjust to the django CMS style) you can add selective styling by adding the .djangocms-admin-style selector:

// Show widget in CMS colors if djangocms-admin-style is installed
.djangocms-admin-style #my-widget {
    color:  var(--dca-primary, black);
}

We recommend to following rules for your app's admin css:

  • Try avoid using color, background etc. styles where possible and meaningful
  • If necessary use as few as possible standard django CMS colors (preferably from see above list with fallback colors)
  • Usage: var(--dca-color-var, var(--fallback-color-var, #xxxxxx)) where #xxxxxx represents the light version of the color.

Running Tests

You can run tests by executing:

virtualenv env
source env/bin/activate
pip install -r tests/requirements/base.txt
python setup.py test

In order to run integration tests you need to have Docker installed, then run the following command:

make test

To test other Django versions simply append VERSION=4.1`. You can also run the test server through:

make run

The integration tests are written using Casperjs, phantomcss and djangocms-casper-helpers.

djangocms-admin-style's People

Contributors

lory87 avatar vxsx avatar finalangel avatar alesdotio avatar fsbraun avatar yakky avatar pre-commit-ci[bot] avatar mkoistinen avatar czpython avatar marksweb avatar rafalp avatar raffaellasuardini avatar benzkji avatar stefanfoulis avatar ryanbagwell avatar nicolairidani avatar jqb avatar jbpenrath avatar jrief avatar gkmngrgn avatar beniwohli avatar aiky30 avatar chaosk avatar itbabu avatar mfcovington avatar geoidesic avatar digi604 avatar tobifroe avatar vinitkumar avatar goldhand avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.