Changing Color Of Cart Iamge (svg)
Rejouisens
Hello,
In jewel or homify template, there is the cart icon on the top right.
I suppose it refers to this <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 25"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.112 9.207V6.042A3.886 3.886 0 0 1 12 2.157a3.887 3.887 0 0 1 3.889 3.885v3.165m3.029 13.636H5.082c-.747 0-1.352-.64-1.352-1.431L4.85 8.776c0-.79.606-1.431 1.353-1.431h11.594c.747 0 1.352.64 1.352 1.431l1.12 12.636c0 .79-.604 1.431-1.351 1.431Z"/></svg>
So, fill and stroke define the color I guess. At this point, stroke is defined by "currentcolor". Where do I find that currentcolor parameter? I could change directly the color in the cart.svg file but it is not a solution for me as I want it to have different colors on different pages.
What solution do you propose?
Rashida Rahman
Accepted AnswerHi there!
Thanks for reaching out.
Did you mean you want different colored cart icon for different menu pages?
Well, here is the custom CSS responsible for that icon color in the header:
.sticky-light-header a.easystore-cart-icon{
color: red;
}
#sp-header.header-sticky .easystore-cart-icon {
color: blue;
}Here is all about custom code placement in Helix Ultimate: https://www.joomshaper.com/documentation/helix-framework/custom-code-css-js-meta
You need to add specific page class in the above code if you want them to separate page wise.
Hope this helps anyways!
Best Regards
Rejouisens
Accepted AnswerThanks for your reply. Your code put me in the right direction. I don't know what .sticky-light-header refers to as I don't see it in the code but the following code works fine. In case it can help.
#sp-header .easystore-cart-icon {
color: blue;
}
#sp-header .easystore-cart-icon:hover {
color: red;
}
#sp-header.header-sticky .easystore-cart-icon {
color: blue;
}
#sp-header.header-sticky .easystore-cart-icon:hover{
color: red;
}