I’m working in discourse.org’s hosting, so plugins are not possible for me in this case. Imagine I have a topic posted where anyone can see it. If someone is in group “A” then I want them to see this content. If NOT, then I want them to see this other content. And some of the topic everyone should see. Schematically like this… This is content everyone sees. {wishful thinking: only for ppl in group A} Hey thanks for being in the special group! {/wishful} {wishful thinking: only for ppl NOT in group A} Hey we have a special group you can join. [Read more about that](…) {/wishful} I feel confident (but forget exactly how to do it) that this can be done with a theme component to set CSS classes on the content I want to “toggle” display of. I’ll do this if this is the best I can figure out. But CSS display: none is weak sauce. I’d like to disappear from the DOM what they shouldn’t see. Disappeared server-side if possible, but I’d settle for at least j/s based disappeared browser-side. (That requires a much higher clever-level to get around than display: none does in CSS.)

Finally got around to knocking this together as, https://github.com/Umbrella-CAST/discourse-umbrella-groupswitchdisplay Super simple, just removes the targeted DIV from the DOM based on is the current user in a group name “foobar” or not in the group via “!foobar”. That lets me have a simple toggle display of content like the below image. Of course, if the component is disabled, then all of the content shows (since sans component the DOM doesn’t get trimmed down.) But this is good enough for what I want to do. [Screen Shot 2022-10-21 at 14.45.00]

bump! nobody? :~( why can’t we tag @team :wink:

I don’t have too much time to dive into it right now but this theme component may help you because it’ll list all of the current user’s groups in, I think, the body tag. Then you could probably use CSS selectors to show/hide based on whether certain group class names exist in the body tag. [image] CSS Classes for Current User's Groups Theme component discourse2 Summary CSS Classes for Current User’s Groups adds the groups that a member is a part of as CSS classes on the tag. eyeglasses Preview Preview on theme-creator.discourse.org hammer_and_wrench Repository Link https://github.com/discourse/discourse-groups-css-classes-in-body open_book New to Discourse Themes? Beginner’s guide to using Discourse Themes Install this theme component Before: [image] After: [image] Discourse only adds the current us… And combine that with some info from this post on how which HTML elements you can use in the composer and how to wrap composer text in classes, and it may work: [image] What are the different ways to customize content inside a post (custom attributes and such) Support So far I’m aware of two way to do it: some text CSS: [data-theme-custom] { color: pink; } [wrap="indent"]some text[/wrap] It will create either a div or a span (if there is other content on the same line), containing the following attributes: class="d-wrap" and data-wrap="custom" CSS [data-wrap="custom"] { color: pink; } Are there other ways to customize some chosen content in a post I’m not aware of? Also, is there a way to add a custom c… Yup, just tested it here and it should work if you use that component combined with something like: Text only for group A Text only for group B And then have css selectors that do something like: span[data-group-a] {display: none;} body.group-a span[data-group-a] {display: block;} Or something like that… Sorry for all the edits. Just tested it on one of my instances and it works. But as you mentioned, maybe that’s not what you wanted :slight_smile: … [image] Craig Constantine: But CSS display: none is weak sauce. I’d like to disappear from the DOM what they shouldn’t see. Disappeared server-side if possible, but I’d settle for at least j/s based disappeared browser-side. (That requires a much higher clever-level to get around than display: none does in CSS.) This might be possible with a theme javascript, adding something in the section to select the elements and remove it. Still may require the span and wrapping as above, but remove it through that.

Ok I realized I may need this as well so I dove more deeply into it :slight_smile: This code doesn’t yet work and is not that pretty, but I think it’s almost good enough to go in the part of the theme, just needs to have the right way to select the elements using JS: api.decorateCookedElement( element => { var hasGroupA = document.body.classList.contains('group-a'); const group_a_spans = element.querySelectorAll("span[data-group-a]"); if (!group_a_spans.length) { return; } if (!hasGroupA) { group_a_spans.forEach(function (el) { el.innerHTML = ""; }); } }, { id: "THEME-ID", onlyStream: true } ); CAVEAT: I think it may be hard to hide all the info from search and things like that, so while this may be better than just hiding it via CSS, I don’t think it’ll completely prevent people from seeing the info. EDIT: Fixed it so the CSS selectors should work. Repeat the code for as many groups as you want to use. Change THEME-ID to a unique name. I think this should work :slight_smile: Oops, didn’t get this part yet: [image] Craig Constantine: {wishful thinking: only for ppl NOT in group A} Hey we have a special group you can join. [Read more about that](…) {/wishful}

I really appreciate your efforts on this… I’m still thinking about this and I think you’ve started me on a workable solution. I’ve a template component I wrote, which makes me think I could make something like this work… Supposing I imagine a component “foobar”. I could write a topic, adding some DIVs like this… "> "> The component then deletes from the DOM, one DIV or the other, based on the viewing user’s group. This strikes me as stronger than a CSS display: none; which is trivial to flip back on via any web browser’s DOM inspection features. To get around this, someone would have to alter the j/s that is running when the page loads—possible, but much harder. why do I want this? So I can do a partial reveal of content for people who are NOT in the group. (Because getting into the group requires a paying subscription.) This is a really cool topic. This first paragraph is really interesting. "> Here's the rest of the content. "> Hi, sorry to interrupt! There's more conent here for our paying members... would you like to read about becoming one? People in the group simply see the entire topic. There’s no sign of any paywalling. People not in the group see the initial portion, not in either DIV above, and a paywall. So I can use this in a completely public area so people can see what they get if they signup, login and become a paying member.

Display different content within a topic based on user's groups membership?

Development

Jagster (Jakke Flemming) October 21, 2022, 7:56pm 7

You solved out one of mine very similar headache.

Topic		Replies	Views
Customized CSS based on user role/groups Development css	7	1041	November 22, 2025
Hide parts of a post Development	1	580	October 12, 2023
Theme component to hide topics if user is in a certain group Marketplace	5	1172	January 9, 2023
I want to customize UI based on the users group membership UX	4	2466	March 24, 2018
Group specific Banner Topics? Product Support	9	1705	January 27, 2024

Display different content within a topic based on user's groups membership?

Related topics