سنقوم بإعادة هيكلة مخطط الألوان الخاص بنا. سيكون الرأس باللون الأخضر مع شعار أبيض في الرأس.
أواجه صعوبة في معرفة كيفية تغيير ألوان أيقونة العدسة المكبرة وأيقونة قائمة الهامبرغر في الرأس. هما رماديان حاليًا، وهو ما سيبدو سيئًا جدًا فوق رأس أخضر. كما أن الأيقونات البيضاء ستتناسب مع شعار الرأس الجديد.
لقد بحثت في قائمة المظهر ورأيت خيارًا يُسمى “الرئيسي للرأس”، والذي يذكر في وصفه أنه يغير النصوص والأيقونات في رأس الموقع. ومع ذلك، فقد قمت بالفعل بتعيينه على الأبيض ولم يتغير شيء. هل توجد طريقة أخرى لتغيير لون هاتين الأيقونتين؟
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.
I’m posting this in case someone runs into the same issue as me, but depending on the combination of colors you are using for your header and your icons (my header is a dark color), I was getting the right color combinations for my icons with the code you provided:
.d-header-icons .d-icon {
color: white !important;
}
.d-header-icons a:hover {
background-color: #789946 !important;
color: white !important;
}
However, whenever I clicked on the header icons and hovered out of them, the background reverted to a solid white color, which did not work as my header is dark and my icons are set to white. So on hovering out of them (after a click), they would show as a solid white rectangle). To fix this, all I had to do was also set the state for “a”, not just “a:hover” as in the above posts (#93bb54 being the same color as my header):
.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;
}
I added some custom icons in SVG, but I can’t change their color using CSS. They are always black. I can change the opacity, size … but never the color.
I tried using the above examples, but none returned the expected result.
لدي نفس الموقف مثل Sentinelrv. قمت بتعديل header_primary إلى اللون الأبيض وطبقت أيضًا CSS المخصص الموصى به على كل من قوالباتي، لكن عدسة المكبرة وقائمة الهامبرغر لا تزال رمادية.
أنا أيضًا لا أستطيع تغيير ألوان قائمة الهامبرغر/الشريط، أيقونة البحث/العثور تغيرت - لقد جربت جميع النصائح المذكورة أعلاه وأكثر من خلال فحص الأشياء في متصفح الويب ولكن (لست مطور ويب) فشلت. هل توصل أحد إلى حل لهذه المشكلة؟
<header icons color>, <hamburger icons color>, <header icon hover color>, <hamburger icon hover color> = قيم سداسية عشرية، أسماء ألوان، أو متغيرات ألوان السمة. يمكنك أيضًا تحديد background-color إذا كنت ترغب في تغيير لون خلفية الأيقونة.
ملاحظة: إذا كنت تستخدم وضع القائمة المنسدلة للهامبرغر بدلاً من الشريط الجانبي، فإن المقتطف الأول لأيقونات الرأس على الجانب الأيمن سيشمل أيضًا أيقونة الهامبرغر.
