Grow your CSS skills. Land your dream job.

Can someone help me center these buttons (please.) :-)

  • # October 24, 2012 at 10:36 pm

    I am using the socialize plug in to get my social media share buttons running well. Right now the plug in is putting my like like buttons to the right of my mail content area. I would like them to be centered and display above my content area ([like this site](http://michaelhyatt.com/029-7-rules-for-more-effective-slide-presentations-podcast.html “mh”))

    [Here's a link](http://rickwsmith.com/blog/stories-children-down-syndrome/ “Noah’s dad”) to one of my posts so you can see what it’s looking like. Thanks so much!

    # October 24, 2012 at 11:04 pm

    Firstly, you’ll need to increase the width of your facebook like button since it’s getting cropped.

    Change the width from 55px to about 70px, that should do it.

    Next, you just need to add a clear tag to your .format-image .entry-content > * tag. So, find this in your style.css file:

    .format-image .entry-content > * {
    margin-left: 20px;
    margin-right: 20px;
    }

    and replace it with this:

    .format-image .entry-content > * {
    clear: both;
    margin-left: 20px;
    margin-right: 20px;
    }

    That should make the site look like you want :) Hope I could be of any help!

    # October 24, 2012 at 11:09 pm

    Thanks! So quick question. Do I just enter that in to my child theme css just as you wrote it?

    # October 24, 2012 at 11:12 pm

    Also would this move it above the content area (and not in the content area) like the other link I posted?

    I was thinking I needed to change around some of the PHP files that. No?

    # October 24, 2012 at 11:15 pm

    @ricksmith I guess you can attach a separate CSS file and copy the edited CSS as well, but to change the width of the FB Like button, you’ll need to edit the socialize.php plugins files.

    When you’re working to change the look of a website, all you need is CSS. When you’re looking to change the functionality, then you’ll need to change the PHP/HTML/JS.

    # October 24, 2012 at 11:17 pm

    Thanks. Before when I change around the placement of the meta data, I had to change some theme files. Not sure what that was about.

    Quick question, I can’t change the plug in files, there should be a way to just use css to override the plug in css, right?

    # October 24, 2012 at 11:37 pm

    If that’s the case, you can use an override!

    Just add this to your existing CSS file:

    .socialize-in-button > iframe:first-child {
    width: 100px !important;
    }

    # October 24, 2012 at 11:40 pm

    Ok, thanks. But that doesn’t move the entire row of buttons does it?

    # October 24, 2012 at 11:57 pm

    iframe:first-child

    will make the CSS select only the first child of that iframe, so you’re fine! :)

    # October 25, 2012 at 6:03 pm

    @amruthPillai,

    I just put in your css, but as you can see it’s not changing anything. Any thoughts on what I’m doing wrong?

    # October 25, 2012 at 6:11 pm

    @ricksmith What browser are you using? If it’s IE, what version?

    # October 27, 2012 at 11:30 pm

    @christopherburton – I’m using Chrome and Safari.

    # October 28, 2012 at 12:51 am

    Adding something like this to your stylesheet should do it for you:

    .socialize-in-content {
    background: #efefef;
    clear: both;
    margin-bottom: 20px;
    width: 580px;
    }

    .socialize-in-content > div {
    margin: 10px 0 3px 10px;
    }

    # October 29, 2012 at 3:58 pm

    @antwon Thanks so much. That did it. Any thoughts on how to get the spacing in between the various buttons to look right?

    JDS
    # November 1, 2012 at 2:28 am

    In this particular case, in the order they are in change the line where you made your first button 100px wide, try 115px and play with it till it looks right… I think that should work here. That should give them better looking spacing.

Viewing 15 posts - 1 through 15 (of 16 total)

You must be logged in to reply to this topic.

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