WordPress.org

Ready to get started?Download WordPress

Forums

[closed] styling shareaholic social media plugin (12 posts)

  1. ShelbyAnne
    Member
    Posted 10 months ago #

    Hi all,

    So I am using the shareaholic social media plugin for my posts so people can share them.

    I am trying to create a background color behind the circle share buttons so that it looks like a row. Here is my site/example post:

    http://www.totemag.com/end-of-the-summer-soundtrack/

    However, as you can see, the share buttons sit half-way below the background color. I've used firebug and have tried to push up the share buttons using css but nothing I am doing is working.

    Would anyone have a solution?

    Thanks!

  2. Emil Uzelac
    Theme Review Admin
    Posted 10 months ago #

    .shareaholic-share-buttons-container .shareaholic-share-buttons-wrapper {
        display: block;
    }

    http://i.imgur.com/cwpEvjS.png

  3. ShelbyAnne
    Member
    Posted 10 months ago #

    Ok I don't know what you mean by that. The image you attached is what I had done just so it didn't look messed up if someone were to check out the site. But the width of the bar of background color was too much. I try shortening the width and this is when I have the problem. If you want to take a look at the site now you'll see my problem!

  4. Emil Uzelac
    Theme Review Admin
    Posted 10 months ago #

    Trying removing the height please :)

  5. ShelbyAnne
    Member
    Posted 10 months ago #

    Okay so I removed the height and the icons fit into the background now but the background height is too tall. I wanted it so that it is tinier but the icons still fit inside of it. Is there a way to do that?

  6. Emil Uzelac
    Theme Review Admin
    Posted 10 months ago #

    First we would remove the background color and add it to:

    .shareaholic-share-buttons-container .shareaholic-share-buttons-wrapper {
        background-color: #f2f0f0;
    }

    Now let's add some width:

    .shareaholic-share-buttons-container .shareaholic-share-buttons-wrapper {
        background-color: #f2f0f0;
        width: 100%;
    }

    and the last step is to remove the padding from the icons itself

    .shareaholic-share-buttons-container ul.shareaholic-share-buttons {
        padding: 0;
    }

    Final results: http://i.imgur.com/IBBU7lx.png

  7. ShelbyAnne
    Member
    Posted 10 months ago #

    The image you attached is exactly what I want!!!

    However, when I made the changes that you said, it still isn't correct. Any other changes I should make?

  8. Emil Uzelac
    Theme Review Admin
    Posted 10 months ago #

    You missed the last one, the padding :)

  9. ShelbyAnne
    Member
    Posted 10 months ago #

    Okay I removed the padding, still not the same! :(

  10. Emil Uzelac
    Theme Review Admin
    Posted 10 months ago #

    Still missing for some reason, please see: http://i.imgur.com/Kf6Mk9E.png

  11. ShelbyAnne
    Member
    Posted 10 months ago #

    Hmmm, I tried adding !important to mine and it still didn't work. Is it possible that there is css for the widget within the widget that I can't access? Don't know how I would fix it then.

  12. morgancarrie
    Member
    Posted 2 months ago #

    Anyone know how to customize colors of the shareaholic social icons?

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.