# Custom css inside a post / adding custom classes

**URL:** https://meta.discourse.org/t/custom-css-inside-a-post-adding-custom-classes/143072
**Category:** Development
**Created:** [March 2, 2020, 11:55am UTC](https://meta.discourse.org/t/custom-css-inside-a-post-adding-custom-classes/143072 "2020-03-02T11:55:09Z")
**Posts on this page:** 10
**Page:** 1

<div class="post-metadata">

### Author: ![Chris\_McLaughlin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/chris_mclaughlin/32/171502_2.png) [@Chris\_McLaughlin](https://meta.discourse.org/u/Chris_McLaughlin)
#### Post date: [March 2, 2020, 11:55am UTC](https://meta.discourse.org/t/custom-css-inside-a-post-adding-custom-classes/143072/1 "2020-03-02T11:55:09Z")

</div>

Is it possible to give a \<div\> inside a post some custom styling?  
I’ve [seen](https://meta.discourse.org/t/adding-custom-class-to-img-tag/21425/7) that any non-whitelisted `class`es are stripped out, and I’ve tried adding`style=` 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](https://global.discourse-cdn.com/meta/original/3X/f/1/f19e2334a1c3497d43002d7645db04d457ce7ad0.png)

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:

```plaintext
<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 `class`es 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!

---

<div class="post-metadata">

### Author: ![Chris\_McLaughlin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/chris_mclaughlin/32/171502_2.png) [@Chris\_McLaughlin](https://meta.discourse.org/u/Chris_McLaughlin)
#### Post date: [March 2, 2020, 11:57am UTC](https://meta.discourse.org/t/custom-css-inside-a-post-adding-custom-classes/143072/2 "2020-03-02T11:57:37Z")

</div>

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 🙂

---

<div class="post-metadata">

### Author: ![david](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/david/32/157490_2.png) [@david](https://meta.discourse.org/u/david)
#### Post date: [March 2, 2020, 12:19pm UTC](https://meta.discourse.org/t/custom-css-inside-a-post-adding-custom-classes/143072/3 "2020-03-02T12:19:50Z")

</div>

> [@Chris\_McLaughlin](#):
>
> I’ve [seen](https://meta.discourse.org/t/adding-custom-class-to-img-tag/21425/7) that any non-whitelisted `class` es are stripped out

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

```plaintext
<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:

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

```

---

<div class="post-metadata">

### Author: ![Chris\_McLaughlin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/chris_mclaughlin/32/171502_2.png) [@Chris\_McLaughlin](https://meta.discourse.org/u/Chris_McLaughlin)
#### Post date: [March 2, 2020, 1:12pm UTC](https://meta.discourse.org/t/custom-css-inside-a-post-adding-custom-classes/143072/4 "2020-03-02T13:12:04Z")

</div>

This is perfect; thank you so much!

---

<div class="post-metadata">

### Author: ![Denis\_Heraud](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/denis_heraud/32/119623_2.png) [@Denis\_Heraud](https://meta.discourse.org/u/Denis_Heraud)
#### Post date: [April 7, 2020, 2:53pm UTC](https://meta.discourse.org/t/custom-css-inside-a-post-adding-custom-classes/143072/5 "2020-04-07T14:53:03Z")

</div>

Thanks @david!

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

---

<div class="post-metadata">

### Author: ![david](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/david/32/157490_2.png) [@david](https://meta.discourse.org/u/david)
#### Post date: [April 7, 2020, 2:59pm UTC](https://meta.discourse.org/t/custom-css-inside-a-post-adding-custom-classes/143072/6 "2020-04-07T14:59:06Z")

</div>

> [@Denis\_Heraud](#):
>
> `<a>` or `<span>` ) within this div

In SCSS:

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

```

Or in plain CSS

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

```

---

<div class="post-metadata">

### Author: ![Denis\_Heraud](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/denis_heraud/32/119623_2.png) [@Denis\_Heraud](https://meta.discourse.org/u/Denis_Heraud)
#### Post date: [April 7, 2020, 3:00pm UTC](https://meta.discourse.org/t/custom-css-inside-a-post-adding-custom-classes/143072/7 "2020-04-07T15:00:25Z")

</div>

> [@david](#):
>
> div[data-theme-bot] a { background-color: red; }

Thank you @david! That does it.

---

<div class="post-metadata">

### Author: ![RichardC](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/richardc/32/216860_2.png) [@RichardC](https://meta.discourse.org/u/RichardC)
#### Post date: [April 16, 2021, 9:18pm UTC](https://meta.discourse.org/t/custom-css-inside-a-post-adding-custom-classes/143072/8 "2021-04-16T21:18:48Z")

</div>

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

```plaintext
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.

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [April 17, 2021, 1:28am UTC](https://meta.discourse.org/t/custom-css-inside-a-post-adding-custom-classes/143072/9 "2021-04-17T01:28:11Z")

</div>

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

```css
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.

---

<div class="post-metadata">

### Author: ![RichardC](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/richardc/32/216860_2.png) [@RichardC](https://meta.discourse.org/u/RichardC)
#### Post date: [April 17, 2021, 12:08pm UTC](https://meta.discourse.org/t/custom-css-inside-a-post-adding-custom-classes/143072/10 "2021-04-17T12:08:33Z")

</div>

> [@awesomerobot](#):
>
> I just tried the same code out and it works ok for me.

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.