The social media sharing buttons have developer-friendly HTML to make it super easy to customize with CSS. Below is an example of that HTML in its most basic form:
<p class="socialized-links">
<span class="share-text screen-reader-text">Share this on:</span>
<span class="socialized-link-wrapper <platform>">
<a class="socialized-link" href="<link>">
<icon output>
</a>
</span>
</p>With every element having a unique class, you can easily create selectors to style them as you wish. Nothing in my plugin’s CSS uses the !important tag so it’s also easy to override a default style.
Examples
Changing Icon Colors
When using the FontAwesome library to display dynamic icons, the default appearance uses that platform’s primary color as the background and white as the color of the icon. The CSS that comes packaged with my plugin uses Facebook Blue or Pinterest Red.
But what if you wanted to change it so all of the background images use a single color? Perhaps your brand’s primary color? You could easily do that in CSS like this:
a.socialized-link {
background-color: #e93454 !important;
}Moving the Buttons
By default, there’s only a few options to determine a location: top or bottom (horizontally) or sticking vertically to the left or right.
You can get creative by using the shortcode anywhere within your content or even within your template (header or footer perhaps?) and then can modify it’s location even further with this selector:
p.socialized-links {
/* Add custom CSS here */
}