CSS personalizado dentro de una publicación / agregar clases personalizadas

Desarrollador
1

¿Es posible aplicar estilos personalizados a un

dentro de una publicación?

He visto que cualquier class que no esté en la lista blanca se elimina, y he intentado agregar style= a mis divs y spans sin éxito. ¿Alguien sabe si hay alguna forma de hacerlo?

Básicamente, tengo un bot que publica desde una herramienta interna y me gustaría que las publicaciones tengan un aspecto similar al de la herramienta para que sea obvio que no es una publicación normal de Discourse, algo como esto:

image
image794×305 22.2 KB

Tiene varios divs y spans anidados para que se vea bien, y cada uno tiene su propio CSS asociado.

Idealmente, si el bot pudiera publicar algo como esto:

<div class="mytool">
  <div class="item">
    <div class="name">Machine64</div>
    <div class="message">Operación top secret ejecutada con éxito</div>
  </div>
  <div class="item">
    <div class="name">Dispositivo 08</div>
    <div class="message">Prueba fallida a las 16:22</div>
  </div>
</div>

esas class adicionales estarían definidas en el CSS global de Discourse. Pero incluso si pudiera agrupar todos mis estilos en etiquetas style, eso resolvería mi problema.

¿Alguna idea sobre cómo podría hacerlo? ¡Gracias!

2 Me gusta
2

Esto quizás no sea apropiado para dev, pero no estaba seguro de dónde debería ir, ya que realmente no es ni de temas ni de plugins. Por favor, muévelo si está en el lugar incorrecto :slight_smile:

3

Los estilos/clases se eliminan, pero puedes usar atributos data-theme-* para apuntar a elementos en las publicaciones:

<div data-theme-bot>
   Contenido aquí
</div>
Por ejemplo, este párrafo está envuelto en un div con data-theme-bot

Y luego, en un tema, puedes apuntar a él así:

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

¡Esto es perfecto, muchas gracias!

4 Me gusta
5

¡Gracias @david!

Sin embargo, ¿cómo podría cambiar el estilo de las etiquetas (como <a> o <span>) dentro de este div?

6

En SCSS:

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

O en CSS puro

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

¡Gracias @david! Eso lo soluciona.

2 Me gusta
8

@david He colocado tu div exacto en un tema y agregué este CSS a un componente del tema:

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

El inspector muestra div data-theme-bot (rodeado por < >), pero el color calculado es var(--primary) html.

¿Necesito agregar selectores adicionales o cambiar una configuración de administrador? Gracias.

9

Acabo de probar el mismo código y funciona bien en mi caso. ¿Quizás intentes esto:

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

Si eso funciona, significa que algún CSS en otro lugar (un tema, un componente o un plugin) tenía mayor especificidad que este estilo, por lo que se estaba sobrescribiendo.

3 Me gusta
10

Tienes razón. Creo que tenía un problema de caché en mi navegador.

Este truco es un elemento importante para publicar mis entradas de WordPress en Discourse y que se vean similares a la versión de WordPress.

Gracias a todos.

1 me gusta