Documentation Social Sharing Buttons for WordPress

Customize your buttons, or create you own theme with CSS and Nobs • Share Buttons

Kind reminder: This tutorial is made for the Nobs • Share Buttons (ex-Juiz Social Post Sharer) plugin available on the WordPress repository but also on Github.

Before I start telling you how CSS works, you better know how HTML is structured to understand how the styles apply.

HTML Structure of Nobs • Share Buttons

This plugin is part of the WordPress environment. As so, and to avoid any conflict with existing plugins, all the classes used are prefixed with juiz_sps_, the code name of the plugin, based on its old name.

<div class="juiz_sps_links counters_both juiz_sps_displayed_both" data-post-id="10000">
	
	<p class="screen-reader-text juiz_sps_maybe_hidden_text">Share the post "Testing with a post"</p>

	<ul class="juiz_sps_links_list">
		
		<!-- Markup for a core plugin button -->
		<li class="juiz_sps_item juiz_sps_link_tumblr">
			<a href="https://www.tumblr.com/widgets/share/tool?canonicalUrl={url}" rel="nofollow" title="Share this article on Tumblr">
				<span class="juiz_sps_icon jsps-tumblr"></span>
				<span class="juiz_sps_network_name">Tumblr</span>
			</a>
		</li>

		<!-- Markup for a custom button -->
		<li class="juiz_sps_item juiz_sps_link_{custom-name}" style="--jsps-custom-color:#bada55;--jsps-custom-hover-color:#a9c944;">

			<a href="https://buffer.com/add?text={title}&url={url}" rel="nofollow" title="Share on {Custom Name}">
				<span class="juiz_sps_icon jsps-{custom-name}">
					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">…</svg>
				</span>
				<span class="juiz_sps_network_name">Custom Name</span>
			</a>
		</li>

		<!-- ... -->
	</ul>
</div>

You need to know that, even if the HTML uses semantic structure like a UL for the list and LI for the list-items, you can change all of that thanks to filters. Have a look at all the filters ending by _tag in this documentation. For instance: juiz_sps_list_container_tag

As you can see, custom button (see: Create a Custom Button) is a little bit different, but shares a big amount of the same markup.

CSS of Nobs • Share Buttons

Now you know more about the structure, let's give you some pieces of advice on the CSS.

Unfortunately, I won't be able to give you a step by step guide to create your own skin, because it relies on a lot of external parameters like: the design you want, the font you use for your theme, the knowledge you have in CSS, etc. But here are some tips and tricks for CSS developers.

Classes and selector weight

Has you may know, the way you write your CSS selectors has an impact on the way they are interpreted, and applied. For instance:

.juiz_sps_links .juiz_sps_links_list {
	display: grid;
}

.juiz_sps_links_list {
	display: flex;
}

In this case, the winner is grid, because the first selector has two classes, its weight is bigger than the second selector.

You the default CSS files for the core skins, I tend to have strong selector to be sure your WordPress Theme doesn't break the styles, but I also tend not to have to heavy selectors. I limit those to 3 classes on purpose.

Pro-tips: if you need to make a selector really heavy to override a style applied, never use !important unless it's applied in the original CSS files, prefer using this trick: .juiz_sps_links_list.juiz_sps_links_list.juiz_sps_links_list. This code seems dumb, but it uses the double attribution of an element to make the selector heavier using the same class.

WordPress Theme Conflict

This is the most common issue with styling for a plugin, and by building a custom skin for Nobs • Share Buttons, you will encounter the same problem while doing it.

Here are some pieces of advice while building your skin:

be careful of the weight of the selectors, as seen in the previous section.
!important is your ennemy: bad coded theme use a lot of that at the end of there CSS properties value because those developers are not necessarily aware of how bad it is for maintenance. When you encounter these beats, you can only kill those with the same trick.
```
.juiz_sps_links {
	display: grid!important;
}
```
be careful of the inherited styles, and in case of doubt, debug using !important here and there.
remember to target things at the lowest level, meaning that if you need to change the color of the link text, do not style the anchor <a> but prefer styling the <span> within.

Example of an empty StyleSheet

To help you start with you CSS, here is an common example of the selectors used in some of the core themes.
This example proposes some already written CSS properties, these ones are the ones you can keep it that way. For the colors and some other stuff, you can completely do what you want.

Important: You won't have a good looking skin by simply copy/pasting this code, it's almost only empty selectors to help you started.

/**
* Plugin Name: Nobs • Share Buttons
* Plugin URI: https://sharebuttons.social
* Author: Geoffrey Crofte
* Version: Styles v8 inspired from Material Design
*/

/* Colors using CSS native variables */
.juiz_sps_links {
	--neutral: #333C45;
	--neutraldark: #1A1C1E;

	--twitter: #1DA1F2;
	--twitterdark: #005FD1;

	--linkedin: #0A66C2;
	--linkedindark: #004183;

	--facebook: #1778F2;
	--facebookdark: #385898;

	--viadeo: #F07355;
	--viadeodark: #D64928;

	--weibo: #D52A2C;
	--weibodark: #AD1719;

	--pinterest: #E60023;
	--pinterestdark: #AE0719;

	--vk: #4680C2;
	--vkdark: #304186;

	--tumblr: #001935;
	--tumblrdark: #020C16;

	--reddit: #FF4500;
	--redditdark: #CF4816;

	--diigo: #368BFF;
	--diigodark: #256ED2;

	--evernote: #00A82D;
	--evernotedark: #0D862E;

	--pocket: #EF4056;
	--pocketdark: #CB3F50;

	--mix: #FF8126;
	--mixdark: #DE201D;

	--whatsapp: #128C7E;
	--whatsappdark: #075E54;

	--shareapi: #5250B1;
	--shareapidark: #3C3B69;
}

