WordPress.org

Forums

Simple Share Buttons Adder
[resolved] Text Won't Align with Buttons Horizontally (13 posts)

  1. TheGG
    Member
    Posted 1 year ago #

    Hi!

    No matter what I do, I can't get the text to align with the buttons horizontally on my site!

    It's driving me nuts!

    Is there any way to adjust this?

    I've been playing around with the settings, but nothings working... please help!

    Thanks! :)

    http://wordpress.org/plugins/simple-share-buttons-adder/

  2. TheGG
    Member
    Posted 1 year ago #

    Just wanted to follow up + see if anyone had a fix for this yet?

    Thanks! :)

  3. reihaan1
    Member
    Posted 1 year ago #

    You can simply goto styling option and then click on custom css and paste the following css code. It will align the buttons with the counters.

    .ssba img
    {
    width: 45px  !important;
    padding:0 8px;
    border: 0;
    box-shadow: none !important;
    display: inline;
    vertical-align: middle;
     margin-top: 22px;
    }
    
    .ssba, .ssba a
    {
    font-family: Indie Flower;
    font-size: 20px;
    text-decoration: none;
    }
  4. David Neal
    Member
    Plugin Author

    Posted 11 months ago #

    Many apologies that your question went so long unanswered. Please do let me know if the suggestion above worked for you, I shall try and assist you in getting it sorted asap if not.

    Thanks,

    David

  5. TheGG
    Member
    Posted 11 months ago #

    Hi David!

    Thanks so much for your response.

    Nope... it's still not fixed.

    Even though the social buttons are next to the words (horizontally) - they're still slightly offset.

    Thanks! :)

  6. David Neal
    Member
    Plugin Author

    Posted 11 months ago #

    Hey,

    No worries at all, apologies again!

    It does seem to be linked to your theme somehow, but we can override that :)

    Are you currently using the suggestion above? Reason I ask is if you enter any custom CSS at all it overrides any settings applied in the styling section.

    This CSS should do the trick for you:

    .ssba img {
    margin-top: -10px;
    }

    http://xomf.com/zycyj

    David

  7. David Neal
    Member
    Plugin Author

    Posted 11 months ago #

    By the way, in case you weren't aware...

    You can use this free tool I made to make custom-coloured share buttons if you like http://make.simplesharebuttons.com/

    If you select 'Custom' from the image set dropdown in the dashboard some upload options will appear :)

  8. TheGG
    Member
    Posted 11 months ago #

    Thanks! :)

    Ok, I just added a combo of your's + reihaan1's code into the Custom CSS area.

    I'm having 2 issues...

    1. I can't seem to get the font color to change to #FDC7D0.
    2. How can I create a little more white space above + below the whole thing?

    And... now, I know I'm asking a lot, Lol - but I just figured I'd ask since I've always wondered + I have you here... how can I move my Simple Share Buttons above my n-Relate plugin? (So that at the end of my posts, my share buttons come first, then my n-relate content.)

    Thanks David! I really appreciate your help! :)

  9. David Neal
    Member
    Plugin Author

    Posted 11 months ago #

    No worries :)

    1. A small correction required in your CSS:

    font-color should be color

    2. within .ssba, add margin: 10px 0 10px;

    Please note that the margin-top mentioned previously will need to be amended accordingly. If you add the 10px mentioned above for example, the margin-top will need to be set to about 2px instead of -10px.

    Sorry that it's working out a little fiddly for you, but sometimes it's necessary to get things just right :)

  10. TheGG
    Member
    Posted 11 months ago #

    Hey David!

    Ok, that fixed the spacing... but no matter what I do, the font color won't change :(

    Any other suggestions?

    Here's the code I have in there now:

    .ssba img
    {
    width: 44px  !important;
    padding:0 6px;
    border: 0;
    box-shadow: none !important;
    display: inline;
    vertical-align: middle;
    margin-top: 2px;
    }
    
    .ssba, .ssba a
    {
    font-family: sans-serif;
    font-size: 28px;
    font-weight: 700;
    font-color: #FDC7D0;
    text-decoration: none;
    margin: 10px 0 10px;
    }

    Thanks! :)

  11. David Neal
    Member
    Plugin Author

    Posted 11 months ago #

    Great! Almost there!

    Please note point one in my previous comment - font-color should be color :)

  12. TheGG
    Member
    Posted 11 months ago #

    Haha... Got it!

    I totally read that wrong, Lol.

    I thought I had "color" in the coding + it needed to be "font-color".

    Thanks for your help! :)

  13. David Neal
    Member
    Plugin Author

    Posted 11 months ago #

    You're welcome, great to see it working as you wanted :)

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Simple Share Buttons Adder
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic