Grow your CSS skills. Land your dream job.

Need help with a quick styling issue.

  • # September 24, 2012 at 1:42 pm

    If you look at the bottom of this [post](http://noahsdad.com/nyc-buddy-walk-times-square-2012/ “Times Square Down Syndrome Buddy Walk”) you’ll notice the social sharers need a bit of styling love. I’m just now starting to get my feet wet with CSS and was hoping someone could take a look and help me step up the styling / look of the sharers. Thanks so much!

    # September 24, 2012 at 1:59 pm

    I would probably just use firebug or something to inspect each element to see what classes they are using, then add those classes to your stylesheet. You may need to use !important to overwrite the styles though since they use styles from a css sheet you don’t have access too. There may be a better way out there, but I’m not sure of one.

    # September 24, 2012 at 3:11 pm

    I think that changing the Facebook button layout will already solve a lot. Right now it’s too wide for placement on the same line, so make it a little shorter by adding layout="button_count" and change the width from 450 to 100 or so. Unless you really want all the faces to show and have it that width, and use different styling, in which case I would second@jkinney768‘s suggestion.

    Anyway, change the FB button into something like this and it might look better already:

    # September 24, 2012 at 4:05 pm

    Social sharing buttons are usually a huge pain in my experience, and especially if you’re using the default styles that come in with the snippet (it looks like you’re using AddThis, maybe?) Sometimes spacing is funky, and you end up fighting against it a bunch.

    To combat it, I usually do one of the following:

    I look to see if the site that provided the snippet (places like AddThis, etc) offer a version that is unstyled, and it’s much easier to make them do what you want.

    Or, I have to resort to what has been mentioned above: Tweak specific buttons that aren’t playing nice. Some of the time it ends up meaning changing stuff inline, or throwing !important at it (which is kind of gross, and feels dirty). Sometimes it’s the only way though.

    # September 24, 2012 at 5:25 pm

    @Sneff Thanks so much for your feedback. I’m not sure where to change that line since I”m using a plug in (Digg Digg) . Is there something I can just add to my css in my child theme?

    Also we have such a large and active social media presence that chances are if someone visits a post / our site someone they know on FB may have liked it also. So I wanted to find a way to have those faces showing. Is there a way to make it look pretty and still have the faces showing?

    By the way, here is a post that got a lot of likes, It’d be intresting to see if someone you are friends with liked that article (below the post) or are a fan of us on facebook (the fb like box on the right hand side of the page.) [Here's the post](http://noahsdad.com/target-down-syndrome/ “target down syndrome model”)

    Thanks for your help, looking forward to seeing what you think.

    @Kevinvance – I totally agree with you. I really like to just use the snippet, but I just didn’t know how to take all of the snippets and make it work (and look) correctly. But I agree with you, that would be a much better option all the way around.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".