Custom css inside a post / adding custom classes

Dev
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 Likes
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;
}
14 Likes
4

This is perfect; thank you so much!

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

Thank you @david! That does it.

2 Likes
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 Likes
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 Like