How to apply ‘new’ graphic to new topics

Dev
1

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

1 Like
2 
.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
image1920×942 157 KB

7 Likes
3

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?

4

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

2 Likes
5

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

6

Try to add the following properties

    height: auto;
    width: auto;

If it’s what you mean:

image

3 Likes
7

Thanks @Arkshine that works !

1 Like
8

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.