Benutzerdefiniertes CSS in einem Beitrag hinzufügen / benutzerdefinierte Klassen

Entwickler
1

Ist es möglich, einem <div> innerhalb eines Beitrags ein benutzerdefiniertes Styling zu geben?

Ich habe gesehen, dass alle nicht gelisteten class-Attribute entfernt werden. Ich habe auch versucht, style= zu meinen divs und spans hinzuzufügen, leider ohne Erfolg. Weiß jemand, ob es eine Möglichkeit gibt, das zu erreichen?

Im Grunde habe ich einen Bot, der Beiträge von einem internen Tool postet, und ich möchte, dass diese Beiträge so aussehen wie das Tool, damit klar ist, dass es sich nicht um einen normalen Discourse-Beitrag handelt. Etwas in der Art:

image
image794×305 22.2 KB

Es enthält ein paar verschachtelte divs und spans, damit es gut aussieht, und jedes hat sein eigenes zugehöriges CSS.

Idealerweise könnte der Bot so etwas wie folgendes posten:

<div class="mytool">
  <div class="item">
    <div class="name">Machine64</div>
    <div class="message">Top Secret operation has executed sucessfully</div>
  </div>
  <div class="item">
    <div class="name">Device 08</div>
    <div class="message">Test operation failed at 16:22</div>
  </div>
</div>

Dabei würden diese zusätzlichen class-Attribute im globalen Discourse-CSS definiert sein. Aber selbst wenn ich mein gesamtes Styling in style-Tags packen könnte, würde das mein Problem lösen.

Habt ihr Ideen, wie ich das umsetzen könnte? Danke!

2

Das ist vielleicht nicht für dev geeignet, aber ich war mir nicht sicher, wo es hingehört, da es weder wirklich Theming noch ein Plugin ist! Bitte verschieben, falls es am falschen Ort ist :slight_smile:

3

Styles/Classen werden entfernt, aber du kannst data-theme-*-Attribute verwenden, um Elemente in Beiträgen anzusprechen:

<div data-theme-bot>
   Inhalt hier
</div>
Zum Beispiel ist dieser Absatz in ein data-theme-bot-Element eingebettet.

Und dann kannst du es in einem Theme so ansprechen:

div[data-theme-bot] {
  background-color: red;
}
4

Das ist perfekt, vielen Dank!

5

Danke @david!

Wie gehe ich jedoch vor, um das Styling für Tags (wie <a> oder <span>) innerhalb dieses div zu ändern?

6

In SCSS:

div[data-theme-bot] {
  a {
    background-color: red;
  }
}

Oder in normalem CSS

div[data-theme-bot] a {
  background-color: red;
}
7

Danke, @david! Das hat es erledigt.

8

@david Ich habe dein genaues div in ein Thema eingefügt und diesem Theme-Komponenten folgendes CSS hinzugefügt:

div[data-theme-bot] {
  color: red;
}

Der Inspektor zeigt div data-theme-bot (umgeben von < >) an, aber die berechnete Farbe ist var(--primary) html.

Muss ich zusätzliche Selektoren hinzufügen oder eine Admin-Einstellung ändern? Danke.

9

Ich habe den gleichen Code gerade ausprobiert, und bei mir funktioniert er einwandfrei. Versuchen Sie vielleicht Folgendes:

div[data-theme-bot] {
  color: red !important;
}

Wenn das funktioniert, bedeutet das, dass an anderer Stelle eine CSS-Regel (aus einem Theme, einer Komponente oder einem Plugin) spezifischer war als dieser Stil und ihn daher überschrieben hat.

10

Du hast recht. Ich glaube, ich hatte ein Cache-Problem in meinem Browser.

Dieser Trick ist ein wichtiger Baustein, um meine WordPress-Beiträge in Discourse zu veröffentlichen und dabei ein Erscheinungsbild zu erzielen, das der WordPress-Version ähnelt.

Vielen Dank an alle.