ATTENTION, PLEASE READ: New topic creation is disabled, as we have moved to a new support system. Your existing topics will remain, but for all new requests you will need to use the new system. Click here to go to the new support request form.

• Back to forum

  Posted in: Neighborhood
• June 18, 2015 at 1:51 pm #185877
  PatrikCZ

  Member

  Post count: 51

  Hi guys

  We have changed style of social icon in header, now they are in color. We would like to do the same with product pages. Please could you help how to make the sharing icons colorful as well?

  Thanks a lot,

  Patrik

  June 18, 2015 at 2:55 pm #185911
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  Hi

  Where have you added your custom css for the social icons?

  – Kyle

  June 18, 2015 at 2:59 pm #185913
  PatrikCZ

  Member

  Post count: 51

  I have just changed the code in Theme Options -> Header Options to [social size=”small” type=”facebook,pinterest,skype”]

  June 18, 2015 at 3:04 pm #185919
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  Add this to your custom css:

  .share-links > ul > li a {
    border-radius: 50%;
    display: block;
    height: 20px;
    padding: 5px;
    text-align: center;
    width: 20px;
    line-height: 20px;
    color: #fff;
  }

  To set each background color you will ned to use this css:

  .share-links > ul > li a.product_share_facebook {
    background-color: #3b5998;
  }

  For each icon change ‘facebook’ and the hex value

  – Kyle

  June 24, 2015 at 12:26 pm #187969
  PatrikCZ

  Member

  Post count: 51

  Thanks a lot for your help, Kyle, anyway I am not successful with “envelope” and “google-plus”.

  Please could you check the code below…?

  .share-links > ul > li a {
  border-radius: 50%;
  display: block;
  height: 20px;
  padding: 5px;
  text-align: center;
  width: 20px;
  line-height: 20px;
  color: #fff;
  }
  .share-links > ul > li a.product_share_facebook {
  background-color: #355091;
  }
  .share-links > ul > li a.product_share_twitter {
  background-color: #007caa;
  }
  .share-links > ul > li a.product_share_google-plus {
  background-color: #d83927;
  }
  .share-links > ul > li a.product_share_pinterest {
  background-color: #c51d23;
  }
  .share-links > ul > li a.product_share_envelope {
  background-color: #8f8f8f;
  }

  June 24, 2015 at 12:38 pm #187980
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  Should be

  .share-links > ul > li a.product_share_email {
  background-color: #8f8f8f;
  }

  – Kyle

  June 24, 2015 at 1:22 pm #188030
  PatrikCZ

  Member

  Post count: 51

  Thanks a lot, it’s working.
  And what about the Google Plus? Please help…

  June 24, 2015 at 2:19 pm #188067
  Rui Guerreiro – SUPPORT

  Keymaster

  Post count: 25779

  Hi,

  Try this one

  .share-links ul li:nth-child(4) a {
    background-color: red;
  }

  -Rui

  June 24, 2015 at 2:28 pm #188072
  PatrikCZ

  Member

  Post count: 51

  It’s working, thanks a lot to both of you guys!
  Have a nice day,
  Patrik

  June 24, 2015 at 2:29 pm #188073
  Rui Guerreiro – SUPPORT

  Keymaster

  Post count: 25779

  no problem. Thanks Kyle
  -Rui

  June 25, 2015 at 10:07 am #188416
  PatrikCZ

  Member

  Post count: 51

  Hi,

  unfortunately I have to come back to you as new settings is not working in blog – please see at http://www.dogg.cz/jak-vybrat-spravnou-barvu-obojku/

  There is missing icon for Google+ and link sharing. Any idea?

  Thank you in advance.

  June 25, 2015 at 10:27 am #188427
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  Sorry

  Should be:

  .share-links ul li:nth-child(3) a {
    background-color: #d83927;
  }

  – Kyle

  June 25, 2015 at 11:19 am #188458
  PatrikCZ

  Member

  Post count: 51

  I’m sorry, but this is not working, as it recolor the Twitter icon on product pages as well… 🙁

  June 25, 2015 at 11:22 am #188460
  Rui Guerreiro – SUPPORT

  Keymaster

  Post count: 25779

  Try this one

  
  .single-post .share-links > ul > li:nth-child(3) a {
    background-color: red;
  }

  -Rui

  June 25, 2015 at 11:39 am #188477
  PatrikCZ

  Member

  Post count: 51

  Now the color of Google+ is fine, thank you.
  Please could you have a look at Google+ button once again? The sharing is not working, as I can see that the shared URL is not included in the link. You can check it at http://www.dogg.cz/jak-vybrat-spravnou-barvu-obojku/

• Back to forum

  Posted in: Neighborhood