Adding Custom CSS Style Sheets to a Page in Creatio

Adding custom style sheets in Creatio 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.

Note: This article has been updated for Freedom UI and classic pages

Adding CSS to a Page – Steps Overview

1. Create a module, add CSS to the “LESS” tab
2. Add the module to the page as CSS by adding “css!UsrMyModuleName” in the square brackets at the top of the code

Step 1: Creating the Custom CSS Style Sheet Module

The first step we’ll need to do is to create the CSS sheet – this step is the same whether you’re adding CSS to a Freedom UI page or a classic page. In Creatio, there’s a couple of things to know about this. First of all, Creatio 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 left side 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:

For the Freedom UI Opportunity page:

Or for the classic Opportunity page the CSS is a bit different:

Now save the module and close it.

Step 2: 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 Opportunities_FormPage (if using Freedom UI) or OpportunityPageV2 (if using classic). 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:

It basically the same for adding to classic pages as well

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 the page code and refresh the client. It should look like this for Freedom UI opportunities:

Or for classic opportunities:

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, 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)