I've noticed there are a lot of HTML Style elements added to the Creatio pages' DOM, and I was wondering what generates and sends these to the browser so that some of them can be modified. This appears to be different from the normal CSS Linking that happens in Creatio, so I presume there must be some different method for overriding them. See below for an example of one of the style elements I want to modify:

Like 1

Like

4 comments

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…

Show all comments

Hi Team,

 

I'm looking for a solution where i can apply colors to the Field values (not labels) using CSS on a conditional basis. I followed the article https://community.creatio.com/questions/conditional-formatting-field-ed… but it applies color on the label of the field, not the value div.

 

Kindly help.

Best Regards,

Sarika

Like 0

Like

4 comments

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:

 

 

 

Show all comments

Hey community !

 

I'm using Creatio v7.17.3.1377.

 

I wanted to create a custom CSS for my contact page and I ran into an issue. On the french version on Creatio (fr-FR). So I went to advanced settings -> custom -> add -> module -> LESS and my LESS code isn't recognized :

 

Although on the English translation everything works fine :

 

Here are the steps to reproduce the bug :

1. Install the French translation in the system settings -> languages

2. Change your language to French in your profile (You will have to log out and log in for the language to be applied)

3. Click on "Paramètres avancés" (advanced settings) after clicking on the wheel under your profile.

4. Click on "Custom" -> "Ajouter" -> Module

 

5. Click on "MOINS" (French translation for LESS) and try typing some LESS code (the code shown here is just an example)

 

That's it !

 

Best regards,

 

Julien Gunther

1 comments

Hello,

 

This is out of the box bug that was fixed. Feel free to approach the support team via support@creatio.com for the details on how to resolve it.

 

Regards,

Dean 

Show all comments

Hi Team,

 

I need to add dollar symbol in a decimal field . Is there a way to do it ? I have some reference attached 

 

Regards,

Sethuraghav N

 

Like 0

Like

1 comments

Hello,

 

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

 

Best regards,

Bogdan S.

Show all comments

How can I get bigger font for name in custom section.

Here is the pic of Contact section (in-buily) with Name shown in big fonts in tile view.

Now I have built my custom Contact section but with few changes. It is not replaced or inherited with actual Contact section.

Now in the section after removing caption of the field the font size of name is still small.

 

How can I get bigger font like in in-built/out of the box contact Section.

I want to apply it to other sections also. So there is no point to use out of the box Contact section by replacing object which already has big fonts.

Like 0

Like

3 comments

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. 

Show all comments

Hi Community,

 

By default the search field showing like below, I need to hide it on first load and once I click on icon the search field should appear

 

 

Any help will be highly appreciable.

 

Regards

Like 0

Like

1 comments

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

Show all comments

Hi Community,

 

I able to change css dynamically for section list view on CRM (browser). This article I followed.

 

Question: How to change css dynamically for a section list view column on mobile interface? There is no documentation exist. I need to change background color of case status on mobile list view on the basis of its value

 

Any help will be highly appreciable.

 

Regards

Like 0

Like

1 comments

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");

 

 

 

 

 

Show all comments

Hi,

I able to apply custom css, I need to know the exact css class of Creatio. which I should change. I tried it on class "body" but below issues occurs

1. on header of all screens its not showing.
2. overlapping with list views.
3. on detail/edit views its not showing.

 

Any help will be highly appreciable.

 

Regards

Like 0

Like

1 comments

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

Show all comments