| Version 8 (modified by , 13 years ago) ( diff ) |
|---|
Themes
Table of Contents
Sahana Eden supports custom Themes as part of it's overall Templates system.
This allows customisation of:
- Layout
- CSS
NOTE: This is still a work-in-progress: not everything here is ready yet & the details may change!
Default Theme
By default these files are used:
/private/templates/default/views/layout.html/private/templates/default/views/load.html/static/img
in non-Debug mode:
/static/themes/default/eden.min.css
in Debug mode:
/private/templates/default/css.cfg/static/themes/default/layout.css/static/themes/default/reset.css/static/themes/default/layout.css/static/themes/default/shortcut.css/static/themes/default/widgets.css/static/themes/default/style.css/static/themes/default/homepage.css
etc
User Theme
A new Theme should match the name of the controlling Template.
To create a new theme:
- Specify the Theme name in your template's
/private/templates/<templatename>/config.py:settings.base.theme = "themename"
- Create a new folder to hold the theme elements:
/static/themes/<themename>which will usually contain these files:layout.css,style.css(it is normally assumed that/static/themes/default/css/widgets.cssis also used)/static/themes/<themename>/img
- If not already using a template create one:
/private/templates/<templatename> - Create these files in your templates folder:
/private/templates/<templatename>/__init__.py- this can be empty but must be present./private/templates/<templatename>/css.cfg- list of CSS files to use in Debug mode, or be compressed together for the normal non-debug mode by the Build script (static/scripts/tools/build.sahana.py) into:/static/themes/<themename>/eden.min.css
/private/templates/<templatename>/views/layout.html- overall layout of the HTML.
Note that all CSS files should be able to find their images both in debug mode & when compressed into eden.min.css
NB Production sites who wish to compile their code either need to hardcode the theme name in their views/layout.html or upgrade to Web2Py version: 2.00.0 (2012-06-17 23:36:32), or newer.
Ext Theme
Use CodeBeautifier to merge the ext-all-notheme.css with xtheme-gray.css (merges properties on the same selectors which most minifiers don't):
static/scripts/ext/resources/css/ext-theme.min.css
Can also use this to merge a custom theme, e.g. built with http://extbuilder.dynalias.com
