I read some examples of creating badges for menu items (and more) but didn’t see if that would work with a Title for a collection. For example, if I am showing a long list of items of which 6 have not been read by the user I would like to show a badge with (6).
And to be clear - this is not an item’s title; this is the Collection’s title.
TIA
You just have to get the rollup on a table you can use. Then you can just add it to any titles or any components that you want.
I have the rollup - I just don’t see how to add it to a Title. I currently just show the number in brackets like below. But a badge would look much better. And I don’t see how to add a badge to a title in Glide or which CSS technique would override/append the badge at the end of title.
Thanks as always Thinh
Is “Channel Campaigns” a static text, or is it dynamic?
It can be either. Currently it is static but I can make it a template of some sort in a table.
If the title text is static, you can place the label in a ::before pseudo-element as static content, and reserve the Title value strictly for the badge number.
This allows the badge to update dynamically from the data while keeping the label static and independently styled.
You’re still combining Campaigns [22] as one element.
What I’m suggesting is to separate them:
Campaigns) into a ::before pseudo-elementn)This way, the badge updates dynamically from data, while the label stays static, and both can be styled independently.
Ah you meant a badge, sorry I thought you mean just adding the number like you’re doing.
Himaladin’s suggestion would work with proper CSS.
Thanks - yea I couldn’t figure out how to adapt his suggestion to my use case.
I am no CSS guru 
You can play with a variation of my code here, with the custom collection class being “badge-collection” and the title being “Users”:
.badge-collection .headlineMedium {
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background-color: #121212; /* dark background */
color: #ffffff; /* white text */
font-weight: 600;
text-align: center;
margin: 0 auto; /* center horizontally in its container */
}
.badge-collection .title-header::before {
content: "Users";
padding-right: 10px;
}
Thank you Thinh. Tried it out and worked fine ! Anyway to get the badge to be to the right of the ‘title’ / “Territory Channel(s)” ?
You can change the padding-right line to about 3px, I think.
