Bedingter Kopfzeilentext basierend auf Gruppenmitgliedschaft

Entwickler
1

Ich hoffe, ich bekomme Hilfe bei einem Header/CSS-Problem. Ich beherrsche viele Sprachen, stehe aber gerade erst am Anfang mit CSS.

Ich möchte oben im Header eine Nachricht platzieren, die Mitglieder daran erinnert, ihre Mitgliedschaft zu verlängern, wenn das Verlängerungsdatum naht. Die Verlängerung erfolgt über unsere Hauptwebsite, daher würde ich gerne einen Link einfügen. Ich verwende das „Light"-Theme.

Ich bin fast soweit und habe folgende Schritte unternommen:

  1. Eine Gruppe namens „renewal" erstellt, die ein Avatar mit der Aufschrift „please renew" hat, aber keine weiteren Aktionen.

  2. „renewal" als primäre Gruppe festgelegt.

  3. „renewal" in die Gruppenmitgliedschaft über SSO von meiner Remote-Seite basierend auf dem Verlängerungsdatum integriert.

  4. Den folgenden benutzerdefinierten Code im Header von „Common" platziert:

image
image335×104 3.84 KB

  1. Den folgenden Code im CSS von „Common" platziert:

image
image364×111 4.14 KB

Es funktioniert soweit, dass der Text angezeigt wird, wenn der Benutzer Mitglied der „renewal"-Gruppe ist.

Nun möchte ich diese Nachricht verbessern, indem ich die Schriftfarbe rot setze und ein <a>-Tag für „hier klicken, um zu verlängern" hinzufüge. Wie die meisten von euch wissen, kann man jedoch keine HTML-Tags in einen „Content:"-String einfügen. Ich habe versucht, eine Schriftfarbe für das <div> hinzuzufügen, aber das hat nicht funktioniert.

Gibt es eine einfache Lösung? Oder einen ganz anderen Ansatz, z. B. das Ein- und Ausschalten des gesamten <div>-Blocks?

Zur Info: Das Beispiel, mit dem ich begonnen habe, verwendete ein <p>-Tag im Header, was jedoch unabhängig davon, ob es ausgelöst wurde oder nicht, eine zusätzliche Leerzeile oben im Header erzeugte. Das möchte ich vermeiden…

Vielen Dank für eure Hilfe!

2

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 :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 „Gefällt mir“
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 „Gefällt mir“