Tutorial - Color social share icon | Welcome to My Sharing Site

Runi · 2023-08-15T20:13:28+00:00

add an extra.less or use default 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 within the topic, add them to the extra.less template again; .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