When you create a theme, you can set properties to control branding and appearance.
Application Name | The name of the application, as shown in the top left. |
Logo |
HTML to format the top left logo area. If you don't set it, it defaults to showing the application name. You can change this if you want to set an image instead of a word. Your image should link to ${rootPath}app/home.jsp so that your users can easily navigate back to the home page. |
Small Logo | HTML to format the top left logo area on small devices, when the menu is collapsed. This defauls to the normal logo, but if you are using images you can set this to use a smaller image. |
Footer | Footer text at the bottom of the page. |
Custom CSS | Additional CSS to be added to every page. |
Default account template | The default account template to use when auto-creating new accounts. This is an advanced option to control user-initiated account creation. |
Account action sign up node |
Node to be used in place of the standard sign up dialog when an account action or account template is passed to the sign on. This may be passed accountTemplate, accountAction, accountActionParameters and installOptions. This does not alter the standard sign up dialog, but shows this page when an account action or account template has been requested. The node is not executed, just displayed. The node may require an extension script to pick up the parameters and redirect to a suitable activity. |
Theme properties go through content filtering. This checks that the HTML (in logo, small logo and footer) and CSS (in custom CSS) is valid and does not contain any dangerous markup. The content filtering removes more complicated CSS statements. So the custom CSS is fine for simple things (like colours and sizes), but won't work for more complicated things (like graduated backgrounds and drop shadows).
You can use theme properties to create a quick, re-branded theme with simple styling changes. If that's all you want to do, then it's probably easiest to stick with the theme properties, but please do read Theme security to make sure that your theme stays secure.
Howeve, if you want to do any of the following, then you will need to delve further:
- Include JavaScript in your theme.
- Include unfiltered CSS.
- Include JavaScript or CSS files.
- Tailor which pages get which JavaScript and CSS.
- Control the order in which JavaScript and CSS are included on the page.
- Override standard components.
- Create reusable component themes that provide JavaScript and/or CSS that supports your Metrici components.
- Package your theme and the resources it uses so that it can be distributed easily.
These are covered in the following sections.