CSS personnalisé dans un article / ajout de classes personnalisées

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 « J'aime »
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 « J'aime »
4

This is perfect; thank you so much!

4 « J'aime »
5

Merci @david !

Cependant, comment procéder pour modifier le style des balises (telles que <a> ou <span>) à l’intérieur de cette div ?

6

En SCSS :

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

Ou en CSS pur :

div[data-theme-bot] a {
  background-color: red;
}
4 « J'aime »
7

Merci @david ! Ça fonctionne.

2 « J'aime »
8

@david J’ai placé votre div exacte dans un sujet et ajouté ce CSS à un composant de thème :

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

L’inspecteur affiche div data-theme-bot (entouré de < >), mais la couleur calculée est var(--primary) html.

Dois-je ajouter d’autres sélecteurs ou modifier un paramètre d’administration ? Merci.

9

Je viens d’essayer le même code et cela fonctionne correctement de mon côté. Vous pouvez essayer ceci :

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

Si cela fonctionne, cela signifie qu’un autre CSS (un thème, un composant ou un plugin) avait une spécificité supérieure à ce style, ce qui a entraîné son écrasement.

3 « J'aime »
10

Vous avez raison. Je pense que j’avais un problème de cache dans mon navigateur.

Cette astuce est un élément important pour publier mes articles WordPress sur Discourse et leur donner un aspect similaire à la version WordPress.

Merci à tous.

1 « J'aime »