Estoy realizando ediciones muy menores y habituales en varios estilos de un componente de tema maestro para nuestro sitio. Esto significa que no necesitamos bifurcar ni editar los estilos remotos sin preocuparnos de que nuestras modificaciones se pierdan en la siguiente actualización. Hasta ahora, mis ediciones han sido universales, como cambiar el botón de “Me gusta”, etc.
Quería saber si es posible apuntar a un estilo exacto del componente de tema sin afectar a los demás. ¿Quizás a través de algunas variables de datos?
No quiero tener que crear un componente de tema separado para algo tan menor. Me gusta la idea de tener un único componente de tema para mis ediciones universales.
Sí, por lo general 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á.
Por lo tanto, lo que deberás 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 de la salida del plugin. Cuando se usa una salida de plugin en una personalización, se agrega una clase personalizada al contenedor. Usando el ejemplo de estilizar un enlace nuevamente, 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.
Si esto es difícil de seguir, proporcionar un ejemplo específico del componente que intentas 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?
@awesomerobot También, solo para evitar cualquier confusión, todavía estoy acostumbrado a llamar a los temas completos “estilos” porque aún estamos en el proceso de importar nuestro tablero grande desde otro. Pero en referencia a “estilo”, me refería a “tema”, ¡lo siento!