I suggest you ...

Add class specifiers to social icon markup

If you added 'class="social_facebook" or something ANYWHERE in the markup for the social icon modules subelements, I could replace the icons with just css and not need to recode the module. I don't mind recoding the module but then all your fancy 'connect to social service', 'select social services to display' etc are for nought.
Currently the social icon markup is a span wrapper, with 'a' tags wrapping the individual img tags. if you just aadded the social service identifier into the href tag, I could do all sorts of things, but right now I'd have to use nth selectors which are not compatible and wouldnt work if the end user turned off an icon or added one.. seriously just add a class specifying which social service it is!

10 votes
Vote
Sign in
Check!
(thinking…)
Reset
or sign in with
  • sso
  • facebook
  • google
    Password icon
    Signed in as (Sign out)
    You have left! (?) (thinking…)
    ErikErik shared this idea  ·   ·  Flag idea as inappropriate…  ·  Admin →

    3 comments

    Sign in
    Check!
    (thinking…)
    Reset
    or sign in with
    • sso
    • facebook
    • google
      Password icon
      Signed in as (Sign out)
      Submitting...
      • RaduRadu commented  ·   ·  Flag as inappropriate

        Follow Me module has specific classes, so I assume you are referring to the Social Sharing module. In the current format, you can use these selectors to target the specific social network icons:

        /* All */
        .hs_cos_wrapper_type_social_sharing a {/* your styles */}

        /* Facebook */
        .hs_cos_wrapper_type_social_sharing a[href*="facebook.com/"] {/* your styles */}

        /* LinkedIn */
        .hs_cos_wrapper_type_social_sharing a[href*="linkedin.com/"] {/* your styles */}

        /* Twitter */
        .hs_cos_wrapper_type_social_sharing a[href*="twitter.com/"] {/* your styles */}

        /* LinkedIn */
        .hs_cos_wrapper_type_social_sharing a[href*="google.com/"] {/* your styles */}

        /* Pinterest */
        .hs_cos_wrapper_type_social_sharing a[href*="pinterest.com/"] {/* your styles */}

        /* Email */
        .hs_cos_wrapper_type_social_sharing a[href*="mailto:"] {/* your styles */}

        But for emails I won't recommend this as major clients will strip out your none-inline CSS, but it should be perfectly safe for your site pages.

        I hope this helps!

      • ErikErik commented  ·   ·  Flag as inappropriate

        I'm not going to waist a vote on this as it should already be there. With all of the extraneous markup generated by the COS, i'm surprised this isn't there.

        Also, while you're at it, could you remove the inline styling you have on the social module as well? Which again, as much as you folks harp on inline styling, I'm really surprised this is here..

      Feedback and Knowledge Base