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 MainHeaderSchema. The MainHeaderSchema 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 MainHeaderSchema. 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 MainHeaderSchema as a parent, then paste in the following code:
define("MainHeaderSchema", ["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
Hi Ryan , Can you give some guidance on how can I use this to change global css style for freedom ui .
Hello Pranshu,
First of all, I’ve updated the article. Using the MainHeaderSchema is a far better approach than using the BootstrapModuleV2. I modified the article with this. Second of all, this approach should work fine for Freedom shell as well since the MainHeaderSchema is still loaded.
Ryan
can you please help me how to modify CSS for hiding system designer form left panel in 8.1.4 version or any other better approach to hide
Easiest approach is to use the inspector in Chrome dev tools to determine what you need to add. You can also try the community forums for more help with that as well.
Ryan