Dieser Leitfaden erklärt, wie das Erscheinungsbild von Unterkategorie-Boxen in Discourse angepasst werden kann, einschließlich der Anpassung von Stilen für hervorgehobene Themen, der Änderung des „Boxen“-Stils und der Verwaltung der Kürzung von Kategoriebeschreibungen.
Erforderliches Benutzerniveau: Administrator
Unterkategorie-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 Unterkategorie-Boxen, einschließlich Stilen für hervorgehobene Themen, dem „Boxen“-Stil und der Kürzung von Kategoriebeschreibungen.
Boxen mit hervorgehobenen Themen anpassen
Um Ihren Unterkategorie-Boxen mit hervorgehobenen Themen ein auffälliges, farbenfrohes Aussehen zu verleihen, können Sie benutzerdefiniertes CSS verwenden. Diese Methode entfernt Logos und wendet für jede Unterkategorie unterschiedliche Hintergrundfarben an.
So lassen Sie Ihre Unterkategorie-Boxen wie folgt aussehen:
- Gehen Sie zum Admin-Panel Ihrer Website
- Navigieren Sie zu Anpassen > Themen
- Erstellen Sie ein neues Thema oder bearbeiten Sie ein vorhandenes
- Fügen Sie Ihrer Vorlage das folgende CSS hinzu:
.category-programming {
.category-box, .category-box-inner {
border: none;
}
.category-box-heading {
padding: 0;
border-radius: 3px;
img.logo {
display: none;
}
h3 {
padding: 2em 0;
}
}
.category-box-ruby {
.category-box-heading {
background-color: #BF1E2E;
}
.category-box-heading > a[href] {
color: white;
}
}
.category-box-php {
.category-box-heading {
background-color: #0E76BD;
}
.category-box-heading > a[href] {
color: white;
}
}
.category-box-javascript {
.category-box-heading {
background-color: #D7BB2F;
}
.category-box-heading > a[href] {
color: white;
}
}
}
Passen Sie die CSS-Selektoren und Farben an Ihre spezifischen Kategorienamen und das gewünschte Farbschema an.
Anpassen des „Boxen“-Stils
Wenn Sie den „Boxen“-Stil für Unterkategorien verwenden, können Sie ihn ähnlich anpassen:
Fügen Sie in Ihrem Vorlagen-CSS den folgenden Code hinzu:
.category-programming .category-boxes {
.category-box {
border: none;
}
.category-box-heading {
padding: 0;
border-radius: 3px;
img.logo {
display: none;
}
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 das Design Ihres Forums anzupassen.
Verwaltung der Kürzung von Kategoriebeschreibungen
Standardmäßig kürzt Discourse Kategoriebeschreibungen in den Kategorie-Boxen auf 4 Zeilen. Sie können dies mit benutzerdefiniertem CSS anpassen:
Um die Beschreibung auf zwei Zeilen zu verkürzen, fügen Sie dieses CSS zu Ihrer Vorlage hinzu:
.category-boxes .description .overflow {
max-height: 3em;
}
Passen Sie den Wert für max-height an, um die gewünschte Anzahl sichtbarer Zeilen zu erreichen.
Überlegungen für Mobilgeräte
Wenn Sie den Stil „Boxen mit Unterkategorien“ auf dem Desktop verwenden, beachten Sie, dass Themen auf Mobilgeräten möglicherweise weiterhin sichtbar sind. Dieses Verhalten ist möglicherweise beabsichtigt im Discourse-Design, um die Lesbarkeit auf kleineren Bildschirmen zu gewährleisten.
Wenn Sie das mobile Layout anpassen müssen, müssen Sie möglicherweise spezifisches CSS für mobile Ansichten hinzufügen oder einen Discourse-Theme-Entwickler für eine maßgeschneiderte Lösung konsultieren.