[Stanislav Khodorov]

5 years ago #13173

Hello everybody,

I am a huge fan of the Simplifier! Thank you guys for making this possible!

Hopefully you can help me with the following issue: I would like to access the single UI elements via the CSS Editor.
What is the structure? How do I turn e.g. a button into red and the font in that button into blue?
Could you provide me a sample how to access Bars, Buttons, Tables (Widgets in general)?
In the documentation I only found minor information:
https://community.simplifier.io/documentation/current-release/applications/ui-designer/css-editor/
Here the structure seems to be something like

.Button, #MyButtonsID {
color: red;
font: blue;
}

which is not working for me.

Really looking forward to your answer!
Have a nice day!

Cheers,
Stan

[Chris Bouveret Has successfully completed the online course IntroductionHas successfully completed the online course Intermediate (200)Has successfully completed the online course Advanced (300)Has successfully completed the online course Basics (100)Has successfully completed the online course Advanced (320)Has successfully completed the Intermediate CertificationHas successfully completed the Advanced Certification]

5 years ago #13174

Up

2

Down

::

Hi Stan,

thx for posting this. Generally speaking it is very straight forward. Just make sure that you pick the right ID from the generated HTML code that you want to access via CSS. See attached Screenshot of Chrome DevTools within the App Preview on how to find the generated ID of the element you want to access via CSS. Also make sure that you add a !important to your CSS Directives in order to overrule UI5 CSS directives. Simplifier AppGenerator adds some more to the ID of an Element, as you can see in the attached Screenshots.

Attachments:

You must be logged in to view attached files.

[Stanislav Khodorov]

5 years ago #13178

Up

0

Down

::

Yes! Thank you Chris!
This was exactly what I have been missing!