How to Customize Calem Client Themes

Calem web clients can be customized via Calem Designers and configurations - see this blog for more information. This blog discusses the customization via stylesheets (CSS).

Calem provides themes for the web clients including Calem Classic and Mint. Each theme is a set of components, CSS, and configuration files. Customers can customize the look and feel of a client theme through CSS. For instance, Calem Sandbox login screen comes with a yellow background, while the production login screen has a blue background. The background color customization is achieved through CSS.

1. Custom CSS

A custom CSS file can be provided to customize the Calem web client. For instance, you may drop your CSS file as client/themes/calem/calem.custom.css. The CSS file calem.custom.css includes your custom look and feel. This file is loaded by Calem.

2. Login CSS

Web login page can be customized through a custom CSS file at client/themes/login.custom.css. This file can include your custom look and feel for your login screen.

3. Integration CSS

Integration CSS files can be provided ways to further customize the look and feel of Calem Themes. If your requirements can be achieved through a single CSS file, use the custom CSS file (calem.custom.css) above. The integration CSS files allows you define the following CSS files:

A common CSS file for all themes
An individual CSS file for a theme

Here are the steps to do the integration CSS files:

Develop your CSS files.
Place the CSS files at client/themes/int/
Modify your configuration (server/conf/calem.custom.php) to tell Calem the custom CSS files and the themes they are intended for.

Additional Resources