CSS personalizzato all'interno di un post / aggiunta di classi personalizzate

Sviluppatore
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 Mi Piace
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 Mi Piace
4

This is perfect; thank you so much!

4 Mi Piace
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 Mi Piace
7

Thank you @david! That does it.

2 Mi Piace
8

@david Ho inserito il tuo esatto div in un argomento e aggiunto questo CSS a un componente del tema

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

L’ispettore mostra div data-theme-bot (racchiuso tra < >), ma il colore calcolato è var(--primary) html

Devo aggiungere selettori aggiuntivi o modificare un’impostazione dell’amministratore? Grazie.

9

Ho appena provato lo stesso codice e funziona correttamente per me. Forse prova:

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

Se funziona, significa che qualche CSS da qualche altra parte (un tema, un componente o un plugin) aveva una specificità maggiore rispetto a questo stile, quindi veniva sovrascritto.

3 Mi Piace
10

Hai ragione. Credo di aver avuto un problema di cache nel mio browser.

Questo trucco è un elemento importante per pubblicare i miei post di WordPress su Discourse e farli apparire simili alla versione WordPress.

Grazie a tutti.

1 Mi Piace