How to apply ‘new’ graphic to new topics

Development

AI-generated summary

In a Dev category discussion titled ‘How to apply ‘new’ graphic to new topics,’ oga asked how to implement a red ‘New!’ flag seen on the community site, aiming to use it for daily published articles. sheng_hualuo provided the CSS code to style the badge, including positioning, rotation, and color. oga followed up asking if this should be implemented as a theme component and whether placement (head/body) matters; sheng_hualuo recommended creating a ‘custom CSS’ theme component to encapsulate the styling. Later, patrickemin noted that in French, the word ‘Nouveau’ gets truncated and asked for a fix. Arkshine suggested adding height: auto; width: auto; to the CSS, which patrickemin confirmed resolved the issue. The solution is reusable, theme-component-based, and adaptable for multilingual contexts.

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
Screen Shot 2024-08-03 at 12.47.23 PM338×190 7.75 KB

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

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

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

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
image292×116 6.42 KB

7

Thanks @Arkshine that works !