# In app notification badge and counter **URL:** \ **Category:** Ask for Help\ **Created:** [June 19, 2024, 9:04am UTC](https://community.glideapps.com/t/in-app-notification-badge-and-counter/74225 "2024-06-19T09:04:09Z")\ **Posts on this page:** 15\ **Page:** 1
**Author:** ![Boni\_Brilliant](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/boni_brilliant/32/76728_2.png) [@Boni\_Brilliant](https://community.glideapps.com/u/Boni_Brilliant)\ **Post date:** [June 19, 2024, 9:04am UTC](https://community.glideapps.com/t/in-app-notification-badge-and-counter/74225/1 "2024-06-19T09:04:09Z")
I am trying to use this code by @Robert_Petitto to add a notification badge and counter to the profile tab. I have added the code to a template column to display dynamic number and a Rich text on the screen. It doesn’t show. Am I missing something? Does this CSS trick still work? ``` button[aria-label="Profile"]::before { content: "###"; position: absolute; font-size: 11px; font-weight: 800; color: white; padding: 3px; top: 6px; right: 13px; z-index: 1; height: 20px; width: 20px; background-color: red; border-radius: 50%; } ![CleanShot 2024-06-19 at 11.55.41@2x|535x500](upload://1Zm35hyiuoVFgm3kEobVT1cKLyg.jpeg) ``` ---
**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:** [June 19, 2024, 10:25am UTC](https://community.glideapps.com/t/in-app-notification-badge-and-counter/74225/2 "2024-06-19T10:25:58Z")
Please try this: ```auto [data-testid="tab-Profile"]::before { content: "!"; position: absolute; font-size: 11px; font-weight: 800; color: white; padding: 3px; top: 6px; right: 15px; height: 20px; width: 20px; background-color: red; border-radius: 50%; } ``` ---
**Author:** ![Boni\_Brilliant](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/boni_brilliant/32/76728_2.png) [@Boni\_Brilliant](https://community.glideapps.com/u/Boni_Brilliant)\ **Post date:** [June 19, 2024, 10:57am UTC](https://community.glideapps.com/t/in-app-notification-badge-and-counter/74225/3 "2024-06-19T10:57:28Z")
@Himaladin Thanks. This code in my template column still doesn’t show anything on the profile tab and is bound to a rich text component on the profile screen: ``` [data-testid="tab-Profile"]::before { content: "###"; position: absolute; font-size: 11px; font-weight: 800; color: white; padding: 3px; top: 6px; right: 15px; height: 20px; width: 20px; background-color: red; border-radius: 50%; } Am open to alternatives to this method. ``` ---
**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:** [June 19, 2024, 11:03am UTC](https://community.glideapps.com/t/in-app-notification-badge-and-counter/74225/4 "2024-06-19T11:03:37Z")
If you use new Glide, the richtext component does not support custom-css. Try looking at the Settings \> Appearance section and paste it there. However you cannot fill in content dynamically. Try to explain your use for this. Maybe we can still find a walkround. ---
**Author:** ![Boni\_Brilliant](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/boni_brilliant/32/76728_2.png) [@Boni\_Brilliant](https://community.glideapps.com/u/Boni_Brilliant)\ **Post date:** [June 19, 2024, 12:01pm UTC](https://community.glideapps.com/t/in-app-notification-badge-and-counter/74225/5 "2024-06-19T12:01:30Z")
Saved me @Himaladin. This I did not know. My use is just to display the number of unread comments, number is a rollup in a userspecific field and decreases as comments are opened. Any current workarounds for this? ---
**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:** [June 19, 2024, 12:13pm UTC](https://community.glideapps.com/t/in-app-notification-badge-and-counter/74225/6 "2024-06-19T12:13:08Z")
If it displays in components other than tab-bar, I’ve succeeded. In other words, this component already has data on the number of unread chats that appear on the frontend. If it concerns tabbar, I think you can only display static data, for example “!”. However, you need to have a helper component or the first component that I mentioned above. ---
**Author:** ![Boni\_Brilliant](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/boni_brilliant/32/76728_2.png) [@Boni\_Brilliant](https://community.glideapps.com/u/Boni_Brilliant)\ **Post date:** [June 19, 2024, 12:17pm UTC](https://community.glideapps.com/t/in-app-notification-badge-and-counter/74225/7 "2024-06-19T12:17:44Z")
> [@Himaladin](#): > > If it displays in components other than tab-bar, I’ve succeeded. In other words, this component already has data on the number of unread chats that appear on the frontend. Seems like what I should do. I guess a Hint/Button will do. Please share how I can show in a component instead. Really appreciated. ---
**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:** [June 19, 2024, 12:27pm UTC](https://community.glideapps.com/t/in-app-notification-badge-and-counter/74225/8 "2024-06-19T12:27:34Z")
I’ll give it to you when I can access my computer. Sorry, can you provide a screenshot of the components you need to display for the number of unread comments. Or do you just want to display static data in the tabbar? ---
**Author:** ![Boni\_Brilliant](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/boni_brilliant/32/76728_2.png) [@Boni\_Brilliant](https://community.glideapps.com/u/Boni_Brilliant)\ **Post date:** [June 19, 2024, 1:03pm UTC](https://community.glideapps.com/t/in-app-notification-badge-and-counter/74225/9 "2024-06-19T13:03:20Z")
I figured the way out will likely be a sticky button that appears when Unread is \>=0 and clicking goes to a notifications screen. That way I am not dependent on the Appearance\>CSS. I’d love to know however if you have a way of adding the red badge with a dynamic counter on a component. This is the most ideal. ---
**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:** [June 19, 2024, 1:43pm UTC](https://community.glideapps.com/t/in-app-notification-badge-and-counter/74225/10 "2024-06-19T13:43:21Z")
I think there is a misunderstanding. CSS does not have the capability to display a number if the number is not in the component. CSS is only limited to styling, and through the pseudo-class `:has`, it can show/hide effects on other components. Here, I need to know in which component the number is presented. This is an example of when I use the action row component: ![Screenshot 2024-06-19 at 21.17.04](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/0/102f5771814b000cf24e4e23703a9fc4748f2279.png) ![Screenshot 2024-06-19 at 21.15.12](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/2/8282b0e782d247e300fee236ee8e960510f78a79.png) If you understand CSS, you can experiment with that pseudo-class yourself. ---
**Author:** ![Boni\_Brilliant](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/boni_brilliant/32/76728_2.png) [@Boni\_Brilliant](https://community.glideapps.com/u/Boni_Brilliant)\ **Post date:** [June 19, 2024, 2:21pm UTC](https://community.glideapps.com/t/in-app-notification-badge-and-counter/74225/11 "2024-06-19T14:21:51Z")
Ooh, I do little CSS. That’s a Button like this: ![CleanShot 2024-06-19 at 17.20.22@2x](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/0/7038a358b1e49fc2ce17f7decd54d54fadeb9a06.png) ---
**Author:** ![Boni\_Brilliant](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/boni_brilliant/32/76728_2.png) [@Boni\_Brilliant](https://community.glideapps.com/u/Boni_Brilliant)\ **Post date:** [June 19, 2024, 2:24pm UTC](https://community.glideapps.com/t/in-app-notification-badge-and-counter/74225/12 "2024-06-19T14:24:10Z")
Wait, the action row is perfect actually. Do share how to do this please. thanks ---
**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:** [June 19, 2024, 2:41pm UTC](https://community.glideapps.com/t/in-app-notification-badge-and-counter/74225/13 "2024-06-19T14:41:33Z")
I’m having trouble with my existing CSS, hopefully this will work. As a note, you need to change your counter using the ITE column that if counter equals 0 then empty. CSS will not recognize whether the number is 0, 1, 2 etc. Another thing is to give the class name **“mentionBubble”** to your Action Row component. ```auto .mentionBubble { width: fit-content; position: relative; display: flex; margin-left: auto; } .mentionBubble [data-testid="action-row-container"] > div:first-child { position: relative; column-gap: 0; } .mentionBubble > div > div > div > div { flex-direction: row-reverse; } .mentionBubble [data-testid="action-row-container"] > div:last-child > button:last-child { height: 48px; width: 48px; } .mentionBubble [data-testid="action-row-container"] > div:last-child { margin-right:-48px; } .mentionBubble [data-testid="action-row-container"] > div:first-child p { position: absolute; top: -10px; right: -10px; background-color: crimson; color: white; width: 25px; height: 25px; font-size: 0.85rem; font-weight: 900; border-radius: 50%; z-index: 2; display: flex; justify-content: center; align-items: center; } ``` ---
**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\ **Post date:** [June 19, 2024, 9:02pm UTC](https://community.glideapps.com/t/in-app-notification-badge-and-counter/74225/14 "2024-06-19T21:02:01Z")
Ya, that CSS was only viable in Classic apps. There’s no way to do this nowadays because CSS can’t reference app data☹️ ---
**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:** [June 20, 2024, 4:44am UTC](https://community.glideapps.com/t/in-app-notification-badge-and-counter/74225/15 "2024-06-20T04:44:58Z")
Does this work for you?