SVG in footer color

Hello i am trying to use svg icons in the footer section through html blocks.
However the color fill is not being inherited according to the selection.

Hello,

Please provide your site admin access to the private area. Your site is under construction I cannot view it.

Best Regards

Logs provided

Hello,

SVG images do not inherit any color styles by default. You will have to change SVG file and add the necessary color in the coder of the image.

Our theme does not influence the SVG view on the frontend.

If you have any questions please feel free to contact us.

Best Regards

Hello again,

The svg used has colors provided, however it isn’t been displayed accordingly in the frontend. Please check again the svg.

Check for instance the stripe logo. Its blue and it turns out green.
Also when svg animations is on vivus.js fires an uncaught error in debug console.

What i just noticed is that the use of information box is causing the conflict. Please check that when svg is coming through the image wp bakery element it is diplayed on the color we provided.

Hello,

The problem is caused by SVG itself: some of your SVG images have styles that are applied to the whole page. As a result, the styles of one SVG icon influence the other. In order to solve this, you need to insert inline styles without classes.

You can open your SVG image in any text editor and manually change styles to inline like is shown on this screenshot https://prnt.sc/loz0mw.

If you create SVG in Adobe Illustrator we would suggest exporting SVG with appropriate CSS properties in the first place. During export from Illustrator choose style attributes. You can read more about resolving this issue in Illustrator here https://cobwwweb.com/inline-style-attributes-svg-elements.

Below I add an example file of the correct use of SVG styles.

Best Regards

Attachments:

You must be logged in to view attached files.

Thanks for the quick response.However I managed to resolve the issue with the use of svg from scratch since i realized the problem u are mentioning.
I will keep the svg example you provided for further use.
Did you had the chance to take a look on the error which is fired from the vivus.js which animates the vectors?

Hello,

Please provide the page URL and step-by-step description on how I can reproduce or see this error.

Please check if this error appears on the parent theme and when all the plugins not related to the theme are deactivated.

Best Regards

Another question is how i can use the infobox links with mailto: and tel: links.

Hello,

Infoboxes are not designed for that. You can insert the full URL.

You will have to implement that by means of a Raw HTML element.

Best Regards

One final question regarding the footer. I would like to ask if it is possible to use a collapsible menu list one mobile view through the widgetised sidebar. I have tried that and it doesn’t work. Thanks

Hello,

The collapsed footer is available only for Footer column widgets. You need to Set the appropriate layout in the Theme Settings > Footer and move all the content into the widgets area accordingly.

Best Regards

Hello again,

We are coming up again regarding the svg issue.
We launched the website yesterday and used litespeed for caching purposes.
However all our footer svgs which were correctly colored upon clients brand kit have being reverted to the stripes colours.

Hello,

Please check how they are displayed without the plugin, I am afraid our theme does not influence that.

Best Regards

Yes it’s the litespeed cache plugin that causes the issue. How are we going to tackle that, can you provide some help? It is crucial to use caching on ecommerce sites, we cannot avoid it unfortunately.

Hello,

Unfortunately, we do not have instructions. Please try to contact plugin support.

Best Regards

[Author]

Posts