TAG overlay colors

Hello everyone,
I am desperate to find a way to have different colors for tag overlay.
Indeed I have quite finished a personnal Wine Cellar and I use the tag overlay to show the stock But I would like to make it red, yellow, pink regarding the type of wine.
I think it could be possible with CSS but :

  • I have no idea of the code
  • I don’t know how to use a CSS code in Glide

Thank you very much if you can help me :slight_smile:
Cheers from France,
Lionel

2 Likes

Have you considered a colored emoji that can be part of your tag text? Something like this?

6 Likes

Yes, and if he uses caption / avatar text instead of tags to show those colored emoticons, it would be more flexible too, if he’s ok with the position (bottom left/right)
Cool icon for the foxtrot dancers, BTW :ok_hand:

2 Likes

Lionel, as your tab is already filtered by wine color, wouldn’t it be simpler for the user to see a full background in shades of red, gold or pink, instead of repeating tags: redundant?
Ce ne serait pas + simple, Lionel et facile à piger pour ton client 1 fond nuance rouge, doré ou rosé, au lieu de répéter ces étiquettes ? Répéter = moins lisible.
Et 1 fond plutôt neutre pour ton app (noir, vert foncé, couleurs des bouteilles) que rouge, puisque tu vends différents types de vins.

1 Like

@L.M En effet ce serait probablement la meilleure solution. La plus épurée.
Par contre je n’ai aucune idée de comment la réaliser. Incapable de trouver les options les permettant sur l’interface Glide :confused:
Pour info, cette app est vraiment destinée à mon usage personnel. Même si je pourrais en faire profiter famille et amis selon son évolution et pourquoi pas même vendre le template…
D’autre part, je n’abandonne pas l’idée du TAG coloré en parallèle car au-delà de mes 4 tabs principales (rouges/blancs/rosés/bulles), j’ai une tab cachée “Historique” dans laquelle viennent s’afficher toutes les bouteilles dont le stock = 0
Même si l’affichage est rangé par catégorie et qu’il est possible de filtrer/trier, ici le TAG reprennant les couleurs des différentes tabs pourraient être intéressant :slight_smile:
Merci encore,
Lionel

1 Like

If you want to go down the rabbit hole of trying to accomplish different tag colors using CSS, it might be possible, but I’ll warn you that it’s not easy. I’ve included a couple of threads below.

As for using emoji…it is the same as text, so you can copy, paste, or type it in any text box. I use IF columns to select different color emoji and text depending on different conditions. Then I just point the tag to that IF column.

You can also use different images chosen from an IF column as an image source for a tile or card list, or for the avatar.

There are a lot of ways to do it, but for simplicity, I think I would use emoji or images instead of CSS in this case.

5 Likes

I wouldn’t do it myself, it’s a lot of hassle for a thing that would not work well (I did try this before).

If Lionel does not want to use emojis then best option is to design images of tags in advance, use it as the card avatar, and extend its width using CSS.

Here’s a recent example, where I used Cloudinary to generate “tags” and use it on a card.

3 Likes

I continue in English so that you can get better help.
Ok, I guessed you had other plans for coloring tag: but for now, Experts here recommend you to let go= too much work and / or not reliable. I’m sure with some luck, Glide could even enable it natively. Just wait & see.
For your other wine stock hidden tab, I think ThinhDinh’s idea can please you: if you have fixed tabs and text, you’d better create images to label them (avatar icons in layout) et voilà !

Sinon, I think that emoticons with just colored pastilles is not only easy to do but suits exactly what you can see in wine reviews each season that select & rank best wines : they use pastilles too, so people can easily spot them. As captions / légendes.

If I sum up: Lionel has all colors of wine and is displaying a subset of each: red (Claret), white, pink & sparkling
I suggest he could change the app color for a neutral bottle color (black or bottle green) and colorize the background for each subset.

For ex
Shades of red for Red wine
Shades of gold/yellowish for white wine
Shades of pink
Tiens 1 background de bulles :clinking_glasses:pour les mousseux bubbles for sparkling wine? just an idea. And it’s trendy.

Is it better / easier to colorize the background of the cards, the screen, anything else? What’s the simplest way?

Thks for Lionel and anything you can think of to distinguish the subsets more visually, globally and that he can maintain.

It’s for his private use, for now. But he may wish to sell the template later on.

L’idée de business serait bcp + intéressante si les gens pouvaient photographier 1 vin, son étiquette recto, verso et le soumettre dans l’App pour classement (mettre en cave, a consommer, etc)

The idea of 4 backgrounds colorized (red, gold, pink and bubbled) is great. I think I like it a lot.
But really can’t figure how to do that…
I hear what you think L.M
The app is not only this screen.
The Red is the default tab (so we don’t especially need a neutral color).
Home Screen


Then the detail screen shows some infos (some directly editable some other no)
You can upload/edit the pic too. And there is a comment zone at the bottom too…

And then you have the edition screen (similar to the add screen of the front page)

The app is really cool right now (I would just like the pics size to be lighter by default but I don’t think that’s possible)…
The only I would like to improve is the background tabs you are talking about. And maybe the images tags solution for the history page
Cheers and thank you all for your ideas :slight_smile:
Lionel