Quero que apenas a cor do ícone da subcategoria fique visível.
A categoria principal não deve ter cor de ícone.
Não quero que pareça bicolor.
Como posso fazer isso?
[image]
Não tenho certeza se existe uma configuração para isso, mas posso mostrar como eu tentaria mudar usando CSS:
-
Clique com o botão direito no ícone e escolha ‘Inspecionar’.
-
Isso abrirá as ferramentas de desenvolvedor do navegador. (Observação: estou usando o Chrome aqui, mas a maioria dos navegadores pode fazer a mesma coisa!) Há muito o que olhar, mas focaremos em duas seções principais - Elementos, que mostra as partes da página em uma hierarquia aninhada, e Estilos, que mostra qual CSS está afetando o elemento selecionado.
-
Usar o clique com o botão direito → Inspecionar geralmente nos aproxima bastante do elemento que queremos editar, mas muitas vezes é preciso procurar um pouco. Neste caso, ele selecionou um elemento
<span>, mas parece que o elemento responsável pelo ícone está dentro dele: um elemento::before.
-
Uma das maneiras de encontrar o elemento certo é observar a página enquanto você passa o mouse sobre os itens listados no painel de elementos. Quando passei o mouse sobre o
::before, apenas o ícone foi destacado:
-
No painel Estilos, podemos ver que há uma declaração definindo o plano de fundo como vermelho, mas está sendo substituída por uma regra diferente que o define como um plano de fundo de 2 cores. (Observação: sinta-se à vontade para editar qualquer CSS no painel Estilos para experimentar. Quaisquer alterações são temporárias e serão revertidas quando a página for atualizada. Você também pode ativar ou desativar declarações individuais para ver seus efeitos)
-
Podemos criar uma nova regra para substituí-la novamente, copiando a parte do seletor da regra superior e a declaração original do plano de fundo da regra inferior.
-
Esta nova regra iria no seu CSS personalizado/tema e, se tudo funcionasse corretamente, os ícones seriam cores sólidas representando as subcategorias!
.badge-category__wrapper .badge-category.--has-parent:before {
background: var(--category-badge-color);
}
5 curtidas
Obrigado pela explicação detalhada
1 curtida
Hmm, isso é estranho. Quando uso a visualização móvel no meu computador, ela mostra as mesmas regras CSS, então não tenho certeza por que estaria exibindo de forma diferente. A única coisa em que consigo pensar é garantir que o novo código esteja na seção Common.scss para que seja usado para ambos.
2 curtidas
foi tudo culpa minha
Funciona bem, sem problemas
Sem problemas, fico feliz que esteja funcionando! 
2 curtidas
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.