= Themes =
[[TOC]]

Sahana Eden supports custom Themes as part of it's overall [DeveloperGuidelines/Templates Templates] system.

This allows customisation of:
* Layout
* CSS

== Default Theme ==
By default these files are used:
* {{{/modules/templates/default/views/layout.html}}}
* {{{/static/img}}}
in non-Debug mode:
* {{{/static/themes/default/eden.min.css}}}
in Debug mode:
* {{{/modules/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:
1. If not already using a template create one: {{{/modules/templates/<templatename>}}}
1. Create these files in your templates folder:
 * {{{/modules/templates/<templatename>/__init__.py}}} - this can be empty but must be present.
 * {{{/modules/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}}}
1. Specify the Theme name in your template's {{{/modules/templates/<templatename>/config.py}}}:
 * {{{settings.base.theme = "themename"}}}
1. Create a new folder to hold the theme elements:
 * {{{/static/themes/<themename>}}} which will usually contain a file {{{style.css}}} (it is normally assumed that {{{/static/themes/default/css/widgets.css}}} is also used at a minimum, although using more of the default Foundation theme is recommended)
 * {{{/static/themes/<themename>/img}}}
 * {{{/modules/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 - this is normally done by having the files at the same depth in the tree.

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.

=== Simple modifications ===
1. Add all CSS overrides to a file: {{{/static/themes/<themename>/style.css}}}
1. Copy css.cfg from skeletontheme to your template folder: {{{/modules/templates/<templatename>/css.cfg}}}
1. Add {{{../themes/<templatename>/style.css}}} to the end of the file
1. Build: {{{static/scripts/tools/build.sahana.py}}}

e.g. to just change the menu logo, add this to style.css (assuming the new logo is in {{{/static/themes/<themename>/img/logo.png}}}):
{{{
.S3menulogo {
  background: url(img/logo.png) left top no-repeat;
}
}}}

=== Complex modifications ===

 - see [wiki:DeveloperGuidelines/Themes/SCSS]

=== Ext Theme ===
Use [http://www.codebeautifier.com 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 or this Eclipse plugin: http://spket.com/ext-theme-builder.html

=== Customizing Form Design by Theme ===
You can also customize the styling and classes used in forms using formstyle. Add this to config.py (in config() function if using the new template location):

{{{
settings.ui.formstyle = "your_formstyle"
}}}

Formstyles can be: table2cols, table3cols, divs, bootstrap, foundation and many more. You can find these functions in web2py/gluon/sqlhtml.py with the names "formstyle_<something here>". You can refer to these to implement custom functions. The settings.ui.formstyle can also take a function. An example function to use Semantic UI form styling:

{{{
def semantic_formstyle(id, label, controls, help):
    _help = DIV(help, _class='w2p_fc')
    _controls = controls
    _label = LABEL(label)
    return DIV(
        _label,
        _controls,
        _help,
        _id=id,
        _class="ui field"
        )

def config(settings):
    settings.ui.formstyle = semantic_formstyle
    # other settings ....
}}}

By default, all form fields have their unique divs like this:
{{{
<div class="form-row row" id="org_organisation_phone__row">
}}}

e.g. To put the Organization Home Country field next to the Organization Type field, add this CSS code to your css file here /static/themes/MYTHEME/style.css:
{{{
#org_organisation_link_defaultorganisation_type__row, #org_organisation_country__row {display:inline-block;float:left}
}}}

== See Also ==
* [DeveloperGuidelines/Templates Templates]
* [DeveloperGuidelines/Menus Menus]
* [DeveloperGuidelines/Minify Minify]
* [DeveloperGuidelines/Templates/CustomPages Custom Pages]
* [wiki:BluePrint/CSS BluePrint/CSS]
* [http://SMACSS.com SMACSS.com] - a good book on the topic of scalable, modular CSS