Custom css inside a post / adding custom classes

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:

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!

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:

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;
}
11 Likes

This is perfect; thank you so much!

4 Likes

Thanks @david!

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

In SCSS:

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

Or in plain CSS

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

Thank you @david! That does it.

1 Like