I'm trying to figure out if I can restrict visibility to the 'new discussion' button in one of our groups, is that possible?
Hi @amorales - thanks for your question!
Do you clarify, are you looking to hide the new discussion button in a group or a category?
Currently this would not be possible in a group, but in a category you could use layout editor to build a custom layout (even category by category) and adjust the view permissions of the new post button.
Please let us know if you have any further questions!
Yes, I was referring to the new discussion button in a group. We currently use one of our groups to interact with students. Our field instructor wants to post discussions and have students only interact in the comments. So it sounds like we are not able to set permissions for this button in a group? Thanks!
We used custom code to hide the new post button on the 'My Discussions' page which you might be able to use.
We had to play around quite a lot to get the right class name for that specific area - originally it was targetting all of our categories and removing the button from all of them - we found the class that worked for us was ".Discussions.mine.css" so you might be able to do something similar with the group name.
The class names are also different in staging and prod - in staging each new post button had a different class for us but in prod they all use the same hence having to add .Discussions.mine
Lastly as class names are updated we have to monitor it as the code might break in a future update.
Below is the code we used: In the Javascript of the Style Guide we added:
/*CSS to hide the New Post button on My Discussions page*/const NEW_POST_STYLE=`.Discussions.mine .css-3gsx67-newPostMenuStyles-container { display: none; }
And then under onVanillaReady(() => { we added: injectCSS(NEW_POST_STYLE); //Inject the CSS style to hide the new post button on my discussions page
injectCSS(NEW_POST_STYLE); //Inject the CSS style to hide the new post button on my discussions page
Hope this helps!
Hey @sophielyons, that's. a great solution. Can I give you a pointer on that CSS? (for you too @amorales ).
The only thing I would change is this part:
.Discussions.mine .css-3gsx67-newPostMenuStyles-container
is what we call the selector, contains this nasty little string -3gsx67- which is auto-generated by the Vanilla application when they make updates to the code. There is a good chance that after a future deploy this CSS will not work. I would use, instead, what they call a wildcard selector that takes into account that part of the selector could change. Try this:
-3gsx67-
.Discussions.mine [class$="-newPostMenuStyles-container"] {
display: none;
}
That $= means "ends with".
All of this is a workaround. We can't guarantee that the software developers won't make a change to those class names in the future, so keep an eye on your site especially after a code deploy.
Let me know if you have other questions or need help.
Thank you both for sharing this! I'll definitely take this into consideration. Do you know if I'm able to only hide it from certain roles?
Technically there is @amorales but it's so complicated that it is really for advanced JavaScript users.
Generative Engine Optimization? AIOs? The end of search as we know it? 2025 promises to be a long, strange year for SEO. If you’re wondering how to survive it, you’re not alone. Learn more about the key trends driving change in search, which ones teams will need to adapt to, and which ones are just scary acronyms you’re…
⭐️ Got something cool to share? Have a victory in your community and want to show off your accomplishments with fellow community builders? 🙋 Got questions? Bring your community, tactical and random questions and get answers from peers and Vanilla experts! 🗓 Join me and @paddykelly, and a group of your peers for our next…
