# Color Big Numbers with CSS ( I have a buisness plan )

**URL:** <https://community.glideapps.com/t/color-big-numbers-with-css-i-have-a-buisness-plan/78694>\
**Category:** Ask for Help\
**Created:** [December 19, 2024, 5:10pm UTC](https://community.glideapps.com/t/color-big-numbers-with-css-i-have-a-buisness-plan/78694 "2024-12-19T17:10:31Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![greg\_maerten](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/greg_maerten/32/69512_2.png) [@greg\_maerten](https://community.glideapps.com/u/greg_maerten)\
**Post date:** [December 19, 2024, 5:10pm UTC](https://community.glideapps.com/t/color-big-numbers-with-css-i-have-a-buisness-plan/78694/1 "2024-12-19T17:10:31Z")

</div>

Hello, I have a business plan, and I would like to display large numbers on a colored background! Is it possible? Thank you.

---

<div class="post-metadata">

**Author:** ![MaximeBaker](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/maximebaker/32/80877_2.png) [@MaximeBaker](https://community.glideapps.com/u/MaximeBaker)\
**Post date:** [December 19, 2024, 8:11pm UTC](https://community.glideapps.com/t/color-big-numbers-with-css-i-have-a-buisness-plan/78694/2 "2024-12-19T20:11:23Z")

</div>

Is this what you want?

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/4/d/4d4fbb310ecd86c18b033b7389137d61b86fd945.png)

---

<div class="post-metadata">

**Author:** ![MaximeBaker](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/maximebaker/32/80877_2.png) [@MaximeBaker](https://community.glideapps.com/u/MaximeBaker)\
**Post date:** [December 19, 2024, 8:13pm UTC](https://community.glideapps.com/t/color-big-numbers-with-css-i-have-a-buisness-plan/78694/3 "2024-12-19T20:13:26Z")

</div>

You just need to create a custom css class with the background color you want e.g.,

```css
.background-blue{
background:blue;
}

```

And on the big number itself:

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/3/23405fead05b1fe263c229723f0c8d6a3023f8f6.png)

---

<div class="post-metadata">

**Author:** ![greg\_maerten](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/greg_maerten/32/69512_2.png) [@greg\_maerten](https://community.glideapps.com/u/greg_maerten)\
**Post date:** [December 20, 2024, 7:25am UTC](https://community.glideapps.com/t/color-big-numbers-with-css-i-have-a-buisness-plan/78694/4 "2024-12-20T07:25:39Z")

</div>

How can you do that ?

 ![css 2](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/d/cd94f132249b686da0e8bd00e6b9b218d725ea9c.jpeg)  
 ![css](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/5/657e547dcb968c388a488aaa302a867bd16fd226.jpeg)  
tkx

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [December 20, 2024, 7:41am UTC](https://community.glideapps.com/t/color-big-numbers-with-css-i-have-a-buisness-plan/78694/5 "2024-12-20T07:41:06Z")

</div>

Look for “CSS Class” under Options.  
This is only available if you are on a paid plan.

> **[Custom CSS | Glide Docs](https://www.glideapps.com/docs/reference/user-experience/css-for-apps)**
>
> Customize the way your app looks with CSS.

---

<div class="post-metadata">

**Author:** ![greg\_maerten](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/greg_maerten/32/69512_2.png) [@greg\_maerten](https://community.glideapps.com/u/greg_maerten)\
**Post date:** [December 20, 2024, 9:06am UTC](https://community.glideapps.com/t/color-big-numbers-with-css-i-have-a-buisness-plan/78694/6 "2024-12-20T09:06:19Z")

</div>

Maxime baker yes i need it please ! How can you do that ? tkx for your answer

---

<div class="post-metadata">

**Author:** ![MaximeBaker](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/maximebaker/32/80877_2.png) [@MaximeBaker](https://community.glideapps.com/u/MaximeBaker)\
**Post date:** [December 20, 2024, 11:26am UTC](https://community.glideapps.com/t/color-big-numbers-with-css-i-have-a-buisness-plan/78694/7 "2024-12-20T11:26:32Z")

</div>

You mean how to add CSS?

> [@Color Big Numbers with CSS ( I have a buisness plan )](https://community.glideapps.com/t/color-big-numbers-with-css-i-have-a-buisness-plan/78694/5):
>
> Look for “CSS Class” under Options. This is only available if you are on a paid plan.

---

<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 20, 2024, 12:48pm UTC](https://community.glideapps.com/t/color-big-numbers-with-css-i-have-a-buisness-plan/78694/8 "2024-12-20T12:48:57Z")

</div>

You are trying to put full css in a spot where you are only supposed to put a CSS class name. ‘CSS Class’ should only contain a name given to the component. ‘Custom CSS’ in settings is where you place the actual CSS.

---

<div class="post-metadata">

**Author:** ![MaximeBaker](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/maximebaker/32/80877_2.png) [@MaximeBaker](https://community.glideapps.com/u/MaximeBaker)\
**Post date:** [December 20, 2024, 1:11pm UTC](https://community.glideapps.com/t/color-big-numbers-with-css-i-have-a-buisness-plan/78694/9 "2024-12-20T13:11:10Z")

</div>

Wow, I didn’t even notice it on his screenshot 😂 😂

---

<div class="post-metadata">

**Author:** ![greg\_maerten](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/greg_maerten/32/69512_2.png) [@greg\_maerten](https://community.glideapps.com/u/greg_maerten)\
**Post date:** [December 20, 2024, 2:06pm UTC](https://community.glideapps.com/t/color-big-numbers-with-css-i-have-a-buisness-plan/78694/10 "2024-12-20T14:06:04Z")

</div>

Yes i have got it tkx ! but i can’t write in other color ! can you explain me please. I m sorry it is very difficult for me i m french and i m using glide in english lol  
TKX for help me

 ![css](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/d/ad00e3c3f1d2ec8185c04c1b16ea40ecf1fe005b.jpeg)  
 ![css 2](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/4/b/4b9b29cd2132092d63d0dbc358852e1668d592bf.jpeg)

---

<div class="post-metadata">

**Author:** ![MaximeBaker](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/maximebaker/32/80877_2.png) [@MaximeBaker](https://community.glideapps.com/u/MaximeBaker)\
**Post date:** [December 20, 2024, 2:07pm UTC](https://community.glideapps.com/t/color-big-numbers-with-css-i-have-a-buisness-plan/78694/11 "2024-12-20T14:07:19Z")

</div>

Le français est aussi ma langue natale 🙂  
Cela me fait plaisir!

---

<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 20, 2024, 3:22pm UTC](https://community.glideapps.com/t/color-big-numbers-with-css-i-have-a-buisness-plan/78694/12 "2024-12-20T15:22:51Z")

</div>

I’m not sure I understand what you mean. I see you already have multiple colors. What else are you trying to do?

---

<div class="post-metadata">

**Author:** ![greg\_maerten](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/greg_maerten/32/69512_2.png) [@greg\_maerten](https://community.glideapps.com/u/greg_maerten)\
**Post date:** [December 20, 2024, 8:01pm UTC](https://community.glideapps.com/t/color-big-numbers-with-css-i-have-a-buisness-plan/78694/13 "2024-12-20T20:01:47Z")

</div>

i m using 3 colors : green orange red for the big number as the view ! green it is oki orange not to bad but you can do it to go green et red is bad ! no pain no gain !  
but i want to write in white in big number when background is in color and i don’t know how !

---

<div class="post-metadata">

**Author:** ![greg\_maerten](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/greg_maerten/32/69512_2.png) [@greg\_maerten](https://community.glideapps.com/u/greg_maerten)\
**Post date:** [December 20, 2024, 8:02pm UTC](https://community.glideapps.com/t/color-big-numbers-with-css-i-have-a-buisness-plan/78694/14 "2024-12-20T20:02:33Z")

</div>

et pourriez vous m aider a ecrire en blanc les grands nombres grace a vous j’ai deja reussi a colorier les fonds !

---

<div class="post-metadata">

**Author:** ![MaximeBaker](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/maximebaker/32/80877_2.png) [@MaximeBaker](https://community.glideapps.com/u/MaximeBaker)\
**Post date:** [December 20, 2024, 8:03pm UTC](https://community.glideapps.com/t/color-big-numbers-with-css-i-have-a-buisness-plan/78694/15 "2024-12-20T20:03:01Z")

</div>

```css
color: white !important;

```

---

<div class="post-metadata">

**Author:** ![greg\_maerten](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/greg_maerten/32/69512_2.png) [@greg\_maerten](https://community.glideapps.com/u/greg_maerten)\
**Post date:** [December 20, 2024, 8:03pm UTC](https://community.glideapps.com/t/color-big-numbers-with-css-i-have-a-buisness-plan/78694/16 "2024-12-20T20:03:56Z")

</div>

mais ou dans le code ? c’est la ma difficulté ! et peut on mettre les 3 grand nombre sur le meme ligne ?

---

<div class="post-metadata">

**Author:** ![MaximeBaker](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/maximebaker/32/80877_2.png) [@MaximeBaker](https://community.glideapps.com/u/MaximeBaker)\
**Post date:** [December 20, 2024, 8:05pm UTC](https://community.glideapps.com/t/color-big-numbers-with-css-i-have-a-buisness-plan/78694/17 "2024-12-20T20:05:06Z")

</div>

Vous pourriez le mettre dans la même classe que le background vert si vous le désirez :

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/0/706a96f6589b02a6da60d626a1ddf562aaef6389.jpeg)

---

<div class="post-metadata">

**Author:** ![greg\_maerten](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/greg_maerten/32/69512_2.png) [@greg\_maerten](https://community.glideapps.com/u/greg_maerten)\
**Post date:** [December 20, 2024, 8:13pm UTC](https://community.glideapps.com/t/color-big-numbers-with-css-i-have-a-buisness-plan/78694/18 "2024-12-20T20:13:27Z")

</div>

j’ai essayé y a rien qui veut je n’y arrive pas

---

<div class="post-metadata">

**Author:** ![MaximeBaker](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/maximebaker/32/80877_2.png) [@MaximeBaker](https://community.glideapps.com/u/MaximeBaker)\
**Post date:** [December 20, 2024, 8:14pm UTC](https://community.glideapps.com/t/color-big-numbers-with-css-i-have-a-buisness-plan/78694/19 "2024-12-20T20:14:09Z")

</div>

Pouvez-vous me montrer ce que vous avez fait svp?

---

<div class="post-metadata">

**Author:** ![greg\_maerten](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/greg_maerten/32/69512_2.png) [@greg\_maerten](https://community.glideapps.com/u/greg_maerten)\
**Post date:** [December 20, 2024, 8:15pm UTC](https://community.glideapps.com/t/color-big-numbers-with-css-i-have-a-buisness-plan/78694/20 "2024-12-20T20:15:42Z")

</div>

![css](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/0/70cf9ccda4f4db3937a983aa8f0c2fbdd49914fd.jpeg)

[Next page](https://community.glideapps.com/t/color-big-numbers-with-css-i-have-a-buisness-plan/78694.md?page=2)