CSS personalizado dentro de um post / adicionando classes personalizadas

Dev
1

É possível aplicar algum estilo personalizado a um

dentro de uma postagem?

Vi aqui que qualquer class não incluída na lista branca é removida, e tentei adicionar style= aos meus divs e spans sem sucesso. Alguém sabe se existe uma maneira de fazer isso?

Basicamente, tenho um bot que posta a partir de uma ferramenta interna e gostaria que ele publicasse algo com uma aparência semelhante à da ferramenta, para deixar claro que não se trata de uma postagem normal do Discourse, algo assim:

image
image794×305 22.2 KB

Ele possui alguns divs/spans aninhados para ficar visualmente agradável, e cada um tem seu próprio CSS associado.
Idealmente, se o bot pudesse postar algo assim:

<div class="mytool">
  <div class="item">
    <div class="name">Machine64</div>
    <div class="message">Operação Top Secret executada com sucesso</div>
  </div>
  <div class="item">
    <div class="name">Device 08</div>
    <div class="message">Operação de teste falhou às 16:22</div>
  </div>
</div>

Essas class extras seriam especificadas no CSS global do Discourse, mas mesmo que eu pudesse agrupar todo o meu estilo em tags style, isso resolveria meu problema.

Alguma ideia de como posso fazer isso? Obrigado!

2

Isso pode não ser apropriado para dev, mas não tinha certeza de onde deveria ficar, já que não é realmente um tema nem um plugin! Por favor, mova se estiver no lugar errado :slight_smile:

3

Estilos e classes são removidos, mas você pode usar os atributos data-theme-* para direcionar elementos em postagens:

<div data-theme-bot>
   Conteúdo aqui
</div>
Por exemplo, este parágrafo está envolvido em uma div data-theme-bot

E então, em um tema, direcione-o assim:

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

Isso é perfeito; muito obrigado!

5

Obrigado, @david!

No entanto, como eu faria para alterar o estilo de tags (como <a> ou <span>) dentro deste div?

6

Em SCSS:

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

Ou em CSS puro

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

Obrigado, @david! Isso resolveu.

8

@david Coloquei seu div exato em um tópico e adicionei este CSS a um componente de tema:

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

O inspeção mostra div data-theme-bot (envolvido por < >), mas a cor computada é var(--primary) html.

Preciso adicionar seletores adicionais ou alterar uma configuração de Admin? Obrigado.

9

Acabei de testar o mesmo código e funciona bem para mim. Talvez você tente:

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

Se funcionar, significa que algum CSS em outro lugar (um tema, componente ou plugin) tinha maior especificidade que este estilo, então ele estava sendo sobrescrito.

10

Você tem razão. Acredito que eu tinha um problema de cache no meu navegador.

Esse truque é um elemento importante para publicar meus posts do WordPress no Discourse e fazê-los parecerem semelhantes à versão do WordPress.

Obrigado a todos.