/* Menütags */
li[data-navapp="blog"] span:nth-child(2)::after {
    content: "Pro";
    display: inline-block;
    background: #FFB343;
    padding: 2px 5px;
    font-size: 10px;
    text-transform: uppercase;
    border-radius: 4px;
    color: black;
    font-weight: bold;
    margin-left: 10px;
    letter-spacing: 0em;
}

li[data-navapp="gallery"] span:nth-child(2)::after {
    content: "Neu";
    display: inline-block;
    background: #00cc66;
    padding: 2px 5px;
    font-size: 10px;
    text-transform: uppercase;
    border-radius: 4px;
    color: black;
    font-weight: bold;
    margin-left: 10px;
    letter-spacing: 0em;
}

I did this for my testsite... here you control which app it should affect

@David N. Exactly where did you put this code ?? I can't figure it out.

 

/* Menütags */
li[data-navapp="blog"] span:nth-child(2)::after {
    content: "Pro";
    display: inline-block;
    background: #FFB343;
    padding: 2px 5px;
    font-size: 10px;
    text-transform: uppercase;
    border-radius: 4px;
    color: black;
    font-weight: bold;
    margin-left: 10px;
    letter-spacing: 0em;
}

li[data-navapp="gallery"] span:nth-child(2)::after {
    content: "Neu";
    display: inline-block;
    background: #00cc66;
    padding: 2px 5px;
    font-size: 10px;
    text-transform: uppercase;
    border-radius: 4px;
    color: black;
    font-weight: bold;
    margin-left: 10px;
    letter-spacing: 0em;
}

I did this for my testsite... here you control which app it should affect

How to make it appear on mobile?

 

@David N. Exactly where did you put this code ?? I can't figure it out.

In the Custom CSS, that you can access in the Theme editor. 

Got it thanks.

 

Love the pun!! 🤣

Is it possible to renew my beta community? https://x332394.invisionservice.com/

How did you add color for Buttons?

 

 

How did you add color for Buttons?

 

You can do it with this short snippet

li[data-navapp="blog"] .fa-solid {
    color: #007BFF; 
    font-size: 16px; 
    transition: color 0.3s ease; 
}

li[data-navapp="blog"]:hover .fa-solid {
    color: #FF5733;
}

 

 

How to make it appear on mobile?

/* Blogs */
li:nth-child(2) span.ipsOffCanvas__label::after {
    content: "Pro";
    display: inline-block;
    background: #00cc66;
    padding: 2px 5px;
    font-size: 10px;
    text-transform: uppercase;
    border-radius: 4px;
    color: black;
    font-weight: bold;
    margin-left: 10px;
}

/* Downloads */
li:nth-child(6) span.ipsOffCanvas__label::after {
    content: "Neu";
    display: inline-block;
    background: #FFB343;
    padding: 2px 5px;
    font-size: 10px;
    text-transform: uppercase;
    border-radius: 4px;
    color: black;
    font-weight: bold;
    margin-left: 10px;
}

Here only this works, currently. Maybe @Ehren have a better idea for the mobile view ?

Edited December 18, 2024Dec 18 by MythonPonty

 

/* Blogs */
li:nth-child(2) span.ipsOffCanvas__label::after {
    content: "Pro";
    display: inline-block;
    background: #00cc66;
    padding: 2px 5px;
    font-size: 10px;
    text-transform: uppercase;
    border-radius: 4px;
    color: black;
    font-weight: bold;
    margin-left: 10px;
}

/* Downloads */
li:nth-child(6) span.ipsOffCanvas__label::after {
    content: "Neu";
    display: inline-block;
    background: #FFB343;
    padding: 2px 5px;
    font-size: 10px;
    text-transform: uppercase;
    border-radius: 4px;
    color: black;
    font-weight: bold;
    margin-left: 10px;
}

 

How can I select it for the gallery

Edited December 18, 2024Dec 18 by EliasM

Count the position and change it here... If the gallery is on position 5 Change the 2 in 5

li:nth-child(2) span.ipsOffCanvas__label::after {

 

Count the position and change it here... If the gallery is on position 5 Change the 2 in 5

li:nth-child(2) span.ipsOffCanvas__label::after {

I already got it, thanks

 

Count the position and change it here... If the gallery is on position 5 Change the 2 in 5

li:nth-child(2) span.ipsOffCanvas__label::after {

It would be better if there was an option to select the application directly, where this selection changes based on the user's permissions, I found that it appears to the visitor on another name😂

 

It would be better if there was an option to select the application directly, where this selection changes based on the user's permissions,

Correct... 

first i've tried it with this

/* Blogs */
li a span.ipsOffCanvas__label:contains("Blogs")::after {
    content: "Neu";
    display: inline-block;
    background: #00cc66;
    padding: 2px 5px;
    font-size: 10px;
    text-transform: uppercase;
    border-radius: 4px;
    color: black;
    font-weight: bold;
    margin-left: 10px;
    letter-spacing: 0em;
}

I actually wanted to check if the value of the label is “Blogs”, that the CSS rule then takes effect. But that doesn't seem to work. Maybe Ehren has a better solution. 🙂

 

 

It would be better if there was an option to select the application directly, where this selection changes based on the user's permissions, I found that it appears to the visitor on another name😂

If you want to do this for the mobile view... Here is a solution. 

document.querySelectorAll('.ipsOffCanvas__label').forEach(label => {
    if (label.textContent.trim() === "Blogs") {
        label.insertAdjacentHTML(
            'afterend',
            `<span style="
                display: inline-block;
                background: #FFB343;
                padding: 2px 5px;
                font-size: 10px;
                text-transform: uppercase;
                border-radius: 4px;
                color: black;
                font-weight: bold;
                margin-left: 10px;
            ">Blogs</span>`
        );
    }
    if (label.textContent.trim() === "Downloads") {
        label.insertAdjacentHTML(
            'afterend',
            `<span style="
                display: inline-block;
                background: #00cc66;
                padding: 2px 5px;
                font-size: 10px;
                text-transform: uppercase;
                border-radius: 4px;
                color: black;
                font-weight: bold;
                margin-left: 10px;
            ">Downloads</span>`
        );
    }
});

But this is not a CSS Code, you have to add this into the Design Area --> JavaScript