Home › Forums › WoodMart support forum › SVG icons behaving strange

SVG icons behaving strange

Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • April 14, 2020 at 12:57 pm #186839

    Bulld Digital
    Participant

    Hi Support,

    I use svg icons on my site that don’t behave the same way across pages.
    The sub-page’s show the correct SVG’s in a “information box” like for example:
    https://woohack.com/calculerenoffreren/

    The homepage shows the same SVG’s in a “Information box” in weird way with different colors. Although it’s the same exact SVG. https://woohack.com/
    (Center portion “Dit kan met DK”)

    Any idea’s on this?

    April 14, 2020 at 3:30 pm #186888

    Elise Noromit
    Member

    Hello,

    You need to open your SVG icons file with some editor like Sublime Text or default system text editor and add width=”31″ height=”40″ attributes (set your values) to your <svg> tag like it is shown: http://prntscr.com/m4n0qw
    Then you will need to re-upload your icons in WordPress Dashboard.

    Best Regards

    April 14, 2020 at 5:27 pm #186919

    Bulld Digital
    Participant

    I’m very sorry. I forgot to mention that I was referring to the color changes of the SVG. As they are all the same icons across the pages.

    April 14, 2020 at 5:43 pm #186925

    Bulld Digital
    Participant

    Please see screenshot

    April 14, 2020 at 8:44 pm #186964

    Elise Noromit
    Member

    Hello,

    Your issue is not clear enough. What is the problem with the SVG? Your screen is messed. Please provide a page URL and a clear description of the problem.

    Deactivate all the plugins not related to the theme and switch the parent theme, check the issue, if the problem remains, leave the plugins not activated and provide the site admin access to the private area

    Best Regards

    April 15, 2020 at 8:54 am #187080

    Bulld Digital
    Participant

    The problem with the SVG icons is that it changes color on 2 different pages. I made a small video to show you what I mean.

    April 15, 2020 at 12:06 pm #187156

    Elise Noromit
    Member

    Hello,

    Please provide me the full access to your admin. I cannot view your site https://prnt.sc/rzshch

    Best Regards

    April 15, 2020 at 12:50 pm #187178

    Bulld Digital
    Participant

    Done

    April 15, 2020 at 2:34 pm #187250

    Elise Noromit
    Member

    Hello,

    Please disable this blocking I cannot access the login page.

    Best Regards

    April 16, 2020 at 9:13 am #187430

    Bulld Digital
    Participant

    I cannot disable the extra protection layer because the website is in development.

    April 16, 2020 at 11:51 am #187489

    Elise Noromit
    Member

    Hello,

    I cannot get to the login page with the password you provide. Please check and make sure you have not enabled any blocking by country settings.

    Best Regards

    April 16, 2020 at 2:29 pm #187549

    Bulld Digital
    Participant

    Ok, I have disabled the extra security layer. Please use the wp-admin link and my credentials

    April 16, 2020 at 5:09 pm #187578

    Elise Noromit
    Member

    Hello,

    I have checked on my testing site and it is displayed correctly. https://prnt.sc/s0ofc2

    Please deactivate all the plugins not related to the theme and check the issue, if the problem remains, leave the plugins not activated for us to check.

    Best Regards

    April 17, 2020 at 8:26 am #187718

    Bulld Digital
    Participant

    I’ve deactivated all non theme related plugins but the issue remains. Further investigation and some trail and error led me to the row with 3 information blocks above the purple row with the information blocks. Both rows have SVG’s. When changing the first SVG of the 3 blocks all the other SVG’s return to normal as you can see here: https://share.vidyard.com/watch/cY2HFM162nu2fpxg76V5DP?

    April 17, 2020 at 12:03 pm #187804

    Artem Temos
    Keymaster

    SVG images are injected into your page as HTML code and all of them contain some CSS. It seems that some SVGs have the same CSS classes and their styles override other SVGs styles. You need to be sure that all SVG have unique styles and classes inside their code.

    April 17, 2020 at 1:35 pm #187879

    Bulld Digital
    Participant

    You are correct. Thank you so much.

    April 17, 2020 at 1:41 pm #187887

    Artem Temos
    Keymaster

    You are welcome!

  • Author
    Posts
Viewing 17 posts - 1 through 17 (of 17 total)

The topic ‘SVG icons behaving strange’ is closed to new replies.