Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

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

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #40442
    ricksmith
    Participant

    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!

    #112571
    AmruthPillai
    Member

    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!

    #112573
    ricksmith
    Participant

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

    #112574
    ricksmith
    Participant

    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?

    #112575
    AmruthPillai
    Member

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

    #112577
    ricksmith
    Participant

    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?

    #112579
    AmruthPillai
    Member

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

    #112580
    ricksmith
    Participant

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

    #112584
    AmruthPillai
    Member

    iframe:first-child

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

    #112648
    ricksmith
    Participant

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

    #112649
    chrisburton
    Participant

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

    #112796
    ricksmith
    Participant

    @christopherburton – I’m using Chrome and Safari.

    #112800
    antwon
    Participant

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

    #112877
    ricksmith
    Participant

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

    #113085
    JDS
    Member

    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)
  • The forum ‘CSS’ is closed to new topics and replies.