Forums

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)

Here's a link 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.

  <iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Frickwsmith.com%2Fblog%2Fstories-children-down-syndrome%2F&amp;send=false&amp;layout=button_count&amp;width=55&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=arial&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:55px; height:21px;" allowTransparency="true"></iframe>

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.

ricksmith

@jds Thanks so much!

treehouse : what would you like to learn today?

Forums

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