Skip to main content

Adding Custom CSS Styles to CRM.web

Aurea Support
  • Updated

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
Note: In order to customize these to your liking, you will need to be familiar with CSS. Multiple free resources exist online to learn CSS, such as the W3Schools CSS Tutorial.

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.
Note: You can use @import to define CSS rules once, but use them for multiple themes, as well as to modify the existing themes without removing valuable data.

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.

 

Related articles