XenForo Color Social share icon

CR LEAKS

Administrators
Joined
Mar 25, 2022
Messages
1,485
Credits
28,056
  • because gray makes me sad I suggest you add a little color to your social share icon ?
  • How to ?
  • add an extra.less template

Code:
.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 within the topic, add them to the extra.less template again;


Code:
.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;
}

you can change the colors as you want ?
 
Back
Top Bottom