CSS and its uses on components

I noticed in a hint compotent there is an option for CSS class, however when I input CSS (generated by GPT, still new to this) it doesn’t change the color of the hint text. Is there something specific or special that I am missing to change the color of the hint component?

You have to be on Business/Enterprise for it to work.

The “CSS” part on each component is purely for setting its class name.

The true CSS should be put it Settings > Appearance > Custom CSS.

Can this apply to one component in particular or to the same type of component as a whole?
Can you give an example for one webview element component with the following URL:

<iframe src="https://free.timeanddate.com/countdown/i87dhok9/n108/cf12/cm0/cu4/ct1/cs1/ca0/co0/cr0/ss0/cacffffd6/cpc323232/pct/tcfff/fs100/szw448 /szh189/iso2023-12-15T12:47:00Z/pl16/pb0" allowtransparency="true" frameborder="0" width="154" height="28"></iframe>

If you want it to apply to the same type of component, just target a general class name of that component. If you want one component in particular, name it and target the CSS based on that name.

“Can you provide an example of one specific webview component with the above-mentioned URL?”

I’m not sure how it relates here? How do you want to alter that component?

Yes, I want the countdown numbers in this webview component to be positioned in the center horizontally and have a specific height that fits well.

That’s something that has to be dealt with on the website you are embedding. Not on the web embed component itself.

1 Like

The following CSS worked, unfortunately all webviews are affected:

.fEpkoR.size-small, .fEpkoR.fill, .fEpkoR.size-full {
    height: 30px !important;
    min-height: 30px !important;

.fEpkoR {
    border-radius: 0.25rem;
    width: 154px;
    margin:0 auto;

Never mind, I worked around it by applying it in a container. Thank you.