-
Posts
-
I wondered if you might be able to help with a small issue following your switch to SVG for several of the elements in v7 and v7.1 please.
I use my own custom to set the colours and have had no issues with the Search, Return to Top and Shop Cart until v7 updates to SVG, I found another post where you gave the css for the Search icon and I found the Return to Top CSS I needed but I am not having as much luck with the Shop Cart.
Would it be possible for you to post the css you are using with the updated Shop Cart please.Also out of interest are there any other functions you have switched to SVG now that I might have missed?
Thank you ever so much.
Hey cgw3,
Could you post a link to where we can see the problem that you are having please?
Best regards,
Rikardi do not see your page – but if you are using the font icon ( avia-font-entypo-fontello ) then it is as before:
span[data-av_icon="\e859"] { color: red !important; }if you are using the svg icon ( avia-font-svg_entypo-fontello ) then an inline svg is used – and you have to use fill for the svg path:
span[data-av_svg_icon="basket"] svg { fill: red !important; }By the way – I know this might be a lot of work – but it might help us if your demos were also up to date with the latest Enfold version, at least the big last main demo (unfortunately the one from 2017).
Apologise for not relating sooner.
Because I use my own custom CSS the Cart icon in the header, Return to Top button and Nav Search icon lost the colours with your switch to SVG on 7.0 so we’re not appearing when the theme was updated.
I use your theme for the great GUI and drop and drag visual setup in Pages which makes it easier for clients updating their sites.
Thank you for your reply, I actually ended up finding the shopping cart SVG css so have added the fill to it and my other sites now I have those 3 new style settings with your switch to SVG with me not using your inbuilt colour styles setup.
I may have missed it but I could find any details in your help text about how the switch to SVG would impact, I am not sure if this might be possible going forward to help others 🙂
Hi,
Glad to hear that you have this sorted out, I’m not sure what your solution was, but feel free to post here to help others if you wish.Best regards,
MikeIf you are using the Theme colour styling section then it shouldn’t be an issue it is only because I don’t and use my own CSS to style everything that the switch to SVG caused an issue.
It was as was posted above setting a Fill colour to the Cart, Return to Top and Search in the nav that returned them to how they once were with just color css, so if you are using custom CSS for these elements you just need to set a color as a Fill.
For example in the scroll to top link the colour of the arrow was previous set by a color style but now needs a Fill style with that same color.
a#scroll-top-link.avia_pop_class {
background-color: var(–scroll-top-background-color);
color: var(–scroll-top-color);
border: 1px solid var(–scroll-top-border-color) !important;
opacity: 1;
}
#scroll-top-link.avia-svg-icon svg:first-child {
fill: var(–scroll-top-color) !important;
}
a#scroll-top-link.avia_pop_class:hover {
background-color: var( –scroll-top-hover-bgcolor);
color: var(–scroll-top-hover-color);
border: 1px solid var(–scroll-top-hover-bordercolor) !important;
opacity: 1;
}
#scroll-top-link.avia-svg-icon:hover svg:first-child {
fill: var(–scroll-top-hover-color) !important;
}Hi,
Thanks for sharing your scroll-top-link solution, that may help others, but I don’t see any css that would help the cart, did you use Guenni007’s solution?Best regards,
MikeI used similar after going through the html and finding what CSS was setting the Cart SVG icon fill and replicated it in my CSS
#top #wrap_all .header_color .cart_dropdown_first .cart_dropdown_link.avia-svg-icon svg:first-child,
#top .header_color .avia_cart_buttons .avia-svg-icon svg:first-child {
fill: #000;
}Hi,
Thanks for sharing, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.Best regards,
Mike
- The topic ‘Enfold 7 Updates to SVG losing Colours/CSS’ is closed to new replies.