Theme style

Use the Theme Style type to create the main visual style for a theme. This is split into a number of tabs.

Basic

Provide a name for your theme and a brief description in the Basic tab.

A theme style can work as a fully-formed theme. In the browse view, the Basic tab provides an Install button for you to try out your style.

Bootstrap

Metrici themes are based on Bootstrap 3. You can replace the main Bootstrap 3 CSS file by linking to it in the Bootstrap files field. The instructions describe how to link to an uploaded file, use a zip file, or use a file at another known location. If you use a file that does not reside on the Metrici server, it must be accessible using both HTTP and HTTPS. Provided the other server supports both HTTP and HTTPS, you can achieve this by starting the url with //, e.g. //other.server.com/path/to/file.css.

You can add more than one CSS file to replace Bootstrap 3. However, you will generally want to add additional files to the Files section - see below for an explanation why.

The standard Bootstrap 3 theme needs some adjustment to work well with Metrici applications, particulary to reduce the size of header elements and spacing because these are used as field headings in Metrici. Make sure the bootstrap fixes box is ticked to include these.

Files

On the files tab, specify the CSS and JavaScript files that support your style.

Unlike the Bootstrap files section, these files are inserted at the end of the head section, rather than the beginning, and can thus override styles set by components.

As an example, your style might want to change the header size on a popup box. If you do that in the Bootstrap section, that will be overridden by the standard components that come after it. But adding the CSS to the theme files section will make sure that your style comes later in the head section and therefore takes precedence.

Embedded

The embedded tab allows you to add CSS and JavaScript directly into the head section, at the base of the theme files. Use this for small scripts and overrides that would represent an overhead if added as separate files. Remember you have to reinstall the theme to pick up any changes to embedded code.

Advanced

Your style may depend on some pre-built components, which can be components built using the Theme Component, or resources built using the Resource type, or other components packed as themes in other ways. If you want to ALWAYS include these in the theme (because they support the common visual style, rather than being switched on by particular classes), you can add them to the Insert list.

In browse view, the advanced tab also has an expandible Manifest section. This allows you to see the generated XML for the theme. See Theme XML reference for a description of the format.

 

Once you have set up your style, use the Install button on the Basic tab to test your style. Check that it works with a variety of Metrici pages and activities.

Although you could use your style as a final theme, it is good practice to use a theme assembler to wrap your theme, which makes it easier to change and extend your theme later.