-
Notifications
You must be signed in to change notification settings - Fork 5
CSS and Theme Support
This document covers:
- Editing CSS files
- Changing between CSS "themes"
- Creating a new theme
The CSS files for the system are located in PROJECT_ROOT/media/css. This directory contains a number of subdirectories. By default, the CSS files are loaded from PROJECT_ROOT/media/css/default/. This directory contains the following files and folders:
- ie.css, mobile.css, print.css, screen.css, src/, and plugins/ - These are part of the Blueprint CSS framework and should not be modified.
- jquery-ui.css and images/ - These support the use of JQuery UI themes. This should not be modified.
- pages/ - This directory contains CSS files for the various primary pages in the system. These CSS files are loaded when each page renders. This is where new CSS rules should go.
makahiki_settings.py includes an ENABLE_CSS_SELECTOR setting, which toggles the CSS selector on or off. There is also a MAKAHIKI_THEME setting, which states the theme to be used as default.
It is highly recommended that the ENABLE_CSS_SELECTOR be set to False in a production environment.
Each folder in PROJECT_ROOT/media/css/ corresponds to a theme. Each theme folder should have the Blueprint CSS files as well as the page specific CSS files as outlined above.
Makahiki uses jQuery UI to style certain widgets. Each theme folder does need to contain the jquery-ui.css file and the images/ folder. New jQuery UI themes can be created from jQuery UI ThemeRoller. Make sure to rename the CSS file when copying it into the folder. Also, the Javascript files (.js) do not need to be included.