Conditional header text based on group membership

Dev
1

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:

image

  1. Placed the following code in the CSS of Common

image

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 <a tag for ‘click here to renew.’ But as most of you know, one cannot add HTML tags to a Content: string. I tried adding a font color to the <div but no luck.

Is there an easy answer? Or another way completely to address this, like turning on and off the entire div block?

FYI the example I started from used a <p tag in the header but that put an extra blank line at the top of the header whether triggered or not. I’d like to avoid that…

Thanks for your help!

2

I made a simple theme-component that puts group CSS classes in the html body for easy customizations, I call it https://github.com/discourse/discourse-groups-css-classes-in-body/ :sweat_smile:

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.

5 Likes
3

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:

<div name="test">My Text</div>

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!

4

I’ve done a lot of experimentation and right now this is working, but I do have a question.

In Header:

<div id='renew' class='renewlink' align="center">
    <a href="https://www.example.com/renewlink" target="_blank")
    <font color='red'>
    Please click to renew your membership
    </font>
    </a>
</div>

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

1 Like