Пользовательские CSS внутри поста / добавление пользовательских классов

Разработка
1

Возможно ли добавить кастомные стили к <div> внутри поста?

Я видел, что любые классы class, не входящие в белый список, удаляются. Я также пробовал добавлять атрибут style= к своим div и span, но безрезультатно. Знает ли кто-нибудь, есть ли способ это сделать?

По сути, у меня есть бот, который публикует сообщения из внутреннего инструмента, и я хотел бы, чтобы они выглядели как сообщения из этого инструмента, чтобы было очевидно, что это не обычный пост в 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 были бы определены в глобальном CSS Discourse. Но даже если бы я мог объединить все стили в теги style, это решило бы мою проблему.

Есть ли какие-то идеи, как это сделать? Спасибо!

2

Возможно, это не совсем подходит для dev, но я не был уверен, куда это лучше поместить, так как это ни совсем тема, ни плагин! Пожалуйста, переместите, если это не там, где нужно :slight_smile:

3

Стили и классы удаляются, но вы можете использовать атрибуты data-theme-* для таргетинга элементов в постах:

<div data-theme-bot>
   Контент здесь
</div>
Например, этот абзац обернут в div с атрибутом data-theme-bot.

А затем в теме таргетить его так:

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

Это идеально, большое спасибо!

5

Спасибо @david!

Однако, как мне изменить стили для тегов (например, <a> или <span>) внутри этого div?

6

В SCSS:

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

Или в обычном CSS:

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

Спасибо, @david! Это именно то, что нужно.

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-правило с большим приоритетом, чем у этого стиля, поэтому оно его переопределяет.

10

Вы правы. Думаю, у меня была проблема с кэшем в браузере.

Этот трюк — важный элемент для публикации моих записей из WordPress в Discourse, чтобы они выглядели так же, как в версии для WordPress.

Спасибо всем.