CSS personalizado dentro de um post / adicionando classes personalizadas

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

This is perfect; thank you so much!

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

Thank you @david! That does it.

2 curtidas
8

@david Coloquei seu div exato em um tópico e adicionei este CSS a um componente de tema:

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

O inspeção mostra div data-theme-bot (envolvido por < >), mas a cor computada é var(--primary) html.

Preciso adicionar seletores adicionais ou alterar uma configuração de Admin? Obrigado.

9

Acabei de testar o mesmo código e funciona bem para mim. Talvez você tente:

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

Se funcionar, significa que algum CSS em outro lugar (um tema, componente ou plugin) tinha maior especificidade que este estilo, então ele estava sendo sobrescrito.

3 curtidas
10

Você tem razão. Acredito que eu tinha um problema de cache no meu navegador.

Esse truque é um elemento importante para publicar meus posts do WordPress no Discourse e fazê-los parecerem semelhantes à versão do WordPress.

Obrigado a todos.

1 curtida