Beste Praktiken für die Erstellung individueller CSS-Stile für Abschnitte von Beiträgen

Präambel

Während ich meine Community-Instanz von Discourse einrichtete und anpasste, suchte ich nach Wegen, die unglaubliche Leistung der Plattform zu nutzen, um mein eigenes Glück sowie das meiner Benutzer zu steigern.

Eine Sache, die ich tun möchte, wäre, eine benutzerdefinierte Signatur zu privaten Nachrichten hinzuzufügen, die ich sende, und sie zu „unterschreiben“. Ich möchte kein Bild verwenden, sondern meinen Namen in einer Google-Schriftart.

Wenn dies funktioniert, hilft es mir zu verstehen, wie ich Snippets und Ähnliches meiner Community für ihre Verwendung beim Verfassen von Beiträgen anbieten kann, sodass das Wissen allgemein ist, auch wenn die Frage spezifisch ist.

Mein Grund, die Frage zu stellen, ist, dass ich, bevor ich Zeit damit verbringe, diese Blöcke für die Verwendung zu erstellen, sicherstellen möchte, dass dies der beste Weg ist. Denn wenn mir einige clevere Ideen einfallen, denke ich darüber nach, einige Beispiele zu teilen, um eine Diskussion zu beginnen, damit ich noch mehr clevere Ideen von anderen, intelligenteren Leuten als mir, gewinnen kann. :slight_smile:

Die Frage: Wie kann man Text in einem Beitrag in einen Block einfügen, der über CSS angesprochen werden kann?

Was ich bisher gefunden habe

Ich bin auf das folgende Thema gestoßen:

Benutzerdefiniertes CSS in einem Beitrag / Hinzufügen benutzerdefinierter Klassen

Aus diesem Thema habe ich diese Antwort entnommen:

Dies scheint zu funktionieren, aber ich bin neugierig, ob es derzeit als beste Praxis/Methode dafür gilt.

Während ich hier bin, eine spezifische Frage, die leicht vom Thema abweicht, aber themenbezogen ist:

Ich „missbrauche“ eine Anpassung, um meine Signaturidee zum Laufen zu bringen, nur funktioniert sie nicht, und ich bin neugierig, ob jemand zufällig Einblicke hat.

Ich lade benutzerdefinierte Google-Schriftarten mit einem Plugin, von dem ich weiß, dass es funktioniert, weil mein gesamtes Forum diese Schriftarten erfolgreich verwendet. Ich habe dies verwendet, um „Playwrite USA Traditional“ zu laden.

Ich habe das folgende CSS in meinem Thema:

div[data-theme-ieh] {
    font-family: "Playwrite USA Traditional";
    text-align: right;
}

Mein div in meinem Beispielbeitrag ist tatsächlich rechtsbündig, aber es verwendet Arial oder etwas Ähnliches, nicht die Schriftart meines Themas oder Playwrite.

Fehlt mir etwas Dummes in meiner Einrichtung, oder gibt es etwas anderes, das Sie sich vorstellen können, das ich vermisse? Dies ist keine Discourse-Frage.

Gibt es außerdem eine bessere Möglichkeit, eine Google-Schriftart für die Verwendung auf meiner Website zu laden?

Ich empfehle, sich Generic bbcode wrapper for theme components anzusehen

Mir fällt nichts ein, basierend auf dem, was Sie hier geteilt haben. Wenn Sie einen Link zum Live-Forum teilen können, wird es uns leichter fallen, Ihnen bei der Fehlersuche zu helfen.

1 „Gefällt mir“

Der Einbettungscode von https://fonts.google.com/share?selection.family=Playwrite+US+Trad:wght@100..400/ sieht so aus, als sollte er \"Playwrite US Trad\" lauten

// <uniquifier>: Verwenden Sie einen eindeutigen und beschreibenden Klassennamen
// <weight>: Verwenden Sie einen Wert von 100 bis 400

.playwrite-us-trad-<uniquifier> {
  font-family: "Playwrite US Trad", cursive;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
1 „Gefällt mir“

Ooh, das sieht ziemlich schick aus. Danke für den Hinweis!

Wirklich, das war alles, was ich mir erhofft hatte. Ich wollte keine Zeit verschwenden, aber falls es etwas wirklich Offensichtliches gab. lol.

Ich… dummes Google… ugh. Ich habe mich auf die Anweisung der Komponente konzentriert, um sicherzustellen, dass ich den Namen einschließlich Großbuchstaben korrekt hatte, dass ich nicht einmal daran gedacht habe, den TATSÄCHLICHEN Namen zu überprüfen, den Google möglicherweise verwendet. d’oh.

Für das Protokoll: Das Laden des richtigen Font-Namens und die Referenzierung des richtigen Font-Namens ergeben die ursprünglich erwarteten Ergebnisse.

Und jetzt kann ich meine Beiträge „signieren“:


Danke :slight_smile:

1 „Gefällt mir“

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.