投稿内のカスタム CSS / カスタムクラスの追加

開発
1

投稿内の <div> にカスタムスタイルを適用することは可能でしょうか？

非ホワイトリストの class は除去されるという記事を目にしましたが、div や span に style= を追加しても効果がありませんでした。何か方法をご存知でしょうか？

基本的には、内部ツールから投稿を行うボットを持っており、それが通常の Discourse の投稿ではないことが一目でわかるように、ツールの外観に近い形で投稿したいと考えています。例えば、以下のようなものです：

image
image794×305 22.2 KB

見栄えを良くするためにいくつかのネストされた div や span を使用しており、それぞれに独自の CSS が関連付けられています。

理想的には、ボットが以下のようなものを投稿できるようにしたいです：

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

これらの追加の class はグローバルな Discourse CSS で指定できれば理想的ですが、すべてのスタイルを style タグにまとめるだけでも問題が解決します。

何か良いアイデアはありますか？よろしくお願いします！

「いいね！」 2
2

これは dev には適していないかもしれませんが、テーマでもプラグインでもないので、どこに配置すべきか迷っています。もし場所が間違っている場合は、移動させてください :slight_smile:

3

スタイルやクラスは削除されますが、投稿内の要素をターゲットにするために data-theme-* 属性を使用できます：

<div data-theme-bot>
   ここにコンテンツ
</div>
例えば、この段落は data-theme-bot div で囲まれています

そして、テーマ内では以下のようにターゲットにします：

div[data-theme-bot] {
  background-color: red;
}
「いいね！」 15
4

これは完璧です！本当にありがとうございます！

「いいね！」 4
5

@david さん、ありがとうございます！

ただ、この div 内のタグ（<a> や <span> など）のスタイルを変更するには、どのようにすればよいでしょうか？

6

SCSS の場合:

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

または、通常の CSS の場合:

div[data-theme-bot] a {
  background-color: red;
}
「いいね！」 4
7

@david ありがとうございます！それで解決しました。

「いいね！」 2
8

@david 正確な div をトピックに配置し、テーマコンポーネントに以下の CSS を追加しました。

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

インスペクタでは div data-theme-bot（< > で囲まれている）と表示されますが、計算された色は var(--primary) html となっています。

追加のセレクターを追加する必要がありますか、それとも管理設定を変更する必要がありますか？よろしくお願いいたします。

9

同じコードを試してみましたが、私の環境では問題なく動作しました。以下を試してみてください：

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

これで動作する場合は、テーマ、コンポーネント、またはプラグインなど、他の場所にある何らかの CSS がこのスタイルよりも優先度が高く、上書きされていたことを意味します。

「いいね！」 3
10

その通りですね。私のブラウザにキャッシュの問題があったようです。

このテクニックは、WordPress の投稿を Discourse に公開し、WordPress 版と似た見た目にする上で重要な要素です。

皆様、ありがとうございました。

「いいね！」 1