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

Dev
1

Est-il possible d’appliquer un style personnalisé à un <div> placé dans un message ?
J’ai vu que toutes les class non autorisées sont supprimées, et j’ai essayé d’ajouter style= à mes <div> et <span> sans succès. Quelqu’un sait-il s’il existe une méthode pour y parvenir ?

En résumé, j’ai un bot qui publie depuis un outil interne et j’aimerais qu’il publie quelque chose qui ressemble à cet outil, afin qu’il soit évident qu’il ne s’agit pas d’un message Discourse ordinaire, quelque chose comme ceci :

image
image794×305 22.2 KB

Il contient quelques <div> et <span> imbriqués pour un meilleur rendu, chacun ayant son propre CSS associé.
Idéalement, si le bot pouvait publier quelque chose comme ceci :

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

ces class supplémentaires seraient définies dans le CSS global de Discourse, mais même si je pouvais regrouper tout mon style dans des balises style, cela résoudrait mon problème.

Avez-vous des idées sur la manière de procéder ? Merci !

2

Cela pourrait ne pas convenir à dev, mais je n’étais pas sûr de l’endroit où le placer, car ce n’est vraiment ni un thème ni un plugin ! Veuillez le déplacer s’il est au mauvais endroit :slight_smile:

3

Les styles et les classes sont supprimés, mais vous pouvez utiliser les attributs data-theme-* pour cibler des éléments dans les publications :

<div data-theme-bot>
   Contenu ici
</div>
Par exemple, ce paragraphe est enveloppé dans un div data-theme-bot.

Ensuite, dans un thème, ciblez-le ainsi :

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

C’est parfait, merci beaucoup !

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;
}
7

Merci @david ! Ça fonctionne.

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.

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.