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.

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.

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. 

//Default css for all themes

$_CALEM_dist['admin_conf']['int_css_df']=array(

'client/themes/int/acme.css'

);

//Individual css per theme (such as ui_classic, ui_mint_mini, ui_mint, or ui_mint_dark)
//where 'int_css_ui_theme_mini' has a prefix 'int_css_' and the theme name 'ui_mint_mini'

$_CALEM_dist['admin_conf']['int_css_ui_mint_mini']=array(

'client/themes/int/acme_mint_mini.css' 
); 

Additional Resources

• Calem Enterprise Customization
• How to Increase Productivity with Home Form
  
• List View Customization
  
• Work Order Print Customization
• Mobile Screen Customization
• An example: custom fields and screen customization
• Classes and Class Attributes
  
• Calem Integration Part III: Custom Triggers
  
• User Guide and Admin Guide (customer account required)
• Calem Enterprise Training Site
  
• Calem Enterprise Blogs
  
• Calem Enterprise demo