You can add banners in the component settings by defining the category right below the banner, a banner color and the heading text. There’s also an option to hide the default colored borders:
To add styles you can select the general class, as well as specific banners by category-id:
.category list .category-list-banner {
&.category-5 { [style a specific banner] }
&:after { [style the headings]}
}
This component only adds layout elements to the category page. So you can’t refer to these headings anywhere else on your site. Another caution: There’s no default page style Categories Only on mobile. It will always show featured topics as well.
That looks like expected behavior… The color slot takes any value that you can use as background-color in CSS. So when you give a hex value, it will stay the same color in different modes and themes.
If you actually don’t want a background color, you should state none or transparent.
If you want a background color that changes with modes, you’d need to state it with a CSS custom property: you could use one of Discourse’s pre-defined ones like var(--secondary-high). Or define some yourself, as explained in
Hallo, ich liebe es zu sehen, was Sie geschaffen haben. Aber es ist erlaubt, mich auch anzuerkennen und mich nicht nur auszurauben und einen Teil meiner Arbeit zu nutzen…
Schön, dass dir die Komponente gefällt! Ich bin mir nicht sicher, warum du mir vorwirfst, dich bestohlen zu haben, indem ich deine Arbeit verwendet habe…?
Die Erstellung dieser Komponente wurde von diesem Thema inspiriert:
Ich habe den Ersteller auf deine Lösung verwiesen, war dann aber daran interessiert, wie man dies ohne hartcodierte Vorlagen lösen kann und indem man Werte aus einer Einstellungsliste innerhalb von SCSS dekonstruiert. Der Komponentencode dreht sich also im Wesentlichen um diese Lösung: https://meta.discourse.org/t/how-to-add-settings-to-your-discourse-theme/82557/52?u=nolo
Aber auf jeden Fall: Wenn du das Gefühl hast, ich hätte etwas von deiner Arbeit verwendet und ich es versäumt hätte, Credits zu geben, lass es mich bitte wissen und ich werde den ersten Beitrag aktualisieren
Ja, bitte, ich würde mich über eine Art von Anerkennung freuen. Aber es liegt an Ihnen. Ansonsten sieht es gut aus und ich werde diese Theme-Komponente in meinem Beitrag empfehlen, da dies neuen Benutzern den Einstieg erleichtert.
@ Nolo
Gibt es im TC oder mit CSS im Theme eine Möglichkeit, den Titeltext linksbündig auszurichten, genau wie in Ihrem zweiten Beispiel.
Gibt es auch eine Möglichkeit (wenn kein Bannerbild verwendet wird), die Kopfzeile auf die Dicke einer Textzeile zu reduzieren.
Und wenn ja, können Sie die Textgröße so anpassen, dass sie nicht ganz so groß ist?
Ja sicher, du kannst die Banner mit diesen Klassen gestalten:
Wenn du bestehende Deklarationen auf der allgemeinen Klasse überschreiben möchtest, müsstest du die !important-Eigenschaft verwenden. Z. B. für die von dir erwähnten Stile:
Das liegt daran, dass die Stile tatsächlich auf den spezifischen Bannern deklariert sind. Ich könnte das in der Komponente verbessern, aber vorerst müsstest du mit important überschreiben.
Vielen Dank für diese Komponente!! Ich entwickle ein politisches Forum und die Möglichkeit, diese Art von Trennung anzuwenden, ist entscheidend.
Obwohl es bereits eine enorme Verbesserung für mein Forum darstellt, wäre es ein großer Unterschied, wenn die Header über eine URL referenziert werden könnten, da dies die Erstellung von Schaltflächen am oberen Rand des Forums ermöglichen würde, von denen aus der Benutzer leicht auf derselben Seite navigieren könnte. Das wäre eine extrem agile Funktionalität, wenn das Forum (hoffentlich) viel größer wird. Ist das derzeit möglich?
Danke für den Vorschlag @lisandro_iaffar. Diese Komponente bietet jedoch nur eine schlanke Lösung, die keine HTML-Vorlagen ändert. Wenn Sie auf die Abschnitte verweisen möchten, müssten Sie einen Ansatz wie den von GitHub - discourse/discourse-minimal-category-boxes angebotenen verwenden.
Ich bin gespannt, das auszuprobieren, da ich etwas zu viele Kategorien erstellt habe und die Möglichkeit, sie in Gruppen zu organisieren, eine große Hilfe sein wird.
Ich werde es wissen, wenn ich es versuche. Dies könnte auch eine Möglichkeit sein, alte, weniger genutzte Kategorien von der Titelseite zu entfernen, oder? Sie wären weiterhin über die neue Seitenleiste verfügbar.
Ja, sicher Tatsächlich treffe ich fast immer eine Auswahl von Kategorien auf verschiedenen Seitenelementen (Seitenleiste, Kopfzeile, Navigationsleiste, Kategorieseite usw.). Es ist wie die Website-Struktur einer Webseite. Es ist wichtig, dass sie gut organisiert ist, aber sie muss nicht Ihre UI-Präsentation bestimmen.
Hallo @manuel, ich möchte wissen, ob diese wunderbare Komponente nach den Sprachaktualisierungen noch funktioniert. Ich habe sie installiert und sie funktioniert bei mir nicht. Vielen Dank im Voraus.
This component only adds layout elements to the category page. So you can’t refer to these headings anywhere else on your site. Another caution: There’s no default page style Categories Only on mobile. It will always show featured topics as well.
Credits: The component was inspired by the look of the Cfx.re Community and by @godgutten’s original solution to achieve that look as shared in How do I add category banners?
Tatsächlich treffe ich fast immer eine Auswahl von Kategorien auf verschiedenen Seitenelementen (Seitenleiste, Kopfzeile, Navigationsleiste, Kategorieseite usw.). Es ist wie die Website-Struktur einer Webseite. Es ist wichtig, dass sie gut organisiert ist, aber sie muss nicht Ihre UI-Präsentation bestimmen.
