How to customize the look of individual share counts? - Heateor

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.