Yes, it's that time of the week where I spend 20-30 minutes of my life thinking of a terrible pun on a number.

Our weekly beta release is here!

We have a bunch of fixes for you, along with a tidy up of the new tag page and an update to the editor drop down menus to make it clearer what everything does and to make it a bit better on mobile.

Let us know what you think!

Oh yeah. I didn't press a button. I pressed it now. It should appear.

The patch not showing up.

There might be an issue with the patch system, so just update these files.

Any cloud customers can just PM me their URL and I can push the updated files from our end.

Patch.zip

 

Hungry? Well, Beta 8

Love the pun!! 🤣

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

 

Love the pun!! 🤣

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

Nice customization. Would be a good feature request to set that directly in the Menu Manager. 

 

Nice customization. Would be a good feature request to set that directly in the Menu Manager. 

I agree, that would be great! 🙂 

 

It would be better if you told us now how to do it😃

You can use your browser's dev tools to copy my custom CSS from my site. 

Ok I'll make it easy:

li[data-ips-hook="navColumnItem"]:nth-child(6) 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-ips-hook="navColumnItem"]:nth-child(5) span:nth-child(2)::after {
    content: "New";
    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;
}

There may be a more elegant selector than li[data-ips-hook="navColumnItem"]:nth-child(), which breaks the relationship if you edit your menu, but this is just something I quickly hacked to see what it would look like. 

Edited December 17, 2024Dec 17 by David N.

/* 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

 

Love the pun!! 🤣

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

How did you add color for Buttons?

 

 

 

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