Hello Harvey,

The style HTML tag (inside the head tag) usually contains CSS rules, which are crucial for the init page rendering, or the most general CSS rules. These rules could be overridden in a common way:

1. Create a new module, choose LESS in the left panel, and add the CSS rules.
2. Add the name of this module to the dependencies in the Page client module, starting with the prefix “css!”

Here is an additional example - https://community.creatio.com/questions/how-can-i-hide-task-properties-pre-config-page .

Best regards,

Natalia

Hi Natalia,

Unfortunately this doesn't seem to be working for me for 2 reasons:

1. The style in the CSS is not taking precedent over the OOTB style that is included in the style element in the DOM. Does Creatio have any way of overriding the OOTB elements' styles without resorting to using !important everywhere?
2. The client module seems to be "compiling" my code and modifying it from what I wrote (first line after this) into what appears in the browser sources (second line after this point) and these are completely different - Creatio cannot take 40 pixels off 100% height and conclude that it's always going to be 60% height:
   1. height: calc(100% - 40px)
   2. height: calc(60%)

Do you know of any resolution to these issues?

Hi Harvey

 

You can use this addon to apply CSS styles globally: https://marketplace.creatio.com/app/experceo-global-jscss-editor-creatio

If you can identify the selector, you can easily override the CSS properties values using !important keyword.

I hope this helps!

Mohamed Ouederni,

Thanks Mohamed, generally we're trying to keep add-ons to a minimum unless strictly necessary to avoid too many dependencies and potential points of failure, but worth knowing.

Using Natalia's recommendation, I was able to apply the CSS - for any others having this issue, the resolution to my first issue was just to set the style as being important, though another resolution might be to make the selector more specific (CSS specificity) than the ones acting upon it. And the resolution to my second issue was that it's a LESS CSS issue rather than Creatio's issue, but it can be worked around using the following escaping of the calculation:

height: calc(~"100% - 40px")

Which I found from this Stack Overflow question: https://stackoverflow.com/questions/11972084/how-to-prevent-less-from-t…

Hello,

to add colors to the value, if you know which div it is exactly, you can use the class or id of that div in the selector instead of ".label-wrap .t-label" as in step 1 of the example. Or you can look up the class or id by using inspector tool (Ctrl+shift+C) in the developer tools (f12) on your page and then use them in the selector. 

If you require more assistance please provide screenshots of div you want to color, would provide more clarity how to change the selector accordingly.

is there any updates on this?

Hello Sarika!

With CSS you can change the color by choosing the right selector. Example, where 2a879ccc-536d-45a9-980a-9ac0a00aea91 - id of value:

li[data-value="2a879ccc-536d-45a9-980a-9ac0a00aea91"] 
{
background-color: brown;
}

I would recommend you to use the new FreedomUI pages on the site. You can change bg-color in the system settings on the FreedomUI page (on your screen shot I can see Classic UI). It will take 10 min maximum.

To change colors with FreedomUI :

1) Open System designer -> Advanced settings

2) Find the Custom Object CasePriority or create a replacement:

3) Add the new column -> Other -> Color:

4) Add Title to the new Color column on the same page

5) Click on the Name of this object and choose value (Title name from p.4) in Color field:

6) Publish this object

7) Open System Designer -> Lookups -> Case priorities -> View -> Select fields to display:

8)Add HEX color code to the new column:

9) FreedomUI page will looks like:

Hello,

Please check this Community post as it has just the same question and resolution.

Best regards,

Bogdan S.

Hi Ramnath.

You can change the font size by adding a custom css style to the schema you need and in such a way override the system font-size. Please refer to this article on our community: https://community.bpmonline.com/questions/how-add-custom-style-control-page-based-condition

I recommend you change a font-size first for any page in the system to check if it looks fine as we do not guarantee that all objects, labels, and containers will be displayed correctly. 



Thank you.

Bohdan Zdor,

I have tried this before but I could only make it work on the page of arecord. I need to edit the page where all the records are shown. I could not find the module which has the code for the list of records.

Ramnath

RAMNATH SHARMA,

Unfortunately, there is no option to change the section list font size in the current version of the system. I have registered your suggestion, though. It was passed to our R&D team to be considered for further releases.

Thank you. 

Hi Muhammad,



You would need to create a custom Grid controller for your section. First up, you can generate controller code just like it is described here, specifying pageType: Terrasoft.PageTypes.Grid and selecting your section name. Then you should add a dependency to your grid in the manifest. You can use InvoiceMobile package as an example: https://prnt.sc/rpypgw - grid, and manifest - https://prnt.sc/rpyq0a.



Then, in the Terrasoft.view.BaseGridPage.View there is an object that is responsible for filter panel. This object has a function to show and hide: https://prnt.sc/rpyqsr. So in your grid view you would be able to get the filterpanel and then use function to hide it:



let filterPanel = this.getFilterPanel();

filterPanel.hide();



Regards,

Dmytro

The article by the link below describes how to add custom css to a mobile application:

https://community.creatio.com/articles/adding-custom-css-mobile-application

Please find the correct selector for the element you want to apply the custom css to. For example, it's possible to change the background color for the records in the Case section using selector

$("div[class='ts-list-subtitle-column']").css("background-color", "yellow");

Unfortunately, there is no exact css class that can be changed in order to apply background to all screens of application.

Please use developers tools in browser to find the correct selectors for all elements you want to change the background and apply custom css to them - https://prnt.sc/rhubwz