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.