I’ve got a few tabs where new stuff will pop up for users and i’d like to let them know visually. Some apps show the tab name in bold, some have a number - I know there’s some stuff in this community about CSS etc but that feels beyond no code (but I’ll learn it if needs be!). any ideas?
I think you could do that with some CSS as you mentioned. Take a look here…
2 Likes
Not sure where to put the CSS? I can see rich text stuff, but that doest seem to pertain to tab names/icons
In Glide, you need to add in CSS to a Rich Text component on each screen you need to use. This then effects the other components on the entire screen 
1 Like
May you can try this. Replace {TabName} with your actual tab name
<pre><span><style>
/*Tab name*/
[id="tabBar"]> div > button[aria-label="{TabName}"] > div > div{
color: white;
text-align: center;
font-weight: 600;
font-size: 1.0rem;
}
/*Tab icon color or change icon image*/
[id="tabBar"]>div>button[aria-label="{TabName}"] svg {
color: red;
display:none;
}
button[aria-label="{TabName}"] div div[size] {
border-radius: 50%;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-image: url(https://cdn.icon-icons.com/icons2/2643/PNG/512/male_boy_person_people_avatar_icon_159358.png);
}
</style>
1 Like
Sadly the tab is a swipe list (not detail) so it gives me no option to create a rich text component
Can’t you put the rich text into the bottom part of the swipe…. I was playing with swipes yesterday. Bottom left for components, you have the swipe part at the top, then components for the card you are in below. Does that work to drop the rich text in there?
1 Like
Your Swipe word should be like “Swipe”, not “{Swipe}”.
If you want to change the color of the icon then what is needed is only as shown in the following image"
1 Like
Rich text - removes the top and tab bar - as long as there is a row that can be included in the inline list.
<pre><span><style>
[id="tabBar"]{
display: none;
}
[data-test="glide-app-bar"] :nth-child(1) {
display: none;
}
#app-root div[opacity='1'] {
color: transparent;
}
Thanks everyone, some great tips there. I’ve got to this point. I can get a red dot, it shows only when there’s new stuff - but the problem is it only shows when you’re on that tab!
Are you using visibility conditions on your CSS? I do that on my Home Screen to decide which components to make bold or give a different color.
This is the problem with it. You have to put it on every details screen possible to keep it consistent. I have just updated the Notion link to warn people about that.
1 Like
Not bad either. Now you are Columbus who discovered the mainland of America. 