¿Puedo aplicar un estilo con CSS?

[TheDarkWizard]

@awesomerobot

Sí, generalmente puedes confiar en la especificidad dentro de CSS. Si no estás familiarizado con CSS, se reduce a esto: si tienes varios estilos que apuntan al mismo elemento, el estilo más específico ganará.

<div class="custom-container">
  <a class="custom-link">enlace aquí</a>
</div>

Por lo tanto, lo que debes buscar es si el elemento (o un elemento padre) en el componente que intentas modificar tiene una clase única en algún lugar… algo como:

En el ejemplo anterior, ya sea .custom-link o, si no hay una clase directa en el elemento, utilizando el padre como .custom-container a. Si el componente tiene el estilo definido originalmente como .custom-link, puedes asegurarte de que se sobrescriba apuntando de manera más específica a a.custom-link.

Si no hay una clase única en algún lugar del componente, también deberías poder usar el contenedor del plugin outlet. Cuando se usa un plugin outlet en una personalización, se agrega una clase personalizada al contenedor. Usando nuevamente el ejemplo de estilizar un enlace, podría verse algo como .above-site-header-outlet.brand-header a, donde “brand-header” es el nombre de la plantilla agregada desde el componente.

En el peor de los casos, también puedes pedirle a la persona que creó el componente que agregue una clase si no encuentras una manera fácil de estilizar lo que necesitas.

Muchas gracias. Eso definitivamente ayuda.

@awesomerobot

un ejemplo específico del componente que estás intentando estilizar sería de ayuda.

Como ejemplo, tengo instancias de Graceful instaladas. Graceful Theme, lo cual ahora me doy cuenta de que publicaste como una continuación de un estilo anterior.

En mi componente de tema universal, he hecho cosas como subir activos de fondo, cambiar el botón de “me gusta” y algunas otras cosas, pero me he dado cuenta de que quiero cambiar el color de fondo en la versión que usa la paleta oscura con lo que quiera, sin afectar a la que usa la paleta clara.

Para ser exactos, esto:

background-color: $primary-very-low;

Ahora, quiero hacer la mayor cantidad de cosas posible en un solo componente de tema, ya que técnicamente es el mismo estilo, hasta que comenzaron a surgir pequeñas cosas como esta, que no eran cambios universales. No quiero tener que crear un componente “Oscuro” y uno “Claro” si es posible.

El objetivo aquí es dejar Graceful intacto, aparte de las alteraciones de la paleta, y hacer todo desde nuestro propio componente, de modo que cuando tú o alguien más publique una actualización para ellos, no tengamos que volver a aplicar nuestros cambios constantemente.

Noté que Discourse se enfoca mucho en las variables, lo cual me encanta; leer las guías de tematización ha sido un placer. Noté cosas como [data-topic-id="117"], así que ¿quizás algo como [data-theme-id] podría proponerse?