Changes between Version 25 and Version 26 of DeveloperGuidelines/Themes


Ignore:
Timestamp:
09/27/16 08:57:33 (6 years ago)
Author:
Fran Boon
Comment:

--

Legend:

Unmodified
Added
Removed
Modified
  • DeveloperGuidelines/Themes

    v25 v26  
    4343Note 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.
    4444
     45NB 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.
     46
     47=== Simple modifications ===
     481. Add all CSS overrides to a file: {{{/static/themes/<themename>/style.css}}}
     491. Copy css.cfg from skeletontheme to your template folder: {{{/modules/templates/<templatename>/css.cfg}}}
     501. Add {{{../themes/<templatename>/style.css}}} to the end of the file
     511. Build: {{{static/scripts/tools/build.sahana.py}}}
     52
     53e.g. to just change the menu logo, add this to style.css (assuming the new logo is in {{{/static/themes/<themename>/img/logo.png}}}):
     54{{{
     55.S3menulogo {
     56  background: url(img/logo.png) left top no-repeat;
     57}
     58}}}
     59
     60== Complex modifications ===
     61Need to work with SCSS, ideally using Compass.
     62{{{
     63compass --compile
     64}}}
     65
     66=== Ext Theme ===
     67Use [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):
     68 * {{{static/scripts/ext/resources/css/ext-theme.min.css}}}
     69Can 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
     70
     71=== Customizing Form Design by Theme ===
    4572You 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):
    4673
     
    4976}}}
    5077
    51 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. And example function to use Semantic UI form styling:
     78Formstyles 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:
    5279
    5380{{{
     
    6996}}}
    7097
     98By default, all form fields have their unique divs like this:
     99{{{
     100<div class="form-row row" id="org_organisation_phone__row">
     101}}}
    71102
    72 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.
    73 
    74 === Ext Theme ===
    75 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):
    76  * {{{static/scripts/ext/resources/css/ext-theme.min.css}}}
    77 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
    78 
    79 === Customizing Form Design by Theme ===
    80 By default, all form fields have their uniq divs like that {{{<div class="form-row row" id="org_organisation_phone__row">}}} In this example, we will put Organization Home Country field next to Organization Type field.
    81 
    82 Add these 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}}}}
    83 
    84 That's it.
     103e.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:
     104{{{
     105#org_organisation_link_defaultorganisation_type__row, #org_organisation_country__row {display:inline-block;float:left}
     106}}}
    85107
    86108== See Also ==