CSS personalizzato all'interno di un post / aggiunta di classi personalizzate

Sviluppatore
1

È possibile applicare uno stile personalizzato a un div all’interno di un post?
Ho visto che qualsiasi class non in lista bianca viene rimossa, e ho provato ad aggiungere style= ai miei div e span senza successo. Qualcuno sa se esiste un modo per farlo?

In sostanza, ho un bot che pubblica da uno strumento interno e vorrei che i post avessero un aspetto simile allo strumento, per rendere evidente che non si tratta di un normale post di Discourse, qualcosa come questo:

image
image794×305 22.2 KB

Ci sono diversi div e span nidificati per renderlo gradevole, ognuno con il proprio CSS associato.
Idealmente, se il bot potesse pubblicare qualcosa di simile a questo:

<div class="mytool">
  <div class="item">
    <div class="name">Machine64</div>
    <div class="message">Operazione top secret eseguita con successo</div>
  </div>
  <div class="item">
    <div class="name">Device 08</div>
    <div class="message">Test fallito alle 16:22</div>
  </div>
</div>

quelle class aggiuntive verrebbero specificate nel CSS globale di Discourse, ma anche se potessi raggruppare tutti gli stili nei tag style, questo risolverebbe il mio problema.

Avete qualche idea su come farlo? Grazie!

2

Questo potrebbe non essere appropriato per dev, ma non ero sicuro di dove dovesse andare, dato che non è né un tema né un plugin! Spostalo pure se si trova nel posto sbagliato :slight_smile:

3

Gli stili e le classi vengono rimossi, ma puoi utilizzare gli attributi data-theme-* per selezionare elementi nei post:

<div data-theme-bot>
   Contenuto qui
</div>
Ad esempio, questo paragrafo è racchiuso in un div data-theme-bot

E poi, in un tema, puoi selezionarlo così:

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

È perfetto, grazie mille!

5

Grazie @david!

Tuttavia, come potrei modificare lo stile dei tag (come <a> o <span>) all’interno di questo div?

6

In SCSS:

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

Oppure in CSS puro

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

Grazie @david! Funziona.

8

@david Ho inserito il tuo esatto div in un argomento e aggiunto questo CSS a un componente del tema

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

L’ispettore mostra div data-theme-bot (racchiuso tra < >), ma il colore calcolato è var(--primary) html

Devo aggiungere selettori aggiuntivi o modificare un’impostazione dell’amministratore? Grazie.

9

Ho appena provato lo stesso codice e funziona correttamente per me. Forse prova:

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

Se funziona, significa che qualche CSS da qualche altra parte (un tema, un componente o un plugin) aveva una specificità maggiore rispetto a questo stile, quindi veniva sovrascritto.

10

Hai ragione. Credo di aver avuto un problema di cache nel mio browser.

Questo trucco è un elemento importante per pubblicare i miei post di WordPress su Discourse e farli apparire simili alla versione WordPress.

Grazie a tutti.