Adding Custom CSS Style Sheets in Creatio (formerly bpm’online)

Adding custom style sheets in bpm’online is a very easy task. You can add custom style sheets to specific pages or sections, or even globally to the entire application. In this article we will look at adding a custom style sheet to the Opportunity page. For this example, we’ll just apply a simple style to display the Amount field in a light green color.

Creating the Custom CSS Style Sheet

The first step we’ll need to do is to create the CSS sheet. In bpm’online, there’s a couple of things to know about this. First of all, bpm’online uses lesscss for style sheets. If you’re not familiar with less, that’s ok. You can add just standard CSS to less files just fine. I would suggest taking a look at the lesscss documentation, it allows for creating variables, nesting, functions, etc in your CSS. Class nesting is one of the best parts of less, this alone is youth your time to learn it. If you’d like an easy way to see how your CSS looks as less, you can give this converter a try. However, as I mentioned, you can just proceed as if it were just CSS and all is fine if you don’t want to use any of the .less features. Second, you’ll create a module for your CSS. You don’t need any code in the module, but that is the type of schema you’ll add in your configuration for your CSS.

In your package, create a new Module

In your module, first give it a name. I always use the name of the schema I’ll be adding it to, followed by CSS, in this case OpportunityPageCSS (or course, prefixed with the defined prefix for my system, UsrOpportunityPageCSS).

Now, there’s no need to add any code to this module, instead, look at the top and you’ll find a tab captioned “LESS”. This is where we’ll put our CSS. Select that tab and paste in the following CSS:

Now save the module and close it.

Adding the Custom CSS Style Sheet to a Page

Our next step is to add the CSS we created to the opportunity page. To do this, locate and open your OpportunityPageV2. If you do not yet have a replacing schema for the opportunity page, the easiest way to create this is to open the page wizard for the opportunity page, then save. We’ll need to add “css!UsrOpportunityPageCSS” to our module imports. Notice it is our CSS schema name, prefixed with “css!”. It will look like this:

One thing to be careful of here, if there are other imports that correspond to objects in the “function()” list, the orders of those cannot change (they need to stay in the same order to match up the imported module with the object). If there are other things in that list, it’s safest to just add your “css!UsrOpportunityPageCSS” to the end of the list.

That is all, now just save your OpportunityPageV2 and refresh the client. It should look like this:

In a future article, I will outline how to conditionally add CSS classes to elements, so we can do things like only show the amount in green if it exceeds a certain value.

Note, if you want to apply CSS globally to the entire application, you can create a replacing module for BootstrapModulesV2 and add your CSS there. See this article for details.

Other CSS Related Articles for Creatio

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