Dieser Leitfaden erklärt, wie Sie das Erscheinungsbild von Unterkategorien-Boxen in Discourse anpassen können, einschließlich der Anpassung von Stilen für hervorgehobene Themen, der Modifikation des „Boxes"-Stils und des Managements der Kürzung von Kategorienbeschreibungen.
Erforderliche Benutzerstufe: Administrator
Unterkategorien-Boxen in Discourse können angepasst werden, um die visuelle Attraktivität und Organisation Ihres Forums zu verbessern. Dieser Leitfaden führt Sie durch verschiedene Anpassungsoptionen für Unterkategorien-Boxen, einschließlich Stile für hervorgehobene Themen, den „Boxes"-Stil und die Kürzung von Kategorienbeschreibungen.
Anpassung von Boxen mit hervorgehobenen Themen
Um für Ihre Unterkategorien-Boxen mit hervorgehobenen Themen einen kräftigen, farbenfrohen Look zu erzeugen, können Sie benutzerdefiniertes CSS verwenden. Diese Methode entfernt Logos und wendet unterschiedliche Hintergrundfarben für jede Unterkategorie an.
So lassen sich Ihre Unterkategorien-Boxen wie im folgenden Beispiel gestalten:
- Gehen Sie zum Admin-Bereich Ihrer Site
- Navigieren Sie zu Anpassen > Themes
- Erstellen Sie ein neues Theme oder bearbeiten Sie ein bestehendes
- Fügen Sie folgenden CSS-Code zu Ihrem Theme hinzu:
.category-programming {
.category-box, .category-box-inner {
border: none;
}
.category-box-heading {
padding: 0;
border-radius: 3px;
.category-logo {
display: none;
}
h3 {
padding: 2em 0;
}
}
.category-box-ruby {
.category-box-heading > a[href] {
color: white;
}
.category-box-heading {
background-color: #BF1E2E;
}
}
.category-box-php {
.category-box-heading > a[href] {
color: white;
}
.category-box-heading {
background-color: #0E76BD;
}
}
.category-box-javascript {
.category-box-heading > a[href] {
color: white;
}
.category-box-heading {
background-color: #D7BB2F;
}
}
}
Passen Sie die CSS-Selektoren und Farben an Ihre spezifischen Kategorienamen und das gewünschte Farbschema an.
Anpassung des „Boxes"-Stils
Wenn Sie den „Boxes"-Stil für Unterkategorien verwenden, können Sie diesen ähnlich anpassen:
Fügen Sie in Ihrem Theme-CSS den folgenden Code hinzu:
.category-programming .category-boxes {
.category-box {
border: none;
.category-logo {
display: none;
}
}
.category-box-heading {
padding: 0;
border-radius: 3px;
h3 {
padding: 1em 0;
}
}
.category-box-ruby {
.category-box-heading {
background-color: #BF1E2E;
}
.category-box-heading h3 {
color: white;
}
}
.category-box-php {
.category-box-heading {
background-color: #0E76BD;
}
.category-box-heading h3 {
color: white;
}
}
.category-box-javascript {
.category-box-heading {
background-color: #D7BB2F;
}
.category-box-heading h3 {
color: white;
}
}
}
Ändern Sie erneut die Selektoren und Farben, um sie an die Struktur und Designpräferenzen Ihres Forums anzupassen.
Verwaltung der Kürzung von Kategorienbeschreibungen
Standardmäßig kürzt Discourse Kategorienbeschreibungen in den Kategorien-Boxen auf 4 Zeilen. Sie können dies mit benutzerdefiniertem CSS anpassen:
Um die Beschreibung auf zwei Zeilen zu kürzen, fügen Sie diesen CSS-Code zu Ihrem Theme hinzu:
.category-boxes .description {
-webkit-line-clamp: 2;
}
Passen Sie den Wert von -webkit-line-clamp an, um die gewünschte Anzahl sichtbarer Zeilen zu erreichen.
Überlegungen für mobile Geräte
Wenn Sie auf dem Desktop den Stil „Boxen mit Unterkategorien" verwenden, beachten Sie, dass Themen auf mobilen Geräten möglicherweise noch sichtbar sind. Dieses Verhalten könnte im Discourse-Design absichtlich so vorgesehen sein, um die Lesbarkeit auf kleineren Bildschirmen zu gewährleisten.
Falls Sie das mobile Layout anpassen müssen, könnten Sie spezifisches CSS für mobile Ansichten hinzufügen oder einen Discourse-Theme-Entwickler für eine maßgeschneiderte Lösung konsultieren.
