Theme components

Theme components represent chunks of styling and UI functionality that can be reused between different themes. Use the Theme Component type to create theme components.

There are two ways of using theme components.

  • If you want components that are ALWAYS included to support your style, or ALWAYS included to support the brand, you can add them to the include list of the theme style or theme brand. This is useful for CSS that you want to use on every page.
  • For more specialised CSS and JavaScript that is only required on some pages, for example to support a product, you can specify a trigger class on the component (See the Reference field on the Trigger tab). The component will only be included when that class is used on the page. To use components in this way, add the components to the component list of the theme assembler.

Whichever way you use them, you build components the same way. Set the list of files and embedded CSS and JavaScript exactly as for a theme style. The files for components are inserted after the standard Bootstrap framework but before the theme style files. This allows them to override Bootstrap styling, and in turn be overridden by the theme styling if necesary.

The Advanced tab has an include list for other components that should ALWAYS be included when this component is included (like the include list on a theme style or theme brand). There is also a slide-down Dependencies section, allowing you to set dependencies manually, which can be useful for some types of components or to integrate with components built with the Resource type, or to build more complex dependencies yourself. See the requires and required by information in the Theme XML reference.

If components are only ever required to support a style or brand, and do not provide product functionality, add them to the include list of the style or brand and test them as part of that. If components are intended to support a product or general capability, and are triggered in response to classes on the page, then they should be tested independently of any styled themes. To do this, create a new Theme Style, but set no options on it, and then add this and the components to be tested to a Theme Assembler. Install the assembled theme to test your components. Once you are happy the product works with the default style, you can test it with a custom style if required.

You can use the Theme Assembler to bundle a set of related components together, and then use that assembly of components in other themes. This can be useful for packaging all of the components required to support a product. Don't worry about components being included more than once - the include process removes duplicates.