Change arrow colour with CSS

Viewing 14 replies - 1 through 14 (of 14 total)
  • Plugin Author edo888

    (@edo888)

    1 year, 2 months ago

    Hi,

    You can try to add this CSS somewhere in your theme CSS:

    .gt_float_switcher-arrow {background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 285 285'><path d='M282 76.5l-14.2-14.3a9 9 0 0 0-13.1 0L142.5 174.4 30.3 62.2a9 9 0 0 0-13.2 0L3 76.5a9 9 0 0 0 0 13.1l133 133a9 9 0 0 0 13.1 0l133-133a9 9 0 0 0 0-13z' style='fill:%23fff'/></svg>")!important}

    It is changing the fill color code from 666 to fff.

    Thanks! 🙂

    Thread Starter mancat80

    (@mancat80)

    1 year, 2 months ago

    Thanks, I added your code to the G Translate Custom CSS field (please see screenshot) but the arrow is still white on the website?

    Plugin Author edo888

    (@edo888)

    1 year, 2 months ago

    Hi,

    It will not work in Custom CSS section as it contains HTML code, I have specifically asked to place it somewhere in your theme CSS.

    Thanks! 🙂

    Thread Starter mancat80

    (@mancat80)

    1 year, 2 months ago

    Ok understood – I’ve pasted your code in the theme CSS but it’s made the grey arrow invisible. Please see video.

    How can I make the arrow white?

    Plugin Author edo888

    (@edo888)

    1 year, 2 months ago

    Hi,

    I see the following CSS in /wp-content/et-cache/25842360/et-core-unified-25842360.min.css file which is wrong:

    .gt_float_switcher-arrow {
    background-image: url("data:image/svg+xml;utf8,")!important
}

    Try to turn off your cache plugin to make sure it is not messing the code.

    Thanks! 🙂

    Thread Starter mancat80

    (@mancat80)

    1 year, 2 months ago

    Sorry I’m confused, is the last code you provided the correct code to use or not? I tried replacing the old code with the code provided in your last message but still didn’t work. Please can you kindly provide the code needed to make the arrow white? Thanks

    Thread Starter mancat80

    (@mancat80)

    1 year, 2 months ago

    Any update? Thanks

    Plugin Author edo888

    (@edo888)

    1 year, 2 months ago

    Sorry, it seems you do not read my messages, I suggest you to go back to the beginning and read.

    Thanks! 🙂

    Thread Starter mancat80

    (@mancat80)

    1 year, 2 months ago

    I added your oriignal code to the theme CSS but didn’t work.

    Your message with the code is unclear and confusing?

    .gt_float_switcher-arrow {
    background-image: url(“data:image/svg+xml;utf8,”)!important
    }

    Your support is poor i’m afraid.

    Plugin Author edo888

    (@edo888)

    1 year, 2 months ago

    No, I ask you to open https://ww.wp.xz.cn/support/topic/change-arrow-colour-with-css/ in your browser and read my 1st response.

    The code needs to be added as is, you have it wrong and I pointed what is wrong.

    Thread Starter mancat80

    (@mancat80)

    1 year, 2 months ago

    I added your code as is to my theme CSS but made the arrow invisible.

    You pointed this out what was wrong (pasted below) but didn’t advise how to fix… seems you are more interested in arguing than helping.

    I see the following CSS in /wp-content/et-cache/25842360/et-core-unified-25842360.min.css file which is wrong:

    .gt_float_switcher-arrow {
    background-image: url("data:image/svg+xml;utf8,")!important
}
    • This reply was modified 1 year, 2 months ago by mancat80.
    Plugin Author edo888

    (@edo888)

    1 year, 2 months ago

    You simply do not read everything.

    I have offered you to “Try to turn off your cache plugin to make sure it is not messing the code.”

    I refuse to provide you any further support. You are wasting my time.

    Thread Starter mancat80

    (@mancat80)

    1 year, 2 months ago

    I cleared plugin, browser and hosting caches. Didn’t fix the issue.

    Your original code didn’t work but thanks for your help.

    • This reply was modified 1 year, 2 months ago by mancat80.
    longtn

    (@longtn)

    11 months, 3 weeks ago

    Hi, i met the exact same issue with @mancat80 mentioned in this thread.

    The root problem is that the .gt_float_switcher-arrow element has a background-image style with an arrow icon with fixed color (style=’fill:%23666′):

    .gt_float_switcher-arrow {
        background-image: url(data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 285 285'><path d='M282 76.5l-14.2-14.3a9 9 0 0 0-13.1 0L142.5 174.4 30.3 62.2a9 9 0 0 0-13.2 0L3 76.5a9 9 0 0 0 0 13.1l133 133a9 9 0 0 0 13.1 0l133-133a9 9 0 0 0 0-13z' style='fill:%23666'/></svg>);
    }

    So to resolve the issue (change the arrow color), we need to add a custom css that change the background-image with the same arrow that has our desired fill color, for example:

    .gt_float_switcher-arrow {
        background-image: url(data:image/svg+xml;utf8,<svg ... style='fill:%00000'/></svg>);
    }

    However, this will cause an issue that WordPress blocks angle brackets (< >) and quotes (” ‘) in url() values to prevent XSS vulnerabilities. Thus after saved the CSS the content is stripped to something like:

    .gt_float_switcher-arrow {
        background-image: url("data:image/svg+xml;utf8,");
    }

    A solution that I found that worked for me was to convert the url string to base64 encode:

    .gt_float_switcher-arrow {
        url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI4NSAyODUiPjxwYXRoIGQ9Ik0yODIgNzYuNWwtMTQuMi0xNC4zYTkgOSAwIDAgMC0xMy4xIDBMMTQyLjUgMTc0LjQgMzAuMyA2Mi4yYTkgOSAwIDAgMC0xMy4yIDBMMyA3Ni41YTkgOSAwIDAgMCAwIDEzLjFsMTMzIDEzM2E5IDkgMCAwIDAgMTMuMSAwbDEzMy0xMzNhOSA5IDAgMCAwIDAtMTN6IiBmaWxsPSIjY2VkY2Q0Ii8+PC9zdmc+") !important;
    }

    Hope this helps!

    • This reply was modified 11 months, 3 weeks ago by longtn.
Viewing 14 replies - 1 through 14 (of 14 total)

The topic ‘Change arrow colour with CSS’ is closed to new replies.