Themes are used for different purposes, and it is useful to different a hierarchy of themes:
- Full themes can be applied to a user or an account. This can be further split into:
- Branded themes, that are branded, intended for a specific organisation, and can not be used as the basis for other themes.
- Reusable themes, that are not branded, can be used by many organisations, and can be used as the basis for other themes.
- Theme components which contain resources to support specific visual elements or dynamic components, but which can not be used as they are and must be incldued in other themes.
Different types of themes need subtly different structures.
Full themes
All full themes need to include the system-wide Default Theme (system.app.DefaultTheme), either directly, or by including another full theme such as Metrici (library.theme.metrici). This provides the base definition of all the styles and components needed by Metrici.
The underlying Bootstrap 3 styles generally work very well with Metrici, though some can be tweaked on a theme-by-theme basis. However, some aspects of the Bootstrap style, particularly header sizes, do not fit well with Metrici applications. If you are creating a full theme without basing it on another full theme, consider including ${rootPath}resources/library.theme.metrici/metrici.css, or equivalent CSS, somewhere in your theme.
A full theme can replace the entire Bootstrap theme. See Advanced theme configuration for instructions.
Branded themes
As well as the structure for all full themes, branded themes typically require:
- Custom CSS for branding
- Theme properties
Custom CSS for branding can be achieved by creating a resource in the css-theme section, the content of which includes the theme CSS, as in the example in Theme resources. You can also create a resource in the js-theme section for JavaScript. In each case, add a <requiredBy>head</requiredBy> clause to make sure your custom CSS and JavaScript are brought in always.
You may have to set follows clauses to make sure that your custom CSS and custom JavaScript follows that defined on the theme on which it is based.
If your branded theme contains specific component brought in by classes, set them up as described in Theme resources, or by including a theme component that defines them.
Use theme properties to set branding. You may want to change the application name, and are almost certain to want to change the footer.
Reusable themes
As well as the structure for all full themes, branded themes typically require default branding and a replacement head resource which includes the new theme components while still leaving the custom resource to be used by branded themes.
The default branding is set by the Metrici instance, and is available by including Default Brand (system.app.DefaultBrand). if you have included an existing reusable theme, such as Metrici (library.theme.metrici), then this will already have included the default brand.
To include additional theme-wide resources, you need to make the "head" resource dependent on them, which you can achieve by adding the <requiredBy>head</requiredBy> clause to the resources.
Your theme-wide CSS and JavaScript should go into the css-theme and js-theme sections. If you have based your reusable theme on another theme, you may need to set follows clauses to make sure that your CSS and JavaScript follow that of the theme on which it is based.
If your reusable theme contains specific component brought in by classes, set them up as described in Theme resources, or by including a theme component that defines them.
Theme components
A theme component is a theme that does not include the default theme, or any other full theme, but only includes a set of resource statements required to support specific class-based styles or behaviours. Theme components are a good way of packaging front-end styling and behaviour so that it can be reused by many themes.
CSS resources in theme components should generally reside in the css-standard section and follow standard-css. Similary, JavaScript should generally reside in js-standard and follow standard-js. You may need to set additional follows clauses if there are dependencies between your components and other components.