Need help with changing colour of social media icons

• 

  justballtennis · Member · Sep 20, 2017 at 4:44 pm

  • Copy link
  • Add topic to favorites

  hi everbody, at the bottom of my page i have a blue background with 3 small social media icons. Unfortunately they are also blue which means they are hard to see. can they be changed to white?

  any help would be great!

  The blog I need help with is: (visible only to logged in users)

• 

  garysixtyeight · Member · Sep 20, 2017 at 4:53 pm

  • Copy link

  Hi there,

  Please try adding the CSS below to the customizer in My Sites > Customize > CSS.

  .social-list li a:before {
      color: #fff;
  }

  If the CSS doesn’t work, please let me know :)

• 

  garysixtyeight · Member · Sep 20, 2017 at 4:58 pm

  • Copy link

  If it’s the background colour you’d like to change, rather than the outline, please use this instead:

  .social-list li a:before {
      background-color: #fff;
  }

• 

  justballtennis · Member · Sep 20, 2017 at 9:32 pm

  • Copy link

  Thanks so much for your response! It worked perfectly on the website version! it is possible for mobile version? Just to clarify its not the background colour that needs changings its simply the circular social media icons :)

• 

  garysixtyeight · Member · Sep 20, 2017 at 10:09 pm

  • Copy link

  Sorry, I’m slightly confused.

  Is the CSS I posted to make the icons white currently in your custom CSS?

  If it is, I’m unable to see it – but I can see 2 other custom rules. One makes the outline of the icons black for desktops, the other makes the outline blue for screens narrower than 768px.

  Did you intentionally add both of those rules?

  Just to clarify – when you say you’d like the icons to be white, do you mean this (A) or this (B)?

• 

  justballtennis · Member · Sep 21, 2017 at 8:34 am

  • Copy link

  I didn’t intentionally add these rules no ! I meant like (B) for mobile version 😀

• 

  garysixtyeight · Member · Sep 21, 2017 at 12:46 pm

  • Copy link

  Please add the CSS below.

  .social-list li a:before {
      color: #fff;
  }

  If it doesn’t appear to work, please change it to:

  .social-list li a:before {
      color: #fff !important;
  }

  If it still doesn’t appear to work, please keep it in the customer so I can troubleshoot it. Thanks :)

• 

  justballtennis · Member · Sep 21, 2017 at 1:48 pm

  • Copy link

  it worked! thanks so much for your time!

  JustBallTennis

• 

  garysixtyeight · Member · Sep 21, 2017 at 1:51 pm

  • Copy link

  w00t!.

  You’re welcome, glad I could help :)