Product theme

When a user installs your product, you can specify additional theme components to be added to their account theme. This is known as a "product theme". It is merged with the theme selected by the account holder which provides the styling for the account.

Hold your theme and the files it requires in account.products.product.theme. See Theme for an example.

Do not use a product theme to override the styling of the account theme, only to provide additional styling and functionality required for your product.

The items in your product theme should all be dependent on classes that are private to your product, for example by prefixing them with product-, where product is the short reference for your product. Create a Theme Component for each triggering class, and link this to the required CSS and JavaScript files. Then create a Theme Assembler which includes each of your theme components, and link this into your product builder - see Product builder and installer.

If you want to provide theming that applies to the whole of the installed product, and if you use the navigation feature to create a menu or tree navigation for your application, you can add a class to the navigation which can then be used to bring your product theme components onto every page. This is what is done in the sample. The navigation adds a class "gadgets-navigation", which is specified on a theme component that brings in an overall CSS and JS files for the application. See Product instance – general configuration for details on how to set up the navigation.

The CSS and JS in the sample product theme contain items that many products will want.

  • product_theme_css.css switches off search, edit and the more menu on all pages, except for the edit link on pages with the allow-protected-edit class set on the body. This is useful to discourage the user from using the underlying node maintenance and disrupting the application (though the nodes should also be protected using permissions). The user can switch off edit protection to reveal the menus.
  • product_theme_js.js adds additional classes around the page content, which makes it stand out more when using tree navigation.