XenForo Color Social share icon

alodda

Loyal Member
Registered
  • because gray makes me sad I suggest you add a little color to your social share icon 🙂
  • How to ?
  • add an extra.less template
CSS:
.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;
CSS:
.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;
}

  • Before
ab5663e08b252.png

  • After
ecc0ae3091e23.png

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