# 'new stuff to look at!'

**URL:** <https://community.glideapps.com/t/new-stuff-to-look-at/36218>\
**Category:** Ask for Help\
**Created:** [December 22, 2021, 5:35am UTC](https://community.glideapps.com/t/new-stuff-to-look-at/36218 "2021-12-22T05:35:49Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![Rollo\_Wenlock](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/rollo_wenlock/32/26956_2.png) [@Rollo\_Wenlock](https://community.glideapps.com/u/Rollo_Wenlock)\
**Post date:** [December 22, 2021, 5:35am UTC](https://community.glideapps.com/t/new-stuff-to-look-at/36218/1 "2021-12-22T05:35:49Z")

</div>

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?

 ![Screen Shot 2021-12-22 at 6.31.57 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/7/8754d6b676389dad4cc4cea05fa322253ccaae1a.jpeg)

---

<div class="post-metadata">

**Author:** ![Eric\_Penn](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/eric_penn/32/73888_2.png) [@Eric\_Penn](https://community.glideapps.com/u/Eric_Penn)\
**Post date:** [December 22, 2021, 5:39am UTC](https://community.glideapps.com/t/new-stuff-to-look-at/36218/2 "2021-12-22T05:39:54Z")

</div>

I think you could do that with some CSS as you mentioned. Take a look here…

> **[Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.](https://www.notion.so/Tab-Profile-Icon-db21d15bae4b4e11a7f825c54f2e0f2e#619b2829b97641f58fd44e5e6ee27b47)**
>
> A new tool that blends your everyday work apps into one. It's the all-in-one workspace for you and your team

---

<div class="post-metadata">

**Author:** ![Rollo\_Wenlock](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/rollo_wenlock/32/26956_2.png) [@Rollo\_Wenlock](https://community.glideapps.com/u/Rollo_Wenlock)\
**Post date:** [December 22, 2021, 5:51am UTC](https://community.glideapps.com/t/new-stuff-to-look-at/36218/3 "2021-12-22T05:51:58Z")

</div>

Not sure where to put the CSS? I can see rich text stuff, but that doest seem to pertain to tab names/icons

---

<div class="post-metadata">

**Author:** ![Mark\_Turrell](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mark_turrell/32/26605_2.png) [@Mark\_Turrell](https://community.glideapps.com/u/Mark_Turrell)\
**Post date:** [December 22, 2021, 6:52am UTC](https://community.glideapps.com/t/new-stuff-to-look-at/36218/4 "2021-12-22T06:52:52Z")

</div>

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 🙂

---

<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 22, 2021, 6:55am UTC](https://community.glideapps.com/t/new-stuff-to-look-at/36218/5 "2021-12-22T06:55:52Z")

</div>

May you can try this. Replace {TabName} with your actual tab name

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

```

---

<div class="post-metadata">

**Author:** ![Rollo\_Wenlock](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/rollo_wenlock/32/26956_2.png) [@Rollo\_Wenlock](https://community.glideapps.com/u/Rollo_Wenlock)\
**Post date:** [December 22, 2021, 7:00am UTC](https://community.glideapps.com/t/new-stuff-to-look-at/36218/6 "2021-12-22T07:00:42Z")

</div>

Sadly the tab is a swipe list (not detail) so it gives me no option to create a rich text component

---

<div class="post-metadata">

**Author:** ![Mark\_Turrell](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mark_turrell/32/26605_2.png) [@Mark\_Turrell](https://community.glideapps.com/u/Mark_Turrell)\
**Post date:** [December 22, 2021, 7:22am UTC](https://community.glideapps.com/t/new-stuff-to-look-at/36218/8 "2021-12-22T07:22:32Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Rollo\_Wenlock](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/rollo_wenlock/32/26956_2.png) [@Rollo\_Wenlock](https://community.glideapps.com/u/Rollo_Wenlock)\
**Post date:** [December 22, 2021, 9:37am UTC](https://community.glideapps.com/t/new-stuff-to-look-at/36218/9 "2021-12-22T09:37:10Z")

</div>

I gave it a go, have I done it correctly? Currently isn’t showing any change

 ![Screen Shot 2021-12-22 at 10.36.07 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/0/f/0f6ddad6a0757540005f5f6a50df237a03f81d9d.png)

---

<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 22, 2021, 9:58am UTC](https://community.glideapps.com/t/new-stuff-to-look-at/36218/10 "2021-12-22T09:58:47Z")

</div>

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"

 ![Screenshot 2021-12-22 170705](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/3/b/3bac28077a36e77854613fe18ba9ba75a0fbfbd3.jpeg)

---

<div class="post-metadata">

**Author:** ![Mark\_Turrell](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mark_turrell/32/26605_2.png) [@Mark\_Turrell](https://community.glideapps.com/u/Mark_Turrell)\
**Post date:** [December 22, 2021, 12:31pm UTC](https://community.glideapps.com/t/new-stuff-to-look-at/36218/11 "2021-12-22T12:31:21Z")

</div>

![Screenshot 2021-12-22 at 13.29.01](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/9/e99803c8d65cd24541debc6a4905a5202ebbbd7f.jpeg)

Rich text - removes the top and tab bar - as long as there is a row that can be included in the inline list.

```auto
<pre><span><style>

[id="tabBar"]{

display: none;

}

[data-test="glide-app-bar"] :nth-child(1) {

display: none;

}

#app-root div[opacity='1'] {

color: transparent;

}

```

---

<div class="post-metadata">

**Author:** ![Rollo\_Wenlock](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/rollo_wenlock/32/26956_2.png) [@Rollo\_Wenlock](https://community.glideapps.com/u/Rollo_Wenlock)\
**Post date:** [December 22, 2021, 9:53pm UTC](https://community.glideapps.com/t/new-stuff-to-look-at/36218/12 "2021-12-22T21:53:35Z")

</div>

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!

[https://dl.dropboxusercontent.com/s/mm792lkqmaxos4b/red%20dot.mov?dl=0](https://dl.dropboxusercontent.com/s/mm792lkqmaxos4b/red%20dot.mov?dl=0)

---

<div class="post-metadata">

**Author:** ![Mark\_Turrell](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mark_turrell/32/26605_2.png) [@Mark\_Turrell](https://community.glideapps.com/u/Mark_Turrell)\
**Post date:** [December 22, 2021, 11:28pm UTC](https://community.glideapps.com/t/new-stuff-to-look-at/36218/13 "2021-12-22T23:28:07Z")

</div>

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.

---

<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 22, 2021, 11:35pm UTC](https://community.glideapps.com/t/new-stuff-to-look-at/36218/14 "2021-12-22T23:35:10Z")

</div>

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.

---

<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 22, 2021, 11:57pm UTC](https://community.glideapps.com/t/new-stuff-to-look-at/36218/15 "2021-12-22T23:57:36Z")

</div>

Not bad either. Now you are Columbus who discovered the mainland of America. 😅