How can you modify HTML "Style" elements applied to Creatio pages OOTB?
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
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:
- Create a new module, choose LESS in the left panel, and add the CSS rules.
- 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:
- 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?
- 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:
- height: calc(100% - 40px)
- 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…