Vamos fazer um rebranding da nossa paleta de cores. O cabeçalho ficará verde com um logotipo branco.
Estou com dificuldade para descobrir como alterar as cores da lupa e do ícone de menu hambúrguer no cabeçalho. Atualmente, eles são cinza, o que ficará horrível sobre um cabeçalho verde. Os ícones brancos também combinarão com o novo logotipo do cabeçalho.
Olhei no menu do tema e vejo uma opção chamada “header primary”, que, na descrição, diz que altera o texto e os ícones no cabeçalho do site. No entanto, já configurei para branco e nada mudou. Existe outra maneira de alterar a cor desses dois ícones?
The icons are a bit transparent, which might be throwing you off (that’s why they look grey instead of white when the header_primary color is set to white).
However, perhaps as we are now on one of the latest releases, now the home, search, and menu icons are greyed out. Can you explain how to make these icons white with opacity of 1? Did any of the selectors change?
Yes, these selectors are a little more specific now and we removed the opacity entirely in favor of using a solid color (there was a bug in Safari where SVG icons were clipped slightly because of the opacity).
You can remove anything you have related to opacity, and do this
I have a similar problem as the OP, probably somewhat simpler: For some reason the colour of the header icons got darker for no apparent reason (I assume it was related to the tidy-up measures on your side). Since my header is a darkish, I want the icons brighter.
I tried this
and am happy with the result. But I can’t seem to figure out how the hover settings work. With only the above css, my hover looks like this:
So the icon turns grey again, which is okay, but I’d like to try some other tints on it. The background seems to turn white (or almost white), which I would like to change to make it coherent with other menus.
Estou postando isso caso alguém encontre o mesmo problema que eu, mas dependendo da combinação de cores que você está usando para o cabeçalho e os ícones (o meu cabeçalho é de uma cor escura), eu estava obtendo as combinações de cores corretas para os ícones com o código que você forneceu:
.d-header-icons .d-icon {
color: white !important;
}
.d-header-icons a:hover {
background-color: #789946 !important;
color: white !important;
}
No entanto, sempre que eu clicava nos ícones do cabeçalho e saía do estado de hover, o fundo voltava a ser branco sólido, o que não funcionava, já que meu cabeçalho é escuro e os ícones estão definidos como brancos. Então, ao sair do estado de hover (após um clique), eles apareciam como um retângulo branco sólido. Para corrigir isso, tudo o que precisei fazer foi definir o estado para “a”, não apenas para “a:hover” como nas postagens anteriores (#93bb54 sendo a mesma cor do meu cabeçalho):
.d-header-icons .d-icon {
color: white !important;
}
.d-header-icons a:hover {
background-color: #789946 !important;
color: white !important;
}
.d-header-icons a {
background-color: #93bb54 !important;
color: white !important;
}
Adicionei alguns ícones personalizados em SVG, mas não consigo alterar a cor deles usando CSS. Eles sempre aparecem em preto. Consigo mudar a opacidade, o tamanho… mas nunca a cor.
Tentei usar os exemplos acima, mas nenhum retornou o resultado esperado.
Eu tenho a mesma situação que Sentinelrv. Ajustei o header_primary para branco e também apliquei o CSS personalizado recomendado em cada um dos meus temas, mas a lupa e o menu hambúrguer continuam cinzas.
Eu também não consigo mudar as cores do menu hambúrguer/barra, o ícone de pesquisa/localizar mudou - tentei todas as dicas mencionadas e mais, inspecionando coisas no navegador web, mas (não sendo um desenvolvedor web) falhei. Alguém descobriu isso?
Para os ícones do cabeçalho no lado direito, no CSS comum de um tema ou componente de tema:
.d-header .d-header-icons .d-icon {
color: <cor dos ícones do cabeçalho> !important;
&:hover {
color: <cor do hover dos ícones do cabeçalho> !important;
}
}
Para o ícone de hambúrguer no modo de menu da barra lateral:
.d-header .header-sidebar-toggle button .d-icon {
color: <cor do ícone de hambúrguer> !important;
&:hover {
color: <cor do hover do ícone de hambúrguer> !important;
}
}
<cor dos ícones do cabeçalho>, <cor dos ícones de hambúrguer>, <cor do hover do ícone do cabeçalho>, <cor do hover do ícone de hambúrguer> = hex, nome da cor ou variáveis de cor do tema. Você também pode especificar background-color se desejar alterar a cor de fundo do ícone.
Observação: Se você estiver usando o modo de menu suspenso do hambúrguer em vez da barra lateral, o primeiro trecho para os ícones do cabeçalho do lado direito também incluirá o ícone de hambúrguer.
