| | 44 | |
| | 45 | === Theme Settings === |
| | 46 | |
| | 47 | Styles in themes derived from default/scss can be controlled by configuration settings. |
| | 48 | |
| | 49 | Foundation base styles are configured in {{{themes/THEME/scss/_settings.scss}}}. These settings control the colors and other parameters of Foundation elements, e.g. menus, buttons, etc. |
| | 50 | |
| | 51 | Sahana-specific styles are configured in {{{themes/THEME/scss/theme/_config.scss}}}. These settings control the colors and parameters of Sahana-specific UI elements, e.g. data tables/lists, rheader tabs, S3 form widgets etc. |
| | 52 | |
| | 53 | There is naturally some overlap between Sahana-specific elements and Foundation elements (e.g. some Sahana widgets using Foundation elements). In such cases, Sahana-specific styles will apply Foundation settings, unless overridden in {{{_config.scss}}}. |
| | 54 | |
| | 55 | === Modifying Styles === |
| | 56 | |
| | 57 | To modify Sahana styles, simply copy the respective SCSS file from {{{themes/default/scss/theme}}} into {{{themes/THEME/scss/theme}}}, and then modify the copy. The build process will then automatically use the modified copy instead of the corresponding default source. |
| | 58 | |
| | 59 | To add new styles without copying+modifying a default SCSS source, one can simply create another {{{_*.scss}}} in the THEME/scss/theme folder, and then add an {{{@import}}} statement for it to THEME/scss/theme.scss. |
| | 60 | |
| | 61 | === Changing the Default Theme === |
| | 62 | |
| | 63 | Note that modifying any of the SCSS configurations or sources in {{{default/scss}}} would require to rebuild ''all'' themes based on it (including default itself, of course), in order to propagate the changes. |
| | 64 | |
| | 65 | While this is a good way to let all themes benefit from fixes and enhancements developed for the default theme, major changes in the default theme ''could'' also conflict with the design of derivative themes. In some cases, this can be solved by introducing additional settings in {{{_config.scss}}} - but over time such enforced backwards-compatibility could lead to undesirably complex SCSS that becomes hard to maintain. |
| | 66 | |
| | 67 | To not let such dependencies prevent future development of the default theme, they can be resolved by simply copying the original SCSS source from {{{default/scss}}} into the dependent theme's {{{THEME/scss}}}, before changing the SCSS in default. |
| | 68 | |
| | 69 | In the same way, a theme can be made entirely independent of default SCSS by simply copying all remaining SCSS sources from {{{default/scss}}} into {{{THEME/scss}}}, before changing the SCSS in default. |
