We are going to rebrand our color scheme. The header will be green with a white header logo.
I am having trouble figuring out how to change the colors of the magnifying glass and the hamburger menu icon in the header. They are currently gray, which will look awful on top of a green header. The white icons will also match the new header logo.
I’ve looked in the theme menu and I see an option called header primary, which says in the description that it changes text and icons in the site’s header. However I’ve already set it to white and nothing has changed. Is there another way to change the color of these two icons?
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.
Я публикую это на случай, если кто-то столкнется с той же проблемой, что и я. В зависимости от комбинации цветов, которую вы используете для заголовка и иконок (мой заголовок темного цвета), код, который вы предоставили, давал правильные цветовые сочетания для моих иконок:
.d-header-icons .d-icon {
color: white !important;
}
.d-header-icons a:hover {
background-color: #789946 !important;
color: white !important;
}
Однако всякий раз, когда я нажимал на иконки заголовка и выводил курсор из них, фон возвращался к сплошному белому цвету, что не подходило, так как мой заголовок темный, а иконки установлены в белый цвет. Поэтому при выводе курсора (после клика) они отображались как сплошной белый прямоугольник. Чтобы исправить это, мне нужно было просто также установить состояние для “a”, а не только для “a:hover”, как в предыдущих постах (#93bb54 — тот же цвет, что и мой заголовок):
.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;
}
Я добавил несколько пользовательских иконок в формате SVG, но не могу изменить их цвет с помощью CSS. Они всегда остаются чёрными. Я могу менять прозрачность, размер… но никогда цвет.
Я пробовал использовать примеры выше, но ни один не дал ожидаемого результата.
У меня та же ситуация, что и у Sentinelrv. Я изменил цвет заголовка primary на белый и также применил рекомендуемый пользовательский CSS ко всем своим темам, но лупа и гамбургер-меню по-прежнему остаются серыми.
Я тоже не могу изменить цвета меню-гамбургера/панели; иконка поиска/нахождения изменилась. Я перепробовал все вышеупомянутые советы и даже больше, проверяя элементы в веб-браузере, но (не будучи веб-разработчиком) не смог добиться результата. У кого-то получилось это решить?
<цвет иконок в шапке>, <цвет иконки «гамбургер»>, <цвет иконок в шапке при наведении>, <цвет иконки «гамбургер» при наведении> — это шестнадцатеричные значения, названия цветов или переменные цветов темы. Вы также можете указать background-color, если хотите изменить цвет фона иконки.
Примечание: Если вы используете выпадающее меню «гамбургер» вместо боковой панели, первый фрагмент кода для иконок в шапке справа будет включать и иконку «гамбургер».
