How to center icons?

Hi, you can view the plugin in use here:

http://musodatabase.com/blog/interview-with-billy-cobham/

How do I go about centering the icons so they look neater? I dug around in the forum and found a solution to add 10px margin but can't work this one out.

Please help! Thanks,

Dave

  • James Dunn
    • The Crimson Coder

    Good day Dave.

    I dug around in the CSS (using Firebug for FireFox) and discovered one possible solution.

    For the FB icons, you can just make them wider by changing the padding in .plugincountbox to the following (padding: 6px 18px 2px 3px:wink: - supposedly, this is somewhere about line 43.

    For the G+ icon, go to element.style and change the float to right. I couldn't find any similar properties between FB and G+. There may be, but I couldn't find them.

    I'm about to pass out - need sleep - or I'd look them all up for you. Anyway, you get the idea? Also, there may be a much easier way to go about it, but I didn't dig into it. When I used this once before, I worked with it for quite some time to get it styled just like I wanted it. Then, the client decided he didn't like the look and I just turned it off.

    Hope this has been helpful. I also hope someone else tells you a better way. I'm going to follow this thread to see what someone else comes up with.

    James Dunn
    Athens, GA USA

  • Kimberly
    • Champion of Loops

    Hey there!

    Your buttons are actually all lined up on the left side. I've tried changing your

  • float property to center and that doesn't help.

    This is because each of the boxes are sized differently via the different social networks

    You can tackle each one individually, changing the margin for each the ones that are smaller (everything but facebook or linkedin) or you can take those two larger ones and scale them down a bit.

    Up to you, but either way will take a bit of tweaking. James has a good idea :slight_smile:

    Be sure you have Firebug, it's a great tool for custom stuff like this!

    Best

    Kimberly

  • davejmason
    • Site Builder, Child of Zeus

    Hi there,

    Thanks for the replies folks. I've been using the Google Chrome equivalent of Firebug and I'm usually not too bad at navigating my way around css but this one really has me stumped.

    I can't find where to enter the .plugincountbox css code you mentioned James and I've tried fiddling with all kinds of values in the Chrome Firebug but can't seem to make any difference, even when using !important.

    Please could you give me an example of how to line up the Facebook box so I can replicate the process across all the other icons?

    Thanks,

    Dave

  • James Dunn
    • The Crimson Coder

    Hey Dave.

    That's what was weird about it. the Facebook icon could be made wider using the code I mentioned above (in Firebug in Firefox, but now sure how it would appear in Chrome's version). However, the other icons seemed to each have their own way of being adjusted. As someone else said, I'm wondering exactly where they get their sizing from - maybe from their respective services.

    I'm a bit at a loss here past what I posted earlier. I'm preparing for 4th of July fireworks at two different locations synchronized to music from a radio station that I'm working with so I'm kinda out of some serious work until July 5th. Maybe someone else can chime in here to help you out before I can get back to serious work here.

    Talk to you soon.

    James Dunn
    Athens, GA USA

  • Kimberly
    • Champion of Loops

    ok, for Facebook

    this <div class="pluginCountBox"

    change `.pluginCountBox {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #D3D3D3;
    font-size: 13px;
    height: 24px;
    margin: 0;
    min-width: 35px;
    padding: 6px 1px 2px 3px;
    text-align: center;`

    to

    .pluginCountBox {
        background: none repeat scroll 0 0 #FFFFFF;
        border: 1px solid #D3D3D3;
        font-size: 13px;
        height: 24px;
        margin: 0;
        min-width: 52px;
        padding: 6px 1px 2px 3px;
        text-align: center;

    That's what I got so far :slight_smile:

  • James Dunn
    • The Crimson Coder

    Hey @KimberlyL

    That's what I was referring to originally in my first post - for the FB icon.

    The G+ icon is done differently. You can change element.style from float:left to float:right and it will center under the others. I never could get it to be wider.

    I started messing with Twitter and one of the others, but it just got too late. I'm following this thread, so if you don't get him all sorted by Thursday, I'll dig into it some more. I'm just covered up with July 4th "stuff" until after the fireworks show this evening.

    Have a great day.

    James Dunn
    Athens, GA USA

  • Timothy
    • Chief Pigeon

    As noted they are done in iFrame, the container div are class - "wdsb-item" and id - "wdsb-service-twitter".

    Are you still needing help here are you are sorted now?

    Just wanted to check in.

    If you do then please reopen the thread or create a new one if you wish.

    Take care and have a great day.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.