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

et je rajout : color: white;
j’ai essayé
.background-green{color: white;background: green;margin-left: auto;
margin-right: auto;}
ou
.background-green{background: green;margin-left: auto;
margin-right: auto;color: white}

mais aucun des deux ne focntionnent

Faites une classe qui regroupe les propriétés que vous voulez mettre sur le big numbers :

.mon-big-number {
 color: white !important;
 background-color: blue;
}

Utilisez cette classe dans le big numbers.

Si cela ne fonctionne pas, essaie ça :

.mon-big-number {
 background-color: blue;
}

.mon-big-number * {
 color: white !important;
}
2 Likes

merci super le 2eme fonctionne ! un grand merci et peut on mettre les 3 bigs numbers sur la meme ligne ?

Est-ce dans une collection? Si oui, vous pouvez facilement choisir le style pour que celui-ci prenne toute la taille horizontal (width). Sinon, un peu de CSS comme par exemple un display flex et le tour est joué!
Dites moi si vous avez besoin d’aide supplémentaire!

j’ai essayé mais je n’arrive pas a centrer les big number ! j’ai juste reussi a centrer le titre ou a colorier le fond de la card des big numbers ! j’ai essaye en utilisant l IA ! avec ce genre de code :slight_smile:
/* Conteneur principal pour les Big Numbers /
.big-numbers-container {
display: flex; /
Active Flexbox /
justify-content: flex-start; /
Aligne les Big Numbers à gauche /
align-items: center; /
Centre verticalement les Big Numbers /
gap: 0; /
Supprime tout espace entre les Big Numbers /
overflow: hidden; /
Empêche tout débordement */
}

/* Big Numbers /
.big-numbers-container > div {
flex: 1; /
Les Big Numbers prennent une taille égale /
margin: 0; /
Supprime toute marge /
padding: 0; /
Supprime tout padding interne /
text-align: center; /
Centre le texte dans chaque Big Number /
font-size: 18px; /
Taille de la police adaptée à un écran de téléphone /
font-weight: bold; /
Texte en gras /
color: white; /
Texte blanc /
background-color: transparent; /
Fond transparent */
}

Sur le big number, essaie d’ajouter :
margin-left: auto;
margin-right: auto;

Ajoute ! important si cela ne fonctionne pas.

At this point it might be easier to consider some different alternatives to get what you want.

If you are familiar with HTML you can use it to design you want and display it using a Rich Text component. You can dynamically build the HTML using a Template column.

I would also consider using the Custom AI component and simply ask the AI to build a component the way you want it.

2 Likes

I second this. I used AI to create a bubble graph that change colors based on the dates of actions (e.g. if a meeting was canceled the green meeting bubble would turn to red)

Very iterative.

1 Like

:point_up_2:
For anyone who’s not comfortable with HTML and CSS (i.e. me), I would always start with the custom AI component.

@Robert_Petitto used the custom AI component to recreate a dashboard of big numbers with various colors

1 Like

Actually - Bob created Big Numbers with actions!

Something which @david and his team should implement immediately since Big Numbers are almost always a roll-up of a list/report and users often want to see the underlying data.

#AllIWantForChristmas

1 Like

bonsoir j 'ai essayé mais cela ne fonctionne pas

J’ai rapidement suivi cette discussion et je vois que vous avez tenté la voie du CSS. Si j’étais vous, j’essayerais autrement avec le composant custom AI.

bonsoir et enchanté si je ne m’abuse il me semble que vous avez fait des vidéos YouTube au début de glide ! j’ai suivi vos tutos et j’ai appris à construire et à développer mes applications grâces à vous ! je profite de cette occasion pour vous remercier. D’ailleurs sans vouloir abuser j’aimerai bien avoir votre avis sur mes applications si jamais cela vous dit.
Quand à votre idée je vais tester (après les fêtes) ! En tout état de cause je vous remercie de m’aider et reviendrez vers vous pour vous donner des nouvelles de mes tests !

1 Like

C’était un test, mes toutes premières vidéos, j’ai eu un peu honte du résultat, mais le plaisir est pour moi si les vidéos ont pu vous aider.

Avec plaisir ! Faites-moi signe quand vous êtes disponible et on s’organisera une visio pour faire connaissance et regarder ces apps :slight_smile:

je vous propose après les fêtes si cela vous convient !
et n’ayez pas honte ! c’est un peu grâce à vous si j’ai compris les bases du no code sur glide. Vous avez su expliquer et rendre simple quelques choses qui est complexe quand on part de zéro voir de très loin.

1 Like

Bonnes fêtes et on continue la discussion bientôt alors.