sharing buttons

• 

  catezapp · Member · Feb 11, 2014 at 6:06 pm

  • Copy link
  • Add topic to favorites

  How to change the sharing buttons,for me lilac and light blue?thanks

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

• 

  thesacredpath · Member · Feb 11, 2014 at 11:36 pm

  • Copy link

  Hi there, I see no sharing buttons on your site, and with almost everything on your site password protected, none of it could be shared.

  What do you want lilac, and what do you want blue?

• 

  catezapp · Member · Feb 12, 2014 at 7:40 am

  • Copy link

  Hi there!I would like the facebook and twitter button lilac and google plus and email light blue.thanks

• 

  designsimply · Member · Feb 12, 2014 at 10:34 pm

  • Copy link

  There are actually a lot of different things you can do here!

  To change the “Icon + text” sharing button background colors, add this to your Appearance > Customize > CSS editor:

  .sd-content ul li a.sd-button.share-facebook,
  .sd-content ul li a.sd-button.share-facebook:hover,
  .sd-content ul li a.sd-button.share-twitter,
  .sd-content ul li a.sd-button.share-twitter:hover {
  	background: #e6e6fa;
  }
  
  .sd-content ul li a.sd-button.share-print,
  .sd-content ul li a.sd-button.share-print:hover {
  	background: #f0f8ff;
  }

  Or if you’d like to change the colors of the icons, add this to your Appearance > Customize > CSS editor:

  .sd-content ul li a.sd-button.share-facebook:before,
  .sd-content ul li a.sd-button.share-twitter:before {
  	color: #9370db;
  }
  
  .sd-content ul li a.sd-button.share-print:before {
  	color: #87ceeb;
  }

  Adjust the color codes as needed.

  Those examples should get you started! Try experimenting with them to see what they can do and mix and match the rules if you need to.

• 

  catezapp · Member · Feb 13, 2014 at 8:27 am

  • Copy link

  Thanks for your help!!!will try

• 

  catezapp · Member · Feb 16, 2014 at 2:09 pm

  • Copy link

  I like the facebook and twitter icon but dont like the print and google plus.hoe to make them the google plus,the opposite of the twitter icon,and the print pale pink?thanks

• 

  designsimply · Member · Feb 20, 2014 at 8:29 pm

  • Copy link

  I’m so sorry but I’m having trouble understanding your request.

  hoe to make them the google plus,the opposite of the twitter icon

  If you’re asking how to add or rearrange sharing icons, this guide should help:
  http://en.support.wordpress.com/sharing/#customize-your-services

  Or are you asking how to change the colors for Google Plus and Twitter separately?

  To change the background and icon color for the Google Plus “Icon + text” sharing to green, here is an example using color names instead of color codes:

  .sd-content ul li a.sd-button.share-google-plus-1,
  .sd-content ul li a.sd-button.share-google-plus-1:hover {
  	background: lightgreen;
  }
  .sd-content ul li a.sd-button.share-google-plus-1:before {
  	color: darkgreen;
  }

  To change the background and icon color for the Twitter “Icon + text” sharing to blue, here is an example using color names instead of color codes:

  .sd-content ul li a.sd-button.share-twitter,
  .sd-content ul li a.sd-button.share-twitter:hover {
  	background: lightblue;
  }
  .sd-content ul li a.sd-button.share-twitter:before {
  	color: darkblue;
  }

  Look at this link to see different color name examples:
  http://en.wikipedia.org/wiki/Web_colors#X11_color_names

  and the print pale pink?

  To change the print background and icon colors to pink, try this:

  .sd-content ul li a.sd-button.share-print,
  .sd-content ul li a.sd-button.share-print:hover {
  	background: lightpink;
  }
  .sd-content ul li a.sd-button.share-print:before {
  	color: hotpink;
  }

  Go ahead and change around the color names until you find the colors you like the best:
  http://en.wikipedia.org/wiki/Web_colors#X11_color_names