Einzigartiges Farbschema für eine Kategorie

Entwickler
1

Hallo.

Ich portiere ein älteres Forum auf Discourse und die ursprüngliche Seite hatte ein einzigartiges Theme (einschließlich eines einzigartigen Header-Logos) für eine ihrer Kategorien.

Meine aktuelle Lösung ist eine Theme-Komponente, die ungefähr so aussieht:

CSS:

body.category-target-category{
/// Ersetzen Sie die #hexcodes durch die Farbwerte Ihrer Wahl
  --primary: #primaryhexcode;
  --secondary: #secondaryhexcode;
  --tertiary: #tertiaryhexcode;
/// Fahren Sie für alle erforderlichen Farbwerte fort
}

HTML/JS:

    <script type="text/discourse-plugin" version="0.2.0">
        api.onPageChange(() => {
            var logo = document.getElementById("site-logo");
            var categories = document.getElementsByClassName("category-target-category");
            if(categories.length > 0)
            {
               logo.src = "category-specific-logo-url";
            }
            else
            {
                logo.src = "standard-logo-url";
            }
        });
    </script>

Derzeit muss ich jeden möglichen Farbwert in color_definitions.scss durchgehen, um sie zu überschreiben. Ich glaube, dass die Werte für diese Datei aus foundation/color_transformations.scss stammen, die sie aus den Werten in foundation/colors.scss generiert. Ich weiß, dass man die Root-Farbschemewerte entweder über das Admin-Menü oder in der about.json der Theme-Komponente überschreiben kann, aber ich glaube, dass diese Änderungen seitenweit erfolgen.

Gibt es eine effizientere Möglichkeit, eine bestimmte Kategorie anzupassen, anstatt alle über 100 Variablen in color_definitions.scss aufzulisten? Könnte beispielsweise die Datei foundation/colors.scss über eine Theme-Komponente modifiziert werden?

Vielen Dank für Ihre Hilfe!

2

Hallo @Rhababo :wave: Willkommen bei Meta :slight_smile:

Wenn du noch nicht mit Discourse-Themes und -Entwicklung gearbeitet hast, würde ich mit den folgenden Ressourcen beginnen:

Außerdem kannst du beispielsweise das Logo und die Header-Farbe und sogar die Icon-Farben für eine bestimmte Kategorie mit CSS-Code ändern, etwa so:

.category-<category-slug> .d-header {
    background: rgba(#ce0303, 0.90);
    .d-header-icons .d-icon  {
        color: #cccccc;
    }
    .header-sidebar-toggle button .d-icon {
        color: #cccccc;
        &:hover {
            color: #999999;
        }
    }
}    
    
.category-<category-slug> .d-header #site-logo.logo-small {
	content:url($small-logo);
}

.category-<category-slug> .d-header #site-logo.logo-big {
	content:url($big-logo);
}

Wenn du einfach ein neues Theme erstellst, kannst du Code hinzufügen und die Logos als Assets hochladen. <category-slug> ist der klein geschriebene Kategoriename, der im URL-Feld des Browsers erscheint (trenne über- und Unterkategorien mit Bindestrichen, wie in oberkategorie-unterkategorie).

Es gibt auch verschiedene Theme component’s wie diese, nach denen du suchen könntest:

3

Vielen Dank, Lilly, für deine Hilfe und deine Ressourcen!

Ich schätze die CSS-Anweisungen für das Logo sehr. Viel eleganter als mein klobiges Skript.

Deine Lösung wird für meinen Anwendungsfall absolut funktionieren. Obwohl die Auswahl jedes Elements und die direkte Codierung der Farbe dafür mühsam erschien. Ich frage mich, ob es eine Möglichkeit gibt, den Mechanismus zu nutzen, den Discourse verwendet, um seine Farbpalette aus den nur etwa 12 Basisfarben in colors.scss zu generieren. Ich denke, dies könnte ein Plugin anstelle einer Theme-Komponente erfordern, und das ist eine Herausforderung für einen anderen Tag.

Danke!