Dieser Leitfaden erklärt, wie Sie CSS-Änderungen auf Ihrer Discourse-Website vornehmen können, einschließlich einer Einführung in CSS, wo Sie CSS in Discourse hinzufügen und wie Sie die richtigen Selektoren mit Browser-Inspektionstools finden.
Erforderliches Benutzerniveau: Administrator
Zusammenfassung
Dieser Leitfaden behandelt:
- Eine kurze Einführung in CSS und Schlüsselkonzepte
- Wie Sie CSS mit Theme-Komponenten zu Ihrer Discourse-Website hinzufügen
- Verwendung von Browser-Inspektionstools zum Auffinden der richtigen CSS-Selektoren
Grundlagen von CSS verstehen
CSS steht für Cascading Style Sheets. Hier sind drei Schlüsselkonzepte, die Sie verstehen sollten:
- Struktur: Eine CSS-Regel besteht aus einem Selektor, einer Eigenschaft und einem Wert.
p {
color: red;
}
- Selektor:
p(zielt auf alle HTML-<p>-Tags ab) - Eigenschaft:
color - Wert:
red
- Kaskade: Die zuletzt angewendete Regel hat Vorrang. Zum Beispiel:
p {
color: red;
}
p {
color: green;
}
Die Absätze werden grün sein, da dies die zuletzt angewendete Regel ist.
- Spezifität: Spezifischere Regeln überschreiben weniger spezifische Regeln. Zum Beispiel:
div p {
color: green;
}
p {
color: red;
}
Absätze innerhalb von Divs bleiben grün, da div p spezifischer ist als p.
CSS zu Ihrer Discourse-Website hinzufügen
Um CSS zu Ihrer Discourse-Website hinzuzufügen:
-
Gehen Sie zu
Darstellung > Themes & Komponentenin der Seitenleiste oder folgen Sie dieser URL für Ihre Website:https://yoursite.com/admin/customize/components
-
Klicken Sie auf Installieren und
Neu erstellen.
-
Benennen Sie Ihre Theme-Komponente und klicken Sie auf Erstellen
-
Wählen Sie aus, auf welche Themes die Komponente angewendet werden soll
-
Klicken Sie auf Code bearbeiten
-
Fügen Sie Ihr CSS zum CSS-Tab hinzu
-
Klicken Sie auf “Speichern”, um Ihre Änderungen anzuwenden.
Wenn Sie mehrere vom Benutzer auswählbare Themes haben, stellen Sie sicher, dass Sie Ihre Theme-Komponenten zu allen relevanten Themes hinzufügen.
Die richtigen CSS-Selektoren finden
Verwenden Sie Browser-Inspektionstools, um die richtigen CSS-Selektoren zu finden:
-
Klicken Sie mit der rechten Maustaste auf das Element, das Sie ändern möchten.
-
Wählen Sie im Kontextmenü “Inspizieren” aus.
-
Suchen Sie im Bedienfeld der Entwicklertools die Elementselektoren.
-
Klicken Sie auf die entsprechenden Selektoren und fügen Sie Ihre CSS-Regel hinzu.
-
Kopieren Sie die Regel, fügen Sie sie in den CSS-Bereich Ihrer Theme-Komponente ein und entfernen Sie andere Regeln.
Für spezifischere Selektoren müssen Sie möglicherweise den Selektor kopieren, der in den vorhandenen Stilen von Discourse verwendet wird, und ihn in Ihrer Theme-Komponente ändern.
Hier ist ein Video, das die obigen Schritte demonstriert:
Wenn Ihre Änderungen nicht angewendet werden, überprüfen Sie Folgendes:
- Die Theme-Komponente ist in Ihren Themes aktiviert.
- Ihre CSS-Regel ist spezifisch genug, um vorhandene Stile zu überschreiben.
