SugarCRM Customization: CSS and Label Tricks

A few weeks ago, a colleague and I were posed an interesting customization scenario pertaining to an easily overlooked area of Sugar. Before we dive into the details of the scenario and corresponding solution, let us review some of the background.

Have you ever wondered where the abbreviations and icon colors for the various modules within your Sugar instance are defined? 

Here are a couple of examples of their use:

The abbreviations and accompanying icon color are automatically defined for each default module that is part of Sugar. Taking a closer look at the abbreviations, you will notice that there is pattern to the value, as it uses the first two letters of the corresponding module name. However, there are also exceptions, where specific letters are used to define the abbreviation, usually to avoid conflicts or more clearly define the abbreviation. 

Custom modules that are added to a given instance follow the same conventions and abbreviations and icon colors are automatically assigned to them too. But how are exceptions handled for custom modules? Or for that matter, perhaps we wish to change one of the default abbreviations or icon colors. How would we go about applying such a change?

That is the precisely the customization scenario my colleague and I needed to address. 

In reality, such changes are applied through the use of two different customizations, each of which can be applied independent of the other, if desired. More explicitly, it is possible to change the abbreviation without changing the icon color, or vice-versa. Naturally, it is also possible to apply both changes to a given module.

Let us first take a look at the manner in which the abbreviation is changed.

The text that represents the abbreviation is defined through a Language Extension defined at the application level. To modify it, create a Language Extension file with syntax similar to the following:

<?php

/* ./custom/Extension/application/Ext/Language/es_LA.lang.php */

    $app_list_strings['moduleIconList']['Meetings'] = 'Ju';

?>

The above code would change the default label for the Meetings module for the Spanish (Latin America) language pack from the default to Ju, short for Junta. As with any other Extension, executing a Quick Repair and Rebuild would apply the change to the system. 

What about changing the icon color?

Changing the icon color requires a bit of CSS work. Custom CSS can be applied by way of a file named custom.less, stored in ./custom/themes. As with Extensions, a Quick Repair and Rebuild is necessary. It may also be necessary to purge the contents of the ./cache folder to ensure the desired changes are applied. 

The syntax of the CSS that we need to make such a change would look as follows:

.label-Meetings {

                background-color: rgb(1, 2, 3);

}

Note that the name of the class follows the convention of label-<ModuleName> and the color is specified in RGB values. 

That is all it takes to change the abbreviation or icon color!