Change color of Social Media Icons

• 

  baertigerbackpacker · Member · Feb 9, 2017 at 8:50 pm

  • Copy link
  • Add topic to favorites

  I wanna change the social Media Color of every social media button in the sidebar and in the footer. I cant find the ccs code for that

  thank you

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

• 

  baertigerbackpacker · Member · Feb 9, 2017 at 8:53 pm

  • Copy link

  I also cant finde the code for the Flickr Icon on the top of the site. it is white now but I wanna change the color of this

• 

  baertigerbackpacker · Member · Feb 9, 2017 at 9:26 pm

  • Copy link

  I wanna change the color and the font size of the menu Reise um die Welt, sei frei und hab Spass dabei it is on the top left side of my website

• 

  baertigerbackpacker · Member · Feb 9, 2017 at 10:07 pm

  • Copy link

  I tried it but I’m not god in that. is that here right ?

  Font Size Menu

  .top-navigation-menu a:link, .top-navigation-menu a:visited{
  color: #dd5533;
  font-size: 23px;
  }

• 

  baertigerbackpacker · Member · Feb 9, 2017 at 10:14 pm

  • Copy link

  that one works but I cant find the other codes

• 

  aakashpatelsite · Member · Feb 10, 2017 at 11:19 am

  • Copy link

  Hi,
  To change color and the size of the menu items the code you have written is correct and if you want to write another code you need to give inline CSS to the every link given in menu bar.
  For example to give CSS to the Blog element of menubar
  <a href="https://baertigerbackpacker.blog/blog/"><font><font style="color : #dd5533 ; font-size : 23px ">Blog</font></font></a>

  Thanks,
  Aakash Patel

• 

  staff-loquaciousloon · Staff · Feb 10, 2017 at 4:43 pm

  • Copy link

  Hi @baertigerbackpacker!

  I also cant finde the code for the Flickr Icon on the top of the site. it is white now but I wanna change the color of this

  You can target the Flickr icon in a similar way to how you’ve targeted the others that I can see you’ve changed:

  .jetpack-social-navigation .menu .menu-item-1047 a::before {
  	color: #c4302b;
  }

  That uses the red color you placed on one of your other icons, swap out the color code and you should be all set :)

  It looks like you’ve manages the other change you mentioned for Reise um die Welt, sei frei und hab Spass dabei – is that how you want it or do you need more help? :)

• 

  staff-loquaciousloon · Staff · Feb 10, 2017 at 4:45 pm

  • Copy link

  @aakashpatelsite – one small note – it isn’t actually possible to add inline styles like the one you’ve described. The navigation menus are generated by the theme, not coded by hand :)

  Instead, you can inspect the menu and look at each link – they all have a unique class using their id numbers that will allow you to target them individually :)

• 

  baertigerbackpacker · Member · Feb 10, 2017 at 9:23 pm

  • Copy link

  yeah that is what i wanted.
  i targeted the other social buttons at the sidebar and and at the footer on the botton. i only found that one here

  .footer-widgets .widget a:link, .footer-widgets .widget a:visited
  but it change other things

• 

  staff-loquaciousloon · Staff · Feb 13, 2017 at 2:46 pm

  • Copy link

  Cool – so you’ve targeted the right links, but it looks like they have some really specific classes on them that we can user, for example if I look at your footer facebook icon, I see it has genericon-facebook class.

  If we target it specifically enough, we can override the current color:

  .widget_wpcom_social_media_icons_widget .genericon-facebook {
      background: #3b5998;
  }

  You should be able to use a similar style for the other links as well!