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

[ricksmith]

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!

[AmruthPillai]

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!

[ricksmith]

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

[ricksmith]

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?

[AmruthPillai]

@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.

[ricksmith]

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?

[AmruthPillai]

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;
}

[ricksmith]

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

[AmruthPillai]

iframe:first-child

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

[ricksmith]

@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?

[chrisburton]

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

[ricksmith]

@christopherburton – I’m using Chrome and Safari.

[antwon]

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;
}

[ricksmith]

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

[JDS]

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.

[Author]

Posts