# CSS and its uses on components

**URL:** <https://community.glideapps.com/t/css-and-its-uses-on-components/68824>\
**Category:** Ask for Help\
**Created:** [December 18, 2023, 7:23pm UTC](https://community.glideapps.com/t/css-and-its-uses-on-components/68824 "2023-12-18T19:23:25Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![MattGlides](https://avatars.discourse-cdn.com/v4/letter/m/53a042/32.png) [@MattGlides](https://community.glideapps.com/u/MattGlides)\
**Post date:** [December 18, 2023, 7:23pm UTC](https://community.glideapps.com/t/css-and-its-uses-on-components/68824/1 "2023-12-18T19:23:25Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [December 18, 2023, 11:58pm UTC](https://community.glideapps.com/t/css-and-its-uses-on-components/68824/2 "2023-12-18T23:58:03Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [December 19, 2023, 1:16am UTC](https://community.glideapps.com/t/css-and-its-uses-on-components/68824/3 "2023-12-19T01:16:55Z")

</div>

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>`

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [December 19, 2023, 1:25am UTC](https://community.glideapps.com/t/css-and-its-uses-on-components/68824/4 "2023-12-19T01:25:26Z")

</div>

> [@Himaladin](#):
>
> Can this apply to one component in particular or to the same type of component as a whole?

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.

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [December 19, 2023, 1:36am UTC](https://community.glideapps.com/t/css-and-its-uses-on-components/68824/5 "2023-12-19T01:36:57Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [December 19, 2023, 2:41am UTC](https://community.glideapps.com/t/css-and-its-uses-on-components/68824/6 "2023-12-19T02:41:36Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [December 19, 2023, 2:59am UTC](https://community.glideapps.com/t/css-and-its-uses-on-components/68824/7 "2023-12-19T02:59:47Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [December 19, 2023, 4:39am UTC](https://community.glideapps.com/t/css-and-its-uses-on-components/68824/8 "2023-12-19T04:39:26Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [December 19, 2023, 4:50am UTC](https://community.glideapps.com/t/css-and-its-uses-on-components/68824/9 "2023-12-19T04:50:58Z")

</div>

~~The following CSS worked, unfortunately all webviews are affected:~~

~~

```auto
.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.