Introduction

It is possible to customize the look of CRM.web, and most of its elements, through the use of custom CSS stylesheets. This can be done by either updating the existing styles, or adding a new style. The following is a list of some of the elements that can be customized via CSS:

• Render hooks
• Forms
• Custom Widgets
• Tab-Styles in Headers

Adding a style

To customize the looks of CRM.web, you can customize an existing style, or add a new style to be assigned via CRM.designer configuration. The process to do so is as follows:

1. Create a sub-directory in folder styles.
   E.g. styles folder for a customer named "acme":

   .../web/
         /styles/
                /acme/

2. Add one file named {themename}.css for each theme.
   E.g. CSS files for themes "update" and "update.touchable":
   

   .../web/
         /styles/
                /acme/
                     update.css
                     update.touchable.css

3. Add CSS rules to the files created in step 2.
   E.g:
   

   .acme-important
   {
      background-color: firebrick;
      color: white;
      font-size: large;
   }
    
   .acme-done
   {
      background-color: green;
   }

Best practices for naming the folder:

• Use the customer/project name as a folder name.
• Use only lower case letters.
• If you already have a custom scripts folder, use the same name.

Applying a different style for a user or users

Once the above process has been carried out, if a new configuration was created, it will be necessary to assign it to a CRM.designer configuration via the Style Web Configuration parameter.

After applying the changes, it may be necessary to invalidate the cache, clear the browser cache, and restart the IIS application pool for the changes to display.

Practical example: customizing a field label

When a theme has been added or updated, the customizations will apply to all relevant items, as explained in Customizing Styles. However, it is also possible to modify specific elements of the interface by using HTML classes. An example to do this can be found in our article on Customizing a Field Label or Input in CRM.web. Please note that the exact process will change depending on the specific element to be customized, and the manuals should be referenced when possible.

Resources

Please refer to the manual pages on Customizing Styles, as well as Custom Field Labels and Inputs, for more information on the feature. As always, other than our available online documentation, be aware that you can refer to the manuals in the WORX Portal to find the documentation specific to your ACRM version.