Applying Global CSS Styles in Creatio

There are times you might want to add CSS styles to the entire Creatio application. I wrote an article previously about how to add CSS styles to Creatio where I outlined how to add CSS to a specific page. In that article I mentioned, towards the end, that if you want to add CSS globally, to all of the Creatio application, you can add the CSS to BootstrapModulesV2. The BootstrapModulesV2 get’s loaded for the entire application so adding the CSS to this will load the CSS no matter which page you’re viewing. Let’s walk through how to do this.

The first step is to create the module containing the CSS. To do this, create a new module, then add your CSS to the LESS tab. Refer to the previous article on the steps for this. Let’s say we’ve named our CSS module UsrCustomCSS.

Now, to add that to the BootstrapModulesV2. To do this, create a new “Replacing view model” (Or if you’re on a version prior to 7.17 the menu option will read “Replacing client module”). Select BootstrapModulesV2 as a parent, then paste in the following code:

define("BootstrapModulesV2", ["css!UsrCustomCSS"], function() {
	return {};
});

Now, the CSS styles defined in your UsrCustomCSS will be applied to the entire Creatio application.

Other CSS Related Articles for Creatio

• Adding Custom CSS Style Sheets in Creatio
• Applying Global CSS Styles in the Creatio Portal (note, applies to self-service, customer, or partner portals)

Warning Regarding Overriding BootstrapModulesV2

There is a warning to consider here. A pretty large one. There can only be one active override of BootstrapModulesV2 in the system. If you override it, other overrides will no longer be “active” – assuming your package is the lowest on the dependency hierarchy. Only the override of BootstrapModulesV2 in the lowest in the package hierarchy will be active. So, the best approach is to search your system for any other version of a BootstrapModulesV2 schema and then add/merge in the modules loaded in that one into yours as well. In some implementations, the Playbook feature in Creatio, as well as the map dashboard widget in the marketplace, uses a BootstrapModulesV2 override, so in order for that to work you’d need to merge the code from that override into yours.