Wie passe ich das Erscheinungsbild von Abschnitten wie Amazon an?

Beitragen UX
1

Hallo, Community!

Ich habe kürzlich Discourse installiert und möchte das Erscheinungsbild anpassen.

Ich weiß jedoch nicht, wie ich Gruppen von Abschnitten mit Einrückungen von anderen Abschnitten auswählen kann, und auch nicht, wie ich eine Liste von Unterabschnitten in einer Spalte erstelle.

Ich habe die Einstellungen im Admin-Bereich durchsucht, konnte aber nichts Ähnliches finden, das mir helfen könnte.

Ich wäre für jede Hilfe dankbar.
Ich habe angefangen, diese Plattform zu studieren.

Screenshot at Oct 25 21-26-29
Screenshot at Oct 25 21-26-292406×1504 387 KB

Vielen Dank!

2

Um beispielsweise eine Liste von Unterabschnitten in eine einzelne Spalte zu verwandeln, muss ich die Werte hier ändern (category-list.scss)

image
image594×964 117 KB

auf diese Werte.

Aber wie kann ich das korrekt über das Admin-Panel erledigen, ohne die Dateien selbst auf dem Server zu ändern?

display: block;
align-items: baseline;
margin-right: 0;

1 „Gefällt mir“
3

image
image2512×858 145 KB

Ich habe das richtig verstanden – soll das so gemacht werden?
Ist das der richtige Weg, um das Problem zu lösen?

4

Dies ist das Standard-CSS für Unterkategorien. Weisen Sie einfach im Dialog zur Bearbeitung einer Kategorie eine „Übergeordnete Kategorie

1 „Gefällt mir“
5

Ich verstehe wirklich nicht, was die Farbe damit zu tun hat.
Standardmäßig werden Unterkategorien wie folgt angezeigt: nacheinander, horizontal

image
image918×394 38 KB

Nachdem ich das oben genannte CSS angewendet habe, sind die Unterabschnitte vertikal ausgerichtet, wie ich es wollte.

image
image916×502 39.9 KB

Ich wollte nur wissen: Ist das Hinzufügen von CSS in der von mir angegebenen Form über das Admin-Panel der richtige Weg?

Und die zweite Hauptfrage ist, wie man die Abschnitte selbst durch Einzüge voneinander trennt, wie im Beispiel des Screenshots vom Amazon-Forum?

1 „Gefällt mir“
7

Ah, ich verstehe.

Das Richtige ist, dieses CSS in eine Theme-Komponente einzufügen, was nur geringfügig anders ist als das, was Sie tun!

Wenn Sie das helle Theme bearbeiten, sind die Änderungen im dunklen Theme nicht sichtbar.

Erstellen Sie eine einzige Theme-Komponente für alle benutzerdefinierten Anpassungen Ihrer Site!

4 „Gefällt mir“
8

Vielen Dank für den Rat, wie man es besser als Komponenten aufteilt.

Wenn wir über ein konkretes Beispiel sprechen: Amazon – es geht nicht nur um CSS, auch ihr Markup unterscheidet sich vom Standard (HTML).

Wie kann man die gleiche Darstellung schnell umsetzen?

Leider habe ich nur oberflächliche Kenntnisse im Layout, ich bin Backend-Entwickler, daher fällt mir das Layout schwer.

Kann ich dieses Layout übertragen, ohne den Code der Quelldateien selbst zu ändern?

9

Ich habe viele verschiedene fertige Themes durchsucht,
aber die meisten sehen sich sehr ähnlich, und ein so kompaktes wie Amazon habe ich nicht gefunden. Vielleicht können wir das gemeinsam mit der Community umsetzen? Mit Einrückungen zwischen den Abschnitten wirkt es kompakter.

10

Ihr Markup ist teilweise anders, weil sie ihre Seite offenbar schon seit geraumer Zeit nicht aktualisiert haben.

Mit diesem CSS kommst du beim Stil der Unterkategorien schon weit:

.category-list .subcategories .subcategory {
  display: flex;
}

Wenn du Änderungen am Markup vornehmen möchtest, musst du herausfinden, wie Template-Overrides in Discourse funktionieren. Das ist im fortgeschrittenen Abschnitt des Entwicklerhandbuchs für Discourse-Themen zu finden.