Cambiar el color de fondo de la categoría para las cajas

He estado luchando por encontrar cómo cambiar el color de fondo de la categoría para las cajas de categoría:

El objetivo es heredar el color principal de la categoría y añadir transparencia al fondo:

¿Alguien sabe cómo puedo lograr esto?

1 me gusta

Hola,

Esto es posible con CSS y una pequeña modificación de plantilla. :slightly_smiling_face:

En escritorio, el borde de las categorías tiene una variable de color que también puedes usar para el fondo.

Esta es la variable --category-color que es el color del borde.
Screenshot 2022-09-12 at 17.25.56

Pero como esta variable es un valor hexadecimal, no puedes hacerlo transparente. Sin embargo, puedes añadirlo a un pseudo ::before donde también puedes establecer la opacidad.

Lo he hecho como un componente para que puedas instalarlo o bifurcarlo y modificar lo que quieras. :slightly_smiling_face:

Componente: GitHub - VaperinaDEV/discourse-category-background-color


El CSS de escritorio se ve así:


En móvil, esta variable de color falta en la plantilla, por lo que tienes que añadir este estilo aquí:


Después de esto, puedes usar la variable --category-color y hacer algo similar a como se hace en escritorio:

Escritorio


Móvil

3 Me gusta

¡Eres el mejor!

¡Gracias por la explicación, voy a jugar con esto un rato!

1 me gusta

Hola @MarcP, Lamento haber pasado por alto que querías esto para las cajas de categoría. :smiley: He actualizado el CSS de escritorio para que funcione también con las Cajas de Categoría.

1 me gusta

¡Ah, gracias! Ya estaba averiguando cómo hacer que funcionaran las cajas. Fue más complicado de lo que pensaba. ¡Muy apreciado!

1 me gusta