WordPress.org

Ready to get started?Download WordPress

Forums

WP Biographia
[resolved] Social Icon spacing (14 posts)

  1. katemhamilton
    Member
    Posted 1 year ago #

    Hi there,

    Having trouble with the spacing around the social icons. I uploaded my own and they are 32x32, but there's no hspace. Can you take a look?

    http://logansquarist.com/2012/09/25/an-evening-at-bonsoiree/

    Thanks for your help!
    Kate

    http://wordpress.org/extend/plugins/wp-biographia/

  2. vicchi
    Member
    Plugin Author

    Posted 1 year ago #

    Hi Kate,

    As far as I can see it looks like your theme's CSS is bleeding over into the plugin's CSS in an odd way. I've had a look at the CSS on the link you mentioned but can't see anything immediately glaring out at me. Have you tried quickly swapping your theme back to a stock WordPress theme, such as TwentyTen? If the problem goes away, we can focus on your theme. If it doesn't then I need to look at the plugin's CSS itself.

    -Gary

  3. katemhamilton
    Member
    Posted 1 year ago #

    Hi Gary,

    Thanks for the quick response! I used theme test drive to switch to Twenty Ten. I also deactivated all my other plugins to double check it wasn't a plugin conflict. I tested with my current theme and using theme test drive with Twenty Ten. All scenarios is rendering the lack of space between the icons.

    Let me know if you need me to do other tests to narrow the options.

    Thanks!
    Kate

  4. vicchi
    Member
    Plugin Author

    Posted 1 year ago #

    Hmm. From a bit more digging into your site I can see that the icons are being served up using the Data URI scheme and not as standard links to the icon image itself. I'm wondering if this is the root of the problem? To be honest, I've never seen anyone do this with the plugin's icon set before. Is this something you've set up yourself or is your theme or another plugin doing this for you automagically?

    -Gary

  5. katemhamilton
    Member
    Posted 1 year ago #

    I just entered the URL where the alternate links icon set is on my server under the content tab. Am I doing it incorrectly? Should the icons be in a specific place? It currently resides under my uploads folder.

    K

  6. vicchi
    Member
    Plugin Author

    Posted 1 year ago #

    That makes sense. It's just how you should configure the alternate icon set. So what's automagically converting the icon URLs behind the scenes? Your theme or a plugin?

    So what theme are you using? Is it free or paid/premium. If the former, where can I get hold of a copy? If the latter, can I get hold of a copy for testing? What other plugins are you using?

    Something on your site is doing this cleverness for you, I just need to pin down what and then, hopefully, see if this is the root cause of the problem.

    -Gary

  7. katemhamilton
    Member
    Posted 1 year ago #

    I guess it would be the theme because I deactivated all plugins to test the rendering of the icons and it did the same thing. I'm using the freemium version of Pagelines found in the WordPress theme directory.

    I'm using quite a few plugins:
    All-in-One Event Calendar by Timely
    Avatars
    BackupBuddy
    Cleverness To-Do List
    Connections
    Connections Form
    Digg Digg
    Disqus Comment System
    Gravity Forms
    NextGEN Gallery
    Syndicate Press
    Twitter @Anywhere Plus
    Ultimate Photo Widget for Flickr, Tumblr, and Pinterest
    W3 Total Cache
    WordPress Editorial Calendar
    WordPress SEO
    WP Biographia

    -Kate

  8. vicchi
    Member
    Plugin Author

    Posted 1 year ago #

    Trust me, I've seen the number of plugins some people use and your set is by no means "quite a few" ... !

    If the theme is v1.2.5 of PageLines found here - http://wordpress.org/extend/themes/pagelines - then I'll download and install it on my local test site that I use for just this sort of thing and start having a dig around under the hood.

    One final thing. Where did you get your icon set from? I'd like to try and reproduce your setup as much as I can.

    It might take a while to do the detective work, so please bear with me; got to try and fit this into and around my day job ...

    -Gary

  9. katemhamilton
    Member
    Posted 1 year ago #

    Ha, I've actually deactivated a few due to some other issues I'm fighting, so I've definitely slimmed down.

    You found the Pagelines, yes.

    Icon set: http://www.onextrapixel.com/2012/02/28/freebies-black-white-minimal-social-icons-pack/

    I appreciate you taking the time to figure it out. I'm tried my hand at investigating the CSS and just can't figure it out.

    Thanks again and I look forward to hearing back from you.

    Cheers!
    Kate

  10. vicchi
    Member
    Plugin Author

    Posted 1 year ago #

    One other thing. I noticed you said "freemium" ... does this mean there's a paid for version of the theme which unlocks other features or are you using the theme "as is" when downloaded from the WordPress themes repository?

    -Gary

  11. katemhamilton
    Member
    Posted 1 year ago #

    There is a paid version, but I'm only using the free theme that you download from WP. So no additional features.

    K

  12. vicchi
    Member
    Plugin Author

    Posted 1 year ago #

    Got it. Thanks.

    -Gary

  13. vicchi
    Member
    Plugin Author

    Posted 1 year ago #

    So I'm now slapping myself. This is a classic case of Occam's Razor in action.

    I installed PageLines and activated the icon set that comes with the plugin. The spacing issue didn't occur. I checked through the theme's code to see if there was any cleverness going on in converting images to use Data URIs. Couldn't see any. Installed all of your plugins. The spacing issue didn't occur.

    Then finally, I downloaded your custom icon set and configured the plugin to use it. Then the problem occurred.

    It turns out that every icon set I've tested with includes spacing within the icon itself. So actually this problem has always been there; in other words, the icons have always had no spacing between them, this has just never shown up before because all the icons I've used include the spacing so I've been seeing a semblance of spacing between the icons.

    So I added the following code to the theme's functions.php ...

    add_action ('wp_enqueue_scripts', 'add_custom_css');
    function add_custom_css () {
    	$uri = get_stylesheet_directory_uri ();
    	wp_enqueue_style ('custom-css', $uri . '/custom.css');
    }

    and then created a custom CSS file as /wp-content/themes/pagelines/custom.css which contained the following ...

    @charset "utf-8";
    
    ul.wp-biographia-list-icon li {
    	margin: 0 5px 0 0;
    }

    And voila! Welcome back to icon spacing. You may need to tweak the right margin setting a little to your personal taste. You can see the effects before the CSS tweaks - http://imgur.com/Stb1t - and after - http://imgur.com/DFSpP.

    I think I need to make this a part of the plugin's CSS itself in the next release so something as simple as this doesn't come back to bite me in the future.

    -Gary

  14. katemhamilton
    Member
    Posted 1 year ago #

    Gary!

    That did it! OMG! Thank you! I've been so frustrated that I couldn't figure it out. Obviously an update in the next version of the plugin would be awesome, I went ahead and modified per your direction and it works.

    Thanks for taking a look into that and solving it!

    Cheers!
    Kate

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic