When I logged in the community today, I Noticed, a Red “New” flag as shown here. [Screen Shot 2024-08-03 at 12.47.23 PM] How was the RED “New !” flag achieved? Being that we will be publishing articles daily, I would like to use it to flag new Topics. How or what was used to create the flag? Thanks

.badge-notification.new-topic::before { content: "New!"; position: absolute; right: -1.1em; top: -0.85em; background: var(--quaternary); transform: rotate(12deg); font-size: var(--font-down-2); letter-spacing: .05em; padding: .2em .5em; border-radius: 4px; font-weight: normal; color: var(--secondary); } [image]

Thanks so much. I assume this is going to be added as a component, correct? Being that it will be a global change that applies to all Themes, does it matter if the location is, “head”, “body” etc?

I suggest you create a theme component, name it custom CSS, and add all the CSS you need

Hi thanks for the tip, however, I use a translation for New in French which is a longer word (Nouveau), and the word is truncated. Would you know how to solve that? Thanks. @sheng_hualuo

Try to add the following properties height: auto; width: auto; If it’s what you mean: [image]

How to apply ‘new’ graphic to new topics

Development

patrickemin (Patrick EMIN) August 4, 2024, 11:16pm 7

Thanks @Arkshine that works !

Topic		Replies	Views
Very minor issue: on the topics list, the new messages indicator can be on a new line by itself UX	4	1143	March 17, 2022
New Topic Header Button Theme component official , new-topic-header-button	43	17226	February 15, 2026
Notification for new topic by mail shows replied icon, a new icon would be more logical UX	6	1603	March 14, 2016
New topic alert covers text UX	1	405	April 6, 2024
New or unread topics banners cover text at /new & /unread UX	3	604	June 10, 2024

How to apply ‘new’ graphic to new topics

Related topics