XF 2 Tip Colorize XenForo Social Share Buttons

xauUUL

I got less but I got best!
Collaborate
Registered
Joined
Jun 22, 2021
Messages
118
Points
43

Reputation:

Hi :)

You can color the gray social share buttons in Xenforo 2.

Add it to the extra.less template;

.shareButtons-button.shareButtons-button--facebook {

background-color: #3B5998;

}

.shareButtons-button.shareButtons-button--twitter {

background-color: #1DA1F3;

}

.shareButtons-button.shareButtons-button--gplus {

background-color: #dd4b39;

}

.shareButtons-button.shareButtons-button--reddit {

background-color: #FF4500;

}

.shareButtons-button.shareButtons-button--pinterest {

background-color: #bd081c;

}

.shareButtons-button.shareButtons-button--tumblr {

background-color: #35465c;

}

.shareButtons-button.shareButtons-button--whatsApp {

background-color: #25D366;

}

.shareButtons-button.shareButtons-button--email {

background-color: #1289ff;

}

.shareButtons-button.shareButtons-button--link {

background-color: #787878;

}

.shareButtons--iconic .shareButtons-button:hover {

opacity: .5;

}

.shareButtons--iconic .shareButtons-button {

opacity: 1;

color: #fff;

margin: 0 3px 3px;

}

If you want to frame the buttons in the subject, add them to the extra.less template;

.blockMessage.blockMessage--none {

background: #fff;

color: #141414;

padding: 10px 10px 6px;

border-width: 1px;

border-style: solid;

border-top-color: #dfdfdf;

border-right-color: #d8d8d8;

border-bottom-color: #cbcbcb;

border-left-color: #d8d8d8;

}
 
Top