Benutzerdefiniertes CSS in einem Beitrag hinzufügen / benutzerdefinierte Klassen

Entwickler
1

Is it possible to give a <div> inside a post some custom styling?
I’ve seen that any non-whitelisted classes are stripped out, and I’ve tried addingstyle= to my divs and spans to no avail , so does anyone know if there’s a way to do that?

Basically I have a bot that posts from an internal tool and I’d like to have it post with something that looks like the tool to make it obvious that it’s not a regular disourse post, something like this:

image
image794×305 22.2 KB

It’s got a couple of nested divs/spans to make it look nice and they each have their own associated css.
Ideally if the bot could post something like this:

<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>

those extra classes would be specified in the global discourse css, but even if I could lump all my styling into style tags, that would solve my problem.

Any ideas on how I could do this? Thanks!

2 „Gefällt mir“
2

This might not be appropriate for dev, but I wasn’t sure where it should go as it’s not really theme-ing or plugin either! Please move if it’s in the wrong place :slight_smile:

3

Styles/classes are stripped out, but you can use data-theme-* attributes to target things in posts:

<div data-theme-bot>
   Content here
</div>
For example, this paragraph is wrapped in a data-theme-bot div

And then in a theme, target it like:

div[data-theme-bot] {
  background-color: red;
}
15 „Gefällt mir“
4

This is perfect; thank you so much!

4 „Gefällt mir“
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;
}
4 „Gefällt mir“
7

Danke, @david! Das hat es erledigt.

2 „Gefällt mir“
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.

3 „Gefällt mir“
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.

1 „Gefällt mir“