1. Computer problem? Tech Support Guy is completely free -- paid for by advertisers and donations. Click here to join today! If you're new to Tech Support Guy, we highly recommend that you visit our Guide for New Members.

Wordpress Customer Chat for Facebook - change color of icon

Discussion in 'Web Design & Development' started by christinewulfit, Mar 20, 2018.

Thread Status:
Not open for further replies.
Advertisement
  1. christinewulfit

    christinewulfit Thread Starter

    Joined:
    Apr 29, 2016
    Messages:
    67
    Can someone please advise on how I would go about changing the color of the facebook chat icon that appears on my wordpress site
    http://www.cl-innovations.com/

    I need a solid blue instead of the blue gradient, thank you
     
  2. JiminSA

    JiminSA

    Joined:
    Dec 15, 2011
    Messages:
    3,195
    Sorry Christine, but I see only a solid sky blue FB logo which changes to solid blue on hover??? (I'm using Google Chrome browser)
    You must be referring to the gradient fill in your <g>(SVG) icon bottom right - yes? (BTW - nice the way it appears to pick up the visitor's FB cookie!)
     
    Last edited: Mar 20, 2018
  3. christinewulfit

    christinewulfit Thread Starter

    Joined:
    Apr 29, 2016
    Messages:
    67
    yes absolutely, I have never adjusted worked with SVG objects
     
  4. JiminSA

    JiminSA

    Joined:
    Dec 15, 2011
    Messages:
    3,195
    To be honest, neither have I;) But it's not rocket-science, so lets change it, to exclude the gradient ...
    The current code is:
    HTML:
    <path d="M0,18.7150914 C0,24.5969773 2.44929143,29.6044708 6.95652174,33.0434783 L6.95652174,40 L14.2544529,36.6459314 C16.0763359,37.1551856 18,37.4301829 20,37.4301829 C31.043257,37.4301829 40,29.0529515 40,18.7150914 C40,8.37723141 31.043257,0 20,0 C8.956743,0 0,8.37723141 0,18.7150914 Z" fill="url(#linearGradient-1)"></path>
    and I reckon we should change it to something like this:
    HTML:
    <path d="M0,18.7150914 C0,24.5969773 2.44929143,29.6044708 6.95652174,33.0434783 L6.95652174,40 L14.2544529,36.6459314 C16.0763359,37.1551856 18,37.4301829 20,37.4301829 C31.043257,37.4301829 40,29.0529515 40,18.7150914 C40,8.37723141 31.043257,0 20,0 C8.956743,0 0,8.37723141 0,18.7150914 Z" fill="skyblue"></path>
    Anyway give it a try and see what happens ... (i changed the fill= at the end of the line)
     
  5. christinewulfit

    christinewulfit Thread Starter

    Joined:
    Apr 29, 2016
    Messages:
    67
    Hello Jim, I am working in Wordpress and I cannot locate the file that contains HTML, that is why I am trying to use CSS to modify it.
     
  6. JiminSA

    JiminSA

    Joined:
    Dec 15, 2011
    Messages:
    3,195
    Darn it! The styling is very much inline I'm afraid and I am no WP afficianado - perhaps Colin might step in, to direct you onto the right path (you might PM him?)
     
  7. christinewulfit

    christinewulfit Thread Starter

    Joined:
    Apr 29, 2016
    Messages:
    67
    thanks as always for you help Jim, yes I will wait for his response,
     
  8. colinsp

    colinsp

    Joined:
    Sep 5, 2007
    Messages:
    2,181
    First Name:
    Colin
    Sorry I don't see anything other than the FB icon top right header which can be changed with CSS. I don't see the SVG that you guys are talking about. Post a screenshot.
     
  9. christinewulfit

    christinewulfit Thread Starter

    Joined:
    Apr 29, 2016
    Messages:
    67
    Hi Colin, talking about the Facebook chat icon lower right
     
  10. JiminSA

    JiminSA

    Joined:
    Dec 15, 2011
    Messages:
    3,195
  11. christinewulfit

    christinewulfit Thread Starter

    Joined:
    Apr 29, 2016
    Messages:
    67
  12. colinsp

    colinsp

    Joined:
    Sep 5, 2007
    Messages:
    2,181
    First Name:
    Colin
    Sorry that does not display for me in Firefox so unable to assist. It is probably from a plugin. Use inspect element to look at the path to the SVG and then grab that file and edit it appropriately.

    Looking at Privacy Badger I suspect that this is a tracking plugin that is why it is not displayed for me. Think long and hard about using it.
     
  13. JiminSA

    JiminSA

    Joined:
    Dec 15, 2011
    Messages:
    3,195
    It appears in a remote iframe:
    Code:
    <iframe name="blank_f282fc73673e148" width="60px" frameborder="0" allowtransparency="true" allowfullscreen="true" scrolling="no" tabindex="-1" data-testid="bubble_iframe" src="https://staticxx.facebook.com/connect/xd_arbiter/r/Ms1VZf1Vg1J.js?version=42#forIframe=f282fc73673e148" style="border: none;"></iframe>
    So, unfortunately we would not be able to amend the source code as I suggested earlier, Christine:(
    Darn! The inserted iframe code doesn't scroll - here it is in it's entirity:
    <iframe name="blank_f282fc73673e148" width="60px" frameborder="0" allowtransparency="true" allowfullscreen="true" scrolling="no" tabindex="-1" data-testid="bubble_iframe" src="https://staticxx.facebook.com/conne...1Vg1J.js?version=42#forIframe=f282fc73673e148" style="border: none;"></iframe>
     
    Last edited: Mar 21, 2018
  14. JiminSA

    JiminSA

    Joined:
    Dec 15, 2011
    Messages:
    3,195
    It shows on the version of Firefox I have installed, Colin - 38.0.5
    Perhaps your version has dropped iframes?
     
  15. christinewulfit

    christinewulfit Thread Starter

    Joined:
    Apr 29, 2016
    Messages:
    67
    ok thanks guys, always appreciate your help!
     
  16. Sponsor

As Seen On
As Seen On...

Welcome to Tech Support Guy!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.

Join over 733,556 other people just like you!

Loading...
Thread Status:
Not open for further replies.

Short URL to this thread: https://techguy.org/1207085

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice