CSS and its uses on components

Ask for Help
1

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?

2

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.

3

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>

4

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.

5

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

6

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

7

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.

8

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

1 Like
9

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.