Hi,
I want to use the banner topic feature for a specific user group. Only members in that group should be able to see the announcement text. Is this possible?
Thanks.
As long as a user has the specific group set as their primary group, you can do this with CSS.
So for example, my primary group (shown on my user admin page) is team
This CSS would make it so only people in the group team would see the banner
body:not(.team) #banner {
display: none;
}
Just keep in mind that this uses CSS to hide the banner for everyone else, so someone in another group could potentially see the banner if they were inspecting the page and looking for it.
8 Likes
His screenshot was taken from the user admin page under the Groups section.
If you go to a user’s public profile as an administrator, you should see the 
button near the top right. Scroll down a bit after you have selected that button. You should see the “Groups” section and the options in that screenshot.
You can also set up a group so that it will automatically be set as the primary group of all its members. If you go this route, just be aware this automatic feature might change any existing primary group settings of its members.
4 Likes
Yes if you check the “Automatically set as primary group” option in the group management settings, any members added to that group will have it automatically set as their primary group.
I created “specificgroup” user group. I added a user to this group. Also, i added this code to CSS.
body:not(.specificgroup) #banner {
display: none;
}
But it is don’t work for me. Banner does not appear for the specificgroup member group.
1 Like
Try putting primary-group- before your group’s name:
body:not(.primary-group-YOUR_GROUP_NAME) #banner {
display: none;
}
3 Likes
Yes, it works! Thanks for that great solution.
I have one more question: Is it possible to use with different banners for more than one group?
Thanks everyone for participation! 
1 Like
There can be only one banner topic any any given time, and there is no such thing as a category banner topic. Though it is relatively easy to “not display” it for certain categories / groups, it would be more involved to “display different banner topics” when there can be only one. I think the only way to have something like “category banners” would be with a plugin.
I think I’ve got a solution for you, but there will be several pieces of the puzzle you will need to fill in yourself:
Go to the topic you are using for your banner topic. What you will need to do is create sections in the post that are specific for each group. So for example:
<div data-theme-group="GROUP_ONE">
# Banner 1
</div>
<div data-theme-group="GROUP_TWO">
# Banner 2
</div>
<div data-theme-group="GROUP_THREE">
# Banner 3
</div>
Anything you place within the <div>s will be specific to the group you are targeting. Anything outside of the <div>'s will be shown to everyone. We’ll use CSS to control what is seen given a user’s group:
// Hide all by default
#banner [data-theme-group] {
display: none;
}
// Show specific content for a specific group
body.primary-group-GROUP_ONE #banner [data-theme-group="GROUP_ONE"],
body.primary-group-GROUP_TWO #banner [data-theme-group="GROUP_TWO"],
body.primary-group-GROUP_THREE #banner [data-theme-group="GROUP_THREE"] {
display: block;
}
Let me know if you need me to clarify anything. There may be a cleaner implementation of this, but it’s what I could come up with quickly. This can also be used to control different banner content for different categories with a little alteration to the code.
Also just a reminder that this still applies:
4 Likes
Hi, thanks for great the documentation. I tested in my local development environment. But it seems banner’s seems to all groups. Did I get something wrong?
css:
// Hide all by default
#banner [data-theme-group] {
display: none;
}
// Show specific content for a specific group
body.primary-group-team #banner [data-theme-group="team"],
body.primary-group-specificgroup #banner [data-theme-group="specificgroup"] {
display: block;
}
after header:
<div data-theme-group="team">
# Banner 1
</div>
<div data-theme-group="specificgroup">
# Banner 2
</div>
edit: oh, i got it, it is not related to after header. i am trying now.
1 Like
Ok, it works but there is a problem. Empty banner box seems to anonymous users. And suggestion for that?
Can you share example of code? Thanks
1 Like
What is the closest parent element that contains the banner? That’s the element you need to target for the display none rule.
2 Likes
To hide the banner completely for anon, you need to add the following to your CSS:
.anon #banner {
display: none;
}
I don’t have it written out and ready, unfortunately. I’ll write it up and post it when I get chance.
1 Like
We hide empty banners to anonymous users but empty banners seems by other group users too. How i fix that? Thanks.
You will need to replace any of the CSS posted earlier with the following. This will hide the entire banner for anons and any users not part of a group that has an associated banner. Once again replace GROUP_ONE, GROUP_TWO, etc with the relevant group names.
body {
// Hide the banner and all group-specific content by default
#banner,
#banner [data-theme-group] {
display: none;
}
// Display the banner for the following groups only
&.primary-group-GROUP_ONE {
#banner,
#banner [data-theme-group="GROUP_ONE"] {
display: block;
}
}
&.primary-group-GROUP_TWO {
#banner,
#banner [data-theme-group="GROUP_TWO"] {
display: block;
}
}
&.primary-group-GROUP_THREE {
#banner,
#banner [data-theme-group="GROUP_THREE"] {
display: block;
}
}
}
4 Likes