Home › Forums › WoodMart support forum › Change look of social share buttons?

Change look of social share buttons?

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • July 20, 2019 at 2:30 pm #133731

    sanchitgoyal
    Participant

    Hello

    Is it possible to change the look of social share buttons shown below cart from

    http://prntscr.com/ohpltx

    To something like this-

    http://prntscr.com/ohplzy

    July 20, 2019 at 9:05 pm #133758

    Elise Noromit
    Member

    Hello,

    Please add this code to the Theme Settings > Custom CSS > Global:

    body .icons-design-default .woodmart-social-icon {
    padding: 10px 5px;
}
body.single .woodmart-social-icons i {
  display:block;
	padding:5px;
	color:white;
}
body.single .woodmart-social-icons i.fa-facebook {
background-color:blue;
}
body.single .woodmart-social-icons i.fa-twitter {
background-color:blue;
}
body.single .woodmart-social-icons i.fa-pinterest{
background-color:blue;
}
body.single .woodmart-social-icons i.fa-linkedin {
background-color:blue;
}
body.single .woodmart-social-icons i.fa-telegram {
background-color:blue;
}

    Change the class of social icon fa-telegram as per your needs as well as the background colors.

    Best Regards

    July 20, 2019 at 9:18 pm #133759

    sanchitgoyal
    Participant

    Hello

    http://prntscr.com/ohtmcp
    http://prntscr.com/ohtmnq

    It seems the code changes the colour everywhere and also change alignment in the footer. I was hoping to change the background only after the add to cart button area while leaving the social icons in the header and footoer (and other places if any) intact.

    Something like this is also good as it is shown in footer.

    http://prntscr.com/ohtnqj

    Would that be possible? Regards.

    July 21, 2019 at 8:07 am #133766

    Elise Noromit
    Member

    Hello,

    Please provide your site admin access. I have checked the code it works only on the product page. I would like to check on your site.

    Best Regards

    July 22, 2019 at 11:52 am #133891

    sanchitgoyal
    Participant

    Hello

    Please find login details. You are correct the code works only on the product page but it works everywhere on the product page including the header and footer. Regards.

    July 22, 2019 at 1:31 pm #133908

    Elise Noromit
    Member

    Hello,

    Please replace the provided code with this one:

    body.single .entry-summary .icons-design-default .woodmart-social-icon {
    padding: 10px 5px;
}
body.single .entry-summary .woodmart-social-icons i {
  display:block;
	padding:5px;
	color:white;
}

body.single .entry-summary i.fa-facebook {
background-color:blue;
}
body.single .entry-summary i.fa-twitter {
background-color:blue;
}
body.single .entry-summary i.fa-envelope{
background-color:blue;
}
body.single .entry-summary i.fa-pinterest{
background-color:blue;
}
body.single .entry-summary i.fa-linkedin {
background-color:blue;
}

    Best Regards

    July 23, 2019 at 12:02 pm #134053

    sanchitgoyal
    Participant

    This works great. Thanks very much.

    July 23, 2019 at 2:04 pm #134078

    Elise Noromit
    Member

    You are welcome! If you have any questions please feel free to contact us.

    Best Regards

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)

The topic ‘Change look of social share buttons?’ is closed to new replies.