@font-face {
	font-family: 'jsps-icons';
	src: url('../common/fonts/jsps.woff2?200') format('woff2'),
	     url('../common/fonts/jsps.woff?200') format('woff'),
		 url('../common/fonts/jsps.ttf?200') format('truetype'),
		 url('../common/fonts/jsps.svg?200') format('svg');
	font-weight: normal;
	font-style: normal;
}

.juiz_sps_icon {
	font-family: 'jsps-icons'!important;
	speak: never;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-size: 32px;
}

.jsps-bookmark::before {
	content: "\e900";
}
.jsps-diigo::before {
	content: "\e901";
}
.jsps-evernote::before {
	content: "\e902";
}
.jsps-facebook::before {
	content: "\e903";
}
.jsps-linkedin::before {
	content: "\e904";
}
.jsps-mail::before {
	content: "\e905";
}
.jsps-mix::before {
	content: "\e906";
}
.jsps-pinterest::before {
	content: "\e907";
}
.jsps-pocket::before {
	content: "\e908";
}
.jsps-print::before {
	content: "\e909";
}
.jsps-reddit::before {
	content: "\e90a";
}
.jsps-share::before,
.jsps-shareapi::before {
	content: "\e90b";
}
.jsps-tumblr::before {
	content: "\e90c";
}
.jsps-twitter::before {
	content: "\e90d";
}
.jsps-viadeo::before {
	content: "\e90e";
}
.jsps-vk::before {
	content: "\e90f";
}
.jsps-weibo::before {
	content: "\e910";
}
.jsps-whatsapp::before {
	content: "\e911";
}

.juiz_sps_links {
}

.juiz_sps_maybe_hidden_text {
	position: absolute;
	left: -9999em;
	text-indent: -9999em;
}
[dir="rtl"] .juiz_sps_maybe_hidden_text {
	position: absolute;
	right: -9999em;
}

/* List items and lists are oftentime styled by WP Templates */
.juiz_sps_links .juiz_sps_links_list,
.juiz_sps_links .juiz_sps_item  { 
	padding: 0!important;
	margin: 0!important;
	list-style: none!important;
}

/* UL list */
.juiz_sps_links .juiz_sps_links_list {
}

/* LI item */
.juiz_sps_links .juiz_sps_item {
}

/* Link / Button */
.juiz_sps_links .juiz_sps_item .juiz_sps_button {
}

/* The network name */
.juiz_sps_links .juiz_sps_item .juiz_sps_network_name {
}

/* The icons */
.juiz_sps_links .juiz_sps_icon {
}

.juiz_sps_links .juiz_sps_icon svg {
	width: calc(100% - 6px); /* env. 6px, can vary */
	height: calc(100% - 6px);
}

/* The link when hovered/focused */
.juiz_sps_links .juiz_sps_item .juiz_sps_button:hover,
.juiz_sps_links .juiz_sps_item .juiz_sps_button:focus {
}

/* The link when active/clicked/touched */
.juiz_sps_links .juiz_sps_item .juiz_sps_button:active {
}

/**
 * Color Application
 */
.juiz_sps_links .juiz_sps_link_twitter .juiz_sps_button {
	background-color: var(--twitter);
}

.juiz_sps_links .juiz_sps_link_twitter .juiz_sps_button:hover,
.juiz_sps_links .juiz_sps_link_twitter .juiz_sps_button:focus { 
	background-color: var(--twitterdark);
}

/* ... and so on... */

/**
 * Specific: When names are hidden via the options
 */

.juiz_sps_hide_name .juiz_sps_item .juiz_sps_button {
	padding: 8px; /* override --link-padding */
}

.juiz_sps_hide_name .juiz_sps_button .juiz_sps_network_name {
	max-width: 0;
	white-space: nowrap!important;
	overflow: hidden;
}

.juiz_sps_hide_name .juiz_sps_button .juiz_sps_network_name { 
	-webkit-transition: max-width .75s;
			transition: max-width .75s;
}

.juiz_sps_hide_name .juiz_sps_button .juiz_sps_icon {
	margin-right:0;
	-webkit-transition: margin .75s;
			transition: margin .75s;
}

.juiz_sps_hide_name .juiz_sps_item .juiz_sps_button:hover,
.juiz_sps_hide_name .juiz_sps_item .juiz_sps_button:focus {
	padding: var(--link-padding);
}

.juiz_sps_hide_name .juiz_sps_button:hover .juiz_sps_network_name,
.juiz_sps_hide_name .juiz_sps_button:focus .juiz_sps_network_name {
	max-width: 8em;
}

.juiz_sps_hide_name .juiz_sps_button:hover .juiz_sps_icon,
.juiz_sps_hide_name .juiz_sps_button:focus .juiz_sps_icon {
	margin-right: .3em;
}

/**
 * Specific: When Compact Mode is ON
 */
.juiz_sps_links .juiz_sps_compact .juiz_sps_button {
	/* Do something */
}

/**
 * Specific: When Compact Mode and Hidden Name are ON
 */
.juiz_sps_links .juiz_sps_compact.juiz_sps_hide_name .juiz_sps_button {
	/* Do something */
}

/**
 * Specific: When the counters are activated via the options
 */
.juiz_sps_counter {
}

.juiz_sps_totalcount {
}

.juiz_sps_links.counters_total .juiz_hidden_counter {
	display: none!important;
}

/* To avoid buttons being printed when user print the page */
@media print {
	.juiz_sps_links {
		display: none;
		margin: 0;
		padding: 0;
		opacity: 0;
		visibility: hidden;
	}
}

Good coding!

Customize CSS StyleSheet

HTML Structure of Nobs • Share Buttons

CSS of Nobs • Share Buttons

Classes and selector weight

WordPress Theme Conflict

Example of an empty StyleSheet