Changes between Version 25 and Version 26 of DeveloperGuidelines/Themes

Timestamp:

09/27/16 08:57:33 (9 years ago)

Author:

Fran Boon

Comment:

--

DeveloperGuidelines/Themes

@@ -43 +43 @@
 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 ===
+Need to work with SCSS, ideally using Compass.
+{{{
+compass --compile
+}}}
+
+=== 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):
 
@@ -49 +76 @@
 }}}
 
-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:
+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:
 
 {{{
@@ -69 +96 @@
 }}}
 
+By default, all form fields have their unique divs like this:
+{{{
+<div class="form-row row" id="org_organisation_phone__row">
+}}}
 
-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 [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 ===
-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.
-
-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}}}}
-
-That's it.
+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 ==