Customizing the icon color

  • Resolved tdechangy

    (@tdechangy)


    5 years, 11 months ago

    Hi I would like to invert the icon colors, using the icon background color to be used for the icon itself.
    I was able to make the backgrounds white but since icons seem to be in a SVG background-image format I don’t see the way to change their color.

    Hoping you can help me to solve this nifty trick.

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author Heateor Support

    (@heateor)

    Hi there,

    You can do this from the Theme Selection section at Super Socializer > Social Sharing page in admin area.

    Thread Starter tdechangy

    (@tdechangy)

    I see that Under > “Theme selection” there is the option to set a “logo color”.
    It’s working well but sadly I have to set a custom color for each icon.

    So I would like having the CSS way of doing it. Can you provide me this ?

    • This reply was modified 5 years, 11 months ago by tdechangy.
    Plugin Author Heateor Support

    (@heateor)

    If you let me know what custom color you want for which social share icon, would be able to suggest custom CSS.

    Thread Starter tdechangy

    (@tdechangy)

    Great.
    As said I want to invert the colors : White for background and initial background color for the icon.
    But don’t bother with the color match. I was just unable to find any working CSS selector. Let’s try it with the Facebook and Whatsapp icons. I use them on sidebar, bottom of posts and in mobile specific view (sticky).

    Plugin Author Heateor Support

    (@heateor)

    Okay. You can add following CSS in the Custom CSS option at Super Socializer > General Options page in admin area to apply the desired change on Standard Facebook and Whatsapp share icons:
    div.the_champ_horizontal_sharing .theChampFacebookSvg:hover{background:url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%22-5%20-5%2042%2042%22%3E%3Cpath%20d%3D%22M17.78%2027.5V17.008h3.522l.527-4.09h-4.05v-2.61c0-1.182.33-1.99%202.023-1.99h2.166V4.66c-.375-.05-1.66-.16-3.155-.16-3.123%200-5.26%201.905-5.26%205.405v3.016h-3.53v4.09h3.53V27.5h4.223z%22%20fill%3D%22%233C589A%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E') no-repeat center center}div.the_champ_horizontal_sharing .theChampWhatsappSvg:hover{background:url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%22-5%20-5%2040%2040%22%3E%3Cpath%20id%3D%22arc1%22%20stroke%3D%22%2355EB4C%22%20stroke-width%3D%222%22%20fill%3D%22none%22%20d%3D%22M%2011.579798566743314%2024.396926207859085%20A%2010%2010%200%201%200%206.808479557110079%2020.73576436351046%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M%207%2019%20l%20-1%206%20l%206%20-1%22%20stroke%3D%22%2355EB4C%22%20stroke-width%3D%222%22%20fill%3D%22none%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M%2010%2010%20q%20-1%208%208%2011%20c%205%20-1%200%20-6%20-1%20-3%20q%20-4%20-3%20-5%20-5%20c%204%20-2%20-1%20-5%20-1%20-4%22%20fill%3D%22%2355EB4C%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E') no-repeat center center}i.theChampFacebookBackground:hover{background-color:#fff}i.theChampWhatsappBackground:hover{background-color:#fff}
    and following CSS to apply the same changes for Floating icons:
    div.the_champ_vertical_sharing .theChampFacebookSvg:hover{background:url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%22-5%20-5%2042%2042%22%3E%3Cpath%20d%3D%22M17.78%2027.5V17.008h3.522l.527-4.09h-4.05v-2.61c0-1.182.33-1.99%202.023-1.99h2.166V4.66c-.375-.05-1.66-.16-3.155-.16-3.123%200-5.26%201.905-5.26%205.405v3.016h-3.53v4.09h3.53V27.5h4.223z%22%20fill%3D%22%233C589A%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E') no-repeat center center}div.the_champ_vertical_sharing .theChampWhatsappSvg:hover{background:url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%22-5%20-5%2040%2040%22%3E%3Cpath%20id%3D%22arc1%22%20stroke%3D%22%2355EB4C%22%20stroke-width%3D%222%22%20fill%3D%22none%22%20d%3D%22M%2011.579798566743314%2024.396926207859085%20A%2010%2010%200%201%200%206.808479557110079%2020.73576436351046%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M%207%2019%20l%20-1%206%20l%206%20-1%22%20stroke%3D%22%2355EB4C%22%20stroke-width%3D%222%22%20fill%3D%22none%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M%2010%2010%20q%20-1%208%208%2011%20c%205%20-1%200%20-6%20-1%20-3%20q%20-4%20-3%20-5%20-5%20c%204%20-2%20-1%20-5%20-1%20-4%22%20fill%3D%22%2355EB4C%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E') no-repeat center center}i.theChampFacebookBackground:hover{background-color:#fff}i.theChampWhatsappBackground:hover{background-color:#fff}

    Thread Starter tdechangy

    (@tdechangy)

    Hi, sorry but it seem that your code doesn’t affect the colors on my side.
    One thing here thing is that you set code only for :hover states. I guess this could be ignored.

    I already tried to change colors on my side with the chrome dev tool with this code :

    .theChampFacebookBackground, .theChampFacebookSvg {
    background-color: white;
}

    it changed the background to white as expected but i’m unable to affect the icon color.
    I find SVG icons quite strange to use. Can you eventually explain what’s the method to affect their color ?

    Plugin Author Heateor Support

    (@heateor)

    Oh. Try now. I have used !important to force this custom logo color.
    Following CSS for Standard icons:
    div.the_champ_horizontal_sharing .theChampFacebookSvg:hover{background:url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%22-5%20-5%2042%2042%22%3E%3Cpath%20d%3D%22M17.78%2027.5V17.008h3.522l.527-4.09h-4.05v-2.61c0-1.182.33-1.99%202.023-1.99h2.166V4.66c-.375-.05-1.66-.16-3.155-.16-3.123%200-5.26%201.905-5.26%205.405v3.016h-3.53v4.09h3.53V27.5h4.223z%22%20fill%3D%22%233C589A%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E') no-repeat center center !important;}div.the_champ_horizontal_sharing .theChampWhatsappSvg:hover{background:url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%22-5%20-5%2040%2040%22%3E%3Cpath%20id%3D%22arc1%22%20stroke%3D%22%2355EB4C%22%20stroke-width%3D%222%22%20fill%3D%22none%22%20d%3D%22M%2011.579798566743314%2024.396926207859085%20A%2010%2010%200%201%200%206.808479557110079%2020.73576436351046%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M%207%2019%20l%20-1%206%20l%206%20-1%22%20stroke%3D%22%2355EB4C%22%20stroke-width%3D%222%22%20fill%3D%22none%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M%2010%2010%20q%20-1%208%208%2011%20c%205%20-1%200%20-6%20-1%20-3%20q%20-4%20-3%20-5%20-5%20c%204%20-2%20-1%20-5%20-1%20-4%22%20fill%3D%22%2355EB4C%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E') no-repeat center center !important}i.theChampFacebookBackground:hover{background-color:#fff}i.theChampWhatsappBackground:hover{background-color:#fff}
    and following CSS to apply the same changes for Floating icons:
    div.the_champ_vertical_sharing .theChampFacebookSvg:hover{background:url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%22-5%20-5%2042%2042%22%3E%3Cpath%20d%3D%22M17.78%2027.5V17.008h3.522l.527-4.09h-4.05v-2.61c0-1.182.33-1.99%202.023-1.99h2.166V4.66c-.375-.05-1.66-.16-3.155-.16-3.123%200-5.26%201.905-5.26%205.405v3.016h-3.53v4.09h3.53V27.5h4.223z%22%20fill%3D%22%233C589A%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E') no-repeat center center !important}div.the_champ_vertical_sharing .theChampWhatsappSvg:hover{background:url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%22-5%20-5%2040%2040%22%3E%3Cpath%20id%3D%22arc1%22%20stroke%3D%22%2355EB4C%22%20stroke-width%3D%222%22%20fill%3D%22none%22%20d%3D%22M%2011.579798566743314%2024.396926207859085%20A%2010%2010%200%201%200%206.808479557110079%2020.73576436351046%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M%207%2019%20l%20-1%206%20l%206%20-1%22%20stroke%3D%22%2355EB4C%22%20stroke-width%3D%222%22%20fill%3D%22none%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M%2010%2010%20q%20-1%208%208%2011%20c%205%20-1%200%20-6%20-1%20-3%20q%20-4%20-3%20-5%20-5%20c%204%20-2%20-1%20-5%20-1%20-4%22%20fill%3D%22%2355EB4C%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E') no-repeat center center !important}i.theChampFacebookBackground:hover{background-color:#fff}i.theChampWhatsappBackground:hover{background-color:#fff}

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Customizing the icon color’ is closed to new replies.