Alterar cor de fundo da categoria para caixas

Tenho tido dificuldade em descobrir como alterar o plano de fundo da cor da categoria para as caixas de categoria:

O objetivo é herdar a cor principal da categoria e adicionar transparência ao plano de fundo:

Alguém sabe como posso conseguir isso?

1 curtida

Olá,

Isso é possível com CSS e um pouco de modificação de template. :slightly_smiling_face:

No desktop, a borda das categorias tem uma variável de cor que você também pode usar para o fundo.

Esta é a variável --category-color, que é a cor da borda.
Screenshot 2022-09-12 at 17.25.56

Mas como essa variável é um valor hexadecimal, você não pode torná-la transparente. No entanto, você pode adicioná-la a um pseudo ::before, onde você também pode definir a opacidade.

Eu fiz isso como um componente para que você possa instalá-lo ou fazer um fork e modificar o que quiser. :slightly_smiling_face:

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


O CSS do desktop se parece com isto:


No mobile, essa variável de cor está faltando no template, então você tem que adicionar este estilo aqui:


Depois disso, você pode usar a variável --category-color e fazer algo semelhante ao desktop:

Desktop


Mobile

3 curtidas

Você é o melhor!

Obrigado pela explicação, vou brincar com isso por um tempo!

1 curtida

Olá @MarcP, Desculpe, eu totalmente perdi que você queria isso para as caixas de categoria. :smiley: Eu atualizei o CSS do desktop para funcionar com as Caixas de Categoria também.

1 curtida

Ah, obrigado, eu já estava descobrindo como fazer as caixas funcionarem! Foi mais complicado do que eu pensava. Muito apreciado!

1 curtida