Custom css inside a post / adding custom classes

開発
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
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
4

This is perfect; thank you so much!

「いいね！」 4
5

Thanks @david!

However, how would I go about changing styling for tags (such as <a> or <span>) within this div?

6

In SCSS:

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

Or in plain CSS

div[data-theme-bot] a {
  background-color: red;
}
「いいね！」 4
7

Thank you @david! That does it.

「いいね！」 2
8

@david I put your exact div into a topic, and added this css to a theme component

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

The inspector shows div data-theme-bot (surrounded by < >) but the computed color is var(--primary) html

Do I need to add additional selectors, or change an Admin Setting? Thanks.

9

I just tried the same code out and it works ok for me. Maybe try:

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

If that works then it means some CSS somewhere else (a theme, component, or plugin) was more specific than this style, so it was being overridden.

「いいね！」 3
10

You’re right. I think I had a cache problem in my browser.

This trick is an important element to publishing my WordPress posts in Discourse and having them look similar to the WordPress version.

Thanks to all.

「いいね！」 1