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

Ich habe eine einfache Theme-Komponente erstellt, die Gruppen-CSS-Klassen im HTML-Body für einfache Anpassungen bereitstellt. Ich nenne sie GitHub - discourse/discourse-groups-css-classes-in-body · GitHub :sweat_smile:

Auf diese Weise kannst du das gesamte Banner im HTML im Header erstellen und basierend auf den Klassen im Body ein- oder ausblenden.

3

Danke @Falco. Das liegt schon in der richtigen Richtung! Meine Herausforderung ist, wie ich diese Funktionalität nutzen kann. In diesem Komponenten-Beispiel heißt es:

Nachdem du diese Komponente im aktiven Theme installiert hast, kannst du CSS basierend auf Gruppenmitgliedschaften steuern, zum Beispiel:

body.group-patrons div.donation-banner {
display: none;
}

Ich weiß, dass es wahrscheinlich einfach ist, aber ich versuche, dieses Beispiel zu verstehen. Wenn ich einen Header-Div-Block wie diesen habe:

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

Kann ich diesen Text dann aktivieren, wenn eine bestimmte Klasse vorhanden ist? Etwa so:

.primary-group-renewal div.test  {
   display: inline;
 }

Und müsste ich ihn nicht auch deaktivieren, wenn diese Klasse nicht existiert? Ist der Teil mit dem Deaktivieren nicht sogar der wichtigere? Vielleicht also so etwas wie:

:not(.primary-group-renewal) div.test{
    display: none;
  }

Ich habe bereits experimentiert und im Internet gesucht, aber bisher nichts Passendes gefunden. Ich fange gerade an, YouTube-Videos zum Thema CSS anzusehen, was wahrscheinlich gut für mich ist, aber bisher habe ich noch keine konkreten Hinweise. Ich danke dir für deine Hilfe!

4

Ich habe viel experimentiert, und aktuell funktioniert es, aber ich habe eine Frage.

Im Header:

<div id='renew' class='renewlink' align="center">
    <a href="https://www.example.com/renewlink" target="_blank")
    <font color='red'>
    Bitte klicken Sie hier, um Ihre Mitgliedschaft zu verlängern
    </font>
    </a>
</div>

Im CSS:

.renewlink{
    display: none;
  }

.primary-group-renewal .renewlink{
    display: block;
  }

Ich habe wirklich erwartet, dass dies statt der doppelten CSS-Einträge oben funktioniert, aber das war nicht der Fall. Was übersehe ich hier?

:not(.primary-group-renewal) .renewlink{
    display: block;
  }

Danke