How to update share icon on single product page to original color

This topic has 3 replies, 2 voices, and was last updated 3 years, 1 month ago by Aizaz Imtiaz Awan.

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Posts
November 22, 2021 at 5:19 am #333536

iammohitsingh
Participant

Hi Team,

How we can update icon of share button on Single product page with original icons.
I have tried to add below snipset code in theme setting for global custom CSS but no changes reflected.

body.single .icons-design-default .woodmart-social-icon.social-facebook {
color:#000080!important;
}
body.single .icons-design-default .woodmart-social-icon.social-twitter {
color:#00FFFF!important;
}

body.single .icons-design-default .woodmart-social-icon.social-whatsup {
color:#00FF00!important;
}

Attachments:
You must be logged in to view attached files.

November 22, 2021 at 8:40 am #333590
Aizaz Imtiaz Awan
Keymaster
Hello,

Please try adding the following Custom CSS in the Global Custom CSS area under Theme Settings >> Custom CSS.
```
.social-facebook .wd-icon:before {
    color: white;
    background-color: #365493;
    padding: 5px;
    border-radius: 50%;
}

.social-twitter .wd-icon:before {
    color: white;
    background: #3CF;
    padding: 5px;
    border-radius: 50%;
}

.social-pinterest .wd-icon:before {
    background: #CB2027;
    color: white;
    padding: 5px;
    border-radius: 50%;
}

.social-linkedin .wd-icon:before {
    background: #0274B3;
	    color: white;
    padding: 5px;
    border-radius: 50%;
}
.social-tg .wd-icon:before {
    background: #37AEE2;
		    color: white;
    padding: 5px;
    border-radius: 50%;
}
```
Best Regards
November 22, 2021 at 9:32 am #333603

iammohitsingh
Participant

Hi Aizaz,

Its not worked as expected. My expectation is that when we hover on social icon then it should display its original social icon. And Facebook icon is also not proper. Please refer attach screen shots.

And i want to reorder/rearrange those icon how we can do it and want to include whatsup icon also. and also want to remove some of social link like pininterst and telegram.

Attachments:
You must be logged in to view attached files.

November 22, 2021 at 11:11 am #333650
Aizaz Imtiaz Awan
Keymaster
Hello,

Please replace the previous Custom CSS with the following.
```
.wd-social-icon:hover {
    color: #fff !important;
}
.social-facebook:hover {
    border-color: #365493;
    background-color: #365493;
}
.wd-social-icon {
    border: 2px solid #CCC;
    background-color: transparent;
    color: rgba(0,0,0,0.4) !important;
}

.social-twitter:hover {
    border-color: #3CF;
    background-color: #3CF;
}

.social-pinterest:hover {
    border-color: #CB2027;
    background-color: #CB2027;
}

.social-linkedin:hover {
    border-color: #0274B3;
    background-color: #0274B3;
}

.social-tg:hover {
    border-color: #37AEE2;
    background-color: #37AEE2;
}
```
You can configure the social icons from Theme Settings >> Social Profiles.

Best Regards
Author

Posts