### Author:  [@Cardinalflyer](https://meta.discourse.org/u/Cardinalflyer)
#### Post date: [July 18, 2019, 9:04pm UTC](https://meta.discourse.org/t/conditional-header-text-based-on-group-membership/123348/1 "2019-07-18T21:04:10Z")
I am hoping for some header / CSS help. I know a lot of languages but am just getting started with CSS.
I am trying to place a notice at the top of my header reminding members to renew when they get close to their renewal date. Renewal will be done via our main website, so I’d like to include a link. I am using the ‘Light’ theme.
I am very close, having taking the following steps:
1. Created a group called ‘renewal’ with a ‘please renew’ avatar but no other actions.
2. Set ‘renewal’ to be the primary group.
3. Included ‘renewal’ in the group ownership using SSO from my remote site based on renewal date.
4. Placed the following custom code in the Header of Common:
1. Placed the following code in the CSS of Common
It works to the point of showing the text when the user is a member of the renewal group.
Now I’d like to enhance this notice by making it a red font and including an \
### Author:  [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [July 18, 2019, 9:11pm UTC](https://meta.discourse.org/t/conditional-header-text-based-on-group-membership/123348/2 "2019-07-18T21:11:58Z")
I made a simple theme-component that puts group CSS classes in the html body for easy customizations, I call it [GitHub - discourse/discourse-groups-css-classes-in-body · GitHub](https://github.com/discourse/discourse-groups-css-classes-in-body/) 😅
That way you can create the entire banner in the HTML on the header and hide/show it based on the classes in the body.
---
### Author:  [@Cardinalflyer](https://meta.discourse.org/u/Cardinalflyer)
#### Post date: [July 18, 2019, 11:29pm UTC](https://meta.discourse.org/t/conditional-header-text-based-on-group-membership/123348/3 "2019-07-18T23:29:22Z")
Thanks @Falco. That is in the ballpark! My challenge is how to use that capability. In that component you say:
> After installing this component to the active theme you can target CSS using group membership like, for example:
>
> body.group-patrons div.donation-banner {
> display: none;
> }
I know it is probably simple, but I am trying to understand that example. If I have a header div block like this:
```
My Text
```
Then can I turn on that text when a class exists? Specifically something like:
```
.primary-group-renewal div.test {
display: inline;
}
```
And wouldn’t I also need to shut it off when that class does not exist? In fact isn’t the shutting off part the important bit? So perhaps something like this:
```
:not(.primary-group-renewal) div.test{
display: none;
}
```
I have been experimenting and googling but have not found this yet. I’m starting to watch the ‘about CSS’ youtubes which is probably good for me, but so far no hard clues. I appreciate your help!
---
### Author:  [@Cardinalflyer](https://meta.discourse.org/u/Cardinalflyer)
#### Post date: [July 19, 2019, 12:47am UTC](https://meta.discourse.org/t/conditional-header-text-based-on-group-membership/123348/4 "2019-07-19T00:47:48Z")
I’ve done a lot of experimentation and right now this is working, but I do have a question.
In Header:
```
```
In CSS:
```
.renewlink{
display: none;
}
.primary-group-renewal .renewlink{
display: block;
}
```
I really expected this to work instead of the double CSS entry above and it did not. What am I missing here?
```
:not(.primary-group-renewal) .renewlink{
display: block;
}
```
Thanks
---
### Author:  [@system](https://meta.discourse.org/u/system)
#### Post date: [January 11, 2023, 2:27pm UTC](https://meta.discourse.org/t/conditional-header-text-based-on-group-membership/123348/5 "2023-01-11T14:27:05Z")