If you are using Super Socializer or Sassy Social Share plugin for Social Sharing, follow the steps mentioned below to customize the look of total share counts.

Super Socializer

You can change font size of Total Count by applying CSS to .the_champ_horizontal_sharing .theChampTotalShareCount (for standard sharing interface) and .the_champ_vertical_sharing .theChampTotalShareCount (for floating sharing interface) selectors.

You can change font size of “Shares” text below total count by applying CSS to .the_champ_horizontal_sharing .theChampTotalShareText (for standard sharing interface) and .the_champ_vertical_sharing .theChampTotalShareText (for floating sharing interface) selectors.

You can customize the look by applying CSS to .the_champ_horizontal_sharing .theChampTCBackground (for standard sharing interface) and .the_champ_vertical_sharing .theChampTCBackground (for floating sharing interface) selectors.

You have to save this CSS in Custom CSS option at Super Socializer > General Options page in admin area.

Note: Use CTRL/CMD + Shift + V to paste any of the CSS below into your WordPress editor to avoid errors!

Examples:

Custom font size

.the_champ_horizontal_sharing .theChampTotalShareCount{
	font-size: 19px !important;
}
.the_champ_horizontal_sharing .theChampTotalShareText{
	font-size: 11px !important;
}

Custom background color

.the_champ_horizontal_sharing .theChampTCBackground{
	background-color: #eee !important;
	border-radius: 0px !important;
	width: 87px !important;
	padding: 3px 10px 36px 10px;
}

Custom font color

.the_champ_horizontal_sharing .theChampTCBackground{
	color: blue !important;
}

Custom border

.the_champ_horizontal_sharing .theChampTotalShareCount{
	font-size: 20px !important;
}
.the_champ_horizontal_sharing .theChampTotalShareText{
	font-size: 11px !important;
}
.the_champ_horizontal_sharing .theChampTCBackground{
	border: 1px solid #ccc !important;
	border-radius: 8px !important;
	width: 87px !important;
	padding: 3px 10px 36px 10px;
}

You can apply these CSS simultaneously to achieve combined effect. You can modify the look of counts according to the applied CSS.

Sassy Social Share

You can change font size of Total Count by applying CSS to .heateor_sss_horizontal_sharing .heateorSssTotalShareCount (for standard sharing interface) and .heateor_sss_vertical_sharing .heateorSssTotalShareCount (for floating sharing interface) selectors.

You can change font size of “Shares” text below total count by applying CSS to .heateor_sss_horizontal_sharing .heateorSssTotalShareText (for standard sharing interface) and .heateor_sss_vertical_sharing .heateorSssTotalShareText (for floating sharing interface) selectors.

You can customize the look by applying CSS to .heateor_sss_horizontal_sharing .heateorSssTCBackground (for standard sharing interface) and .heateor_sss_vertical_sharing .heateorSssTCBackground (for floating sharing interface) selectors.

You have to save this CSS in Custom CSS option in Miscellaneous section at plugin options page in admin area.

Examples:

Custom font size

.heateor_sss_horizontal_sharing .heateorSssTotalShareCount{
	font-size: 19px !important;
}
.heateor_sss_horizontal_sharing .heateorSssTotalShareText{
	font-size: 11px !important;
}

Custom background color

.heateor_sss_horizontal_sharing .heateorSssTCBackground{
	background-color: #eee !important;
	border-radius: 0px !important;
	width: 87px !important;
	padding: 3px 10px 36px 10px;
}

Custom font color

.heateor_sss_horizontal_sharing .heateorSssTCBackground{
	color: blue !important;
}

Custom border

.heateor_sss_horizontal_sharing .heateorSssTotalShareCount{
	font-size: 20px !important;
}
.heateor_sss_horizontal_sharing .heateorSssTotalShareText{
	font-size: 11px !important;
}
.heateor_sss_horizontal_sharing .heateorSssTCBackground{
	border: 1px solid #ccc !important;
	border-radius: 8px !important;
	width: 87px !important;
	padding: 3px 10px 36px 10px;
}

You can apply these CSS simultaneously to achieve combined effect. You can modify the look of counts according to the applied CSS.

 

If you are using Super Socializer or Sassy Social Share plugin for Social Sharing, follow the steps mentioned below to customize the look of individual share counts.

Super Socializer

You can customize the look of individual share counts by applying CSS to .the_champ_horizontal_sharing .the_champ_square_count (for standard sharing interface) and .the_champ_vertical_sharing .the_champ_square_count (for floating sharing interface) selectors.

You have to save this CSS in Custom CSS option at Super Socializer > General Options page in admin area.

Note: Use CTRL/CMD + Shift + V to paste any of the CSS below into your WordPress editor to avoid errors!

Examples:

.the_champ_horizontal_sharing .the_champ_square_count{
    background-color: #58B8F8 !important;
    border-radius: 999px !important;
    border: 2px solid #fff !important;
    box-shadow: 0 2px 2px rgba(0,0,0,.4) !important;
    color: #fff !important;
}

.the_champ_horizontal_sharing .the_champ_square_count{
    background-color: #58B8F8 !important;
    border: 2px solid #fff !important;
    box-shadow: 0 2px 2px rgba(0,0,0,.4) !important;
    color: #fff !important;
}

You can modify the look of counts according to the applied CSS.

Sassy Social Share

You can customize the look of individual share counts by applying CSS to .heateor_sss_horizontal_sharing .heateor_sss_square_count (for standard sharing interface) and .heateor_sss_vertical_sharing .heateor_sss_square_count (for floating sharing interface) selectors.

You have to save this CSS in Custom CSS option in Miscellaneous section at plugin options page in admin area.

Examples:

.heateor_sss_horizontal_sharing .heateor_sss_square_count{
    background-color: #58B8F8 !important;
    border-radius: 999px !important;
    border: 2px solid #fff !important;
    box-shadow: 0 2px 2px rgba(0,0,0,.4) !important;
    color: #fff !important;
}

.heateor_sss_horizontal_sharing .heateor_sss_square_count{
    background-color: #58B8F8 !important;
    border: 2px solid #fff !important;
    box-shadow: 0 2px 2px rgba(0,0,0,.4) !important;
    color: #fff !important;
}

You can modify the look of counts according to the applied CSS.