Change color of share buttons

• 

  jenoleary · Member · Mar 4, 2015 at 12:22 am

  • Copy link
  • Add topic to favorites

  I’m not sure if I’m doing something wrong, or if I can’t quite do what I need to with the Kubrick theme…I’d like to change the color of the share buttons to
  Background – green #c1d82f
  image – white #ffffff
  hover – green #c1d82f

  But I’ve only succeeded in 2/3 colour changes on one icon :( See any post on http://support.abtrac.com. I can change the printer picture to white, and hover to green, but I cannot change the entire circle color. It stays the default light grey.
  I can’t change twitter or facebook at all and then wasn’t sure where to start with linkedin…

  I do have the css upgrade, but obviously I’m not 100% sure what I’m doing, so any help would be appreciated…

  Here’s the code

  div.sharedaddy h3, #content div.sharedaddy h3, #main div.sharedaddy h3, #primary div.sharedaddy h3 {
  	padding-right: 10px;
  	width: auto;
  	font-size: 11px;
  	height: 25px;
  	margin-top: 7px;
  	font-weight: normal;
  	color: #9D9D9D;
  }
  
  div.sharedaddy ul, #content div.sharedaddy ul, #main div.sharedaddy ul, #primary div.sharedaddy ul {
  	width: auto;
  	height: auto;
  	vertical-align: middle;
  	color: #ffffff;
  }
  
  div.sharedaddy .sd-content {
  	float: left;
  	width: auto;
  }
  
  /*div.sharedaddy .share-print {
  float: left;
  	width: auto;
  	font-size: 11px;
  	height: 25px;
  	vertical-align: middle;
  	font-weight: normal;
  }/*
  
  /*Jens addition*/
  .sd-content ul li a.sd-button.share-facebook:before,
  .sd-content ul li a.sd-button.share-twitter:before,
  .sd-content ul li a.sd-button.share-print:before
   {
  	color: #ffffff;
  }
  
  .sd-content ul li a.sd-button.share-print,
  .sd-content ul li a.sd-button.share-print:hover {
  	background: #c1d82f;
  }
  
  .sd-content ul li a.sd-button.share-twitter,
  .sd-content ul li a.sd-button.share-twitter:hover {
  	background: #c1d82f;
  }
  
  .sd-content ul li a.sd-button.share-facebook,
  .sd-content ul li a.sd-button.share-facebook:hover {
  	background: #c1d82f;
  }
  
  /*end jens*/

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

• 

  thesacredpath · Member · Mar 5, 2015 at 1:23 am

  • Copy link

  Hi there, I’ve currently seeing the round buttons on support.abtrac.com. Did you decide to go with the round buttons instead of the rectangular ones with the text in them? Or are you wanting to change the colors on the round buttons?

  I also noticed that you have hidden the WordPress.com and Theme footer credits. These have to remain visible and readable per the Terms of Service (#11). Can you please remove the CSS you used to hide them?

  You can restyle them to better fit with your design as long as they remain readable. If you need help with that, we would be happy to help.

• 

  jenoleary · Member · Mar 5, 2015 at 7:33 am

  • Copy link

  Oh, ok. The footer credits were probably hidden when we first customised the blog using a web designer. I’ll find the CSS and fix them when I’m back in the office.

  Yes, it’s changing the colors on the round buttons I need help with please. You can see I’ve made some progress with the print button (but not much)

• 

  thesacredpath · Member · Mar 5, 2015 at 8:26 pm

  • Copy link

  Ok, you can do similarly to what you did with the print button. Here are the selectors (non-hover and hover) for the other social icons:

  Facebook:
  .sd-social-icon .sd-content ul li.share-facebook[class*="share-"] a.sd-button
.sd-social-icon .sd-content ul li.share-facebook[class*="share-"] a.sd-button:hover

  Twitter:
  .sd-social-icon .sd-content ul li.share-twitter[class*="share-"] a.sd-button
.sd-social-icon .sd-content ul li.share-twitter[class*="share-"] a.sd-button:hover

  Linkedin:
  .sd-social-icon .sd-content ul li.share-linkedin[class*="share-"] a.sd-button
.sd-social-icon .sd-content ul li.share-linkedin[class*="share-"] a.sd-button:hover

• 

  jenoleary · Member · Mar 7, 2015 at 11:59 pm

  • Copy link

  Thanks Richard, All sorted :)

  (Have found and re-instated the footer credits too, will see how I go with styling those on my own)
  J

• 

  thesacredpath · Member · Mar 8, 2015 at 1:24 am

  • Copy link

  You are welcome.