• Resolved Christopher Roberts

    (@christopherrobertswordpress)


    I have only just discovered your plugin, but love the concept and really want to use it on the community blog I write for – see here.

    The main issue I have is that the buttons take up a lot of space (height wise). Although the buttons are only around 25px heigh, they seem to be adding around 80px of padding (just white space) at the top and bottom.

    Can this be reduced? If so, what do I tweak?

    Also, is there any way to wrap certain elements in the lazy loading code, for example, follow/like buttons on the sidebar, so they are shown as an image and load on hover?

    Anyhow, great plugin!

    Christopher

    http://wordpress.org/extend/plugins/wpsocialite/

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author Tom Morton

    (@tm3909)

    Glad you like the plugin, thanks for using WPSocialite!

    The best way I can see you implementing the CSS change is to overwrite the WPSocialite styles in your themes CSS file, then turn off WPSocialites style sheet all together using this in your wp-config.php:

    define( 'WPSOCIALITE_LOADSTYLES', false);

    I logged onto your site and I believe you are using another plugin at the moment. I’m going to mark this resolved but if you want to follow up and reopen the thread don’t hesitate to reply here!

    Thanks again for using WPSocialite.

    Thread Starter Christopher Roberts

    (@christopherrobertswordpress)

    Hi Tom, thanks for the reply.

    When I get five minutes I will definitely try your suggested changes.

    We have been using Digg Digg (top) and AddThis (bottom) for a while now, but they really slow things down, hence why on our test site we are experimenting with WPSocialite.

    I have managed to make our like, follow and plus buttons on the sidebar appear as an image and lazy load on mouse over, and speed improvements are amazing!
    Achieved using this: http://webtezz.com/site/buttonmover.htm which I believe uses your code.

    Will future versions maybe allow users to set CSS settings via WP Admin? I have tried delving into your code, but can’t work out how to remove all the padding!

    Once again thanks for the reply and designing such great code 🙂

    Christopher

    Plugin Author Tom Morton

    (@tm3909)

    Chris,

    If you would like to remove the padding you can use something similar to the following:

    .wpsocialite.large > li {
    padding:0;
    }

    If you are using the “small” layout, be sure to replace the above “large” class with “small”.

    Thread Starter Christopher Roberts

    (@christopherrobertswordpress)

    Thanks for the reply Tom.

    I have tried adding the code to our test site, but it doesn’t seem to be working :-/

    We are using the small buttons and twenty ten (custom). I have tried adding the code to our stylesheet and the plugins, but can’t seem to get it to work…

    I could give you access to the test site if it would help 🙂

    Thanks for your time anyway.
    Christopher

    Thread Starter Christopher Roberts

    (@christopherrobertswordpress)

    Hi Tom,

    I might have criminally attacked your code, but check out our site, I have managed to significantly reduce the padding, and it is now live on our actual site!

    Check out our latest article to see it in action 🙂

    I have saved a backup of the CSS code, so I can restore it if it gets messed up with the next update.

    The ability to set simple CSS settings via WP Admin would be welcomed in a future edition – if possible.

    Once again, thanks for all your help and such a great plugin 🙂

    Christopher

    Plugin Author Tom Morton

    (@tm3909)

    Chris,

    Your criminal activity is allowed for now, but any updates and you’ll see the folly of your work!

    Looks great. Here’s another suggestion. Because I’m only targeting the .wpsocialite class, you should be able to add a class to it (for example, your .entry-content container class) and target it in your CSS without having to edit the wpsocialite.css file.

    Try the following and see if it works:

    .entry-content .wpsocialite.small > li {
    margin: -6px 0 0 0;
    width: 16%;
    }

    I do think that CSS options may be in the cards for the admin, but I try to keep the plugins I build as simple as possible, possibly relying on a “developer” oriented mindset to much. I’ll see what comes to mind in the next release.

    Anyway, let me know if the above helps and hopefully you won’t have to worry about updates!

    Thread Starter Christopher Roberts

    (@christopherrobertswordpress)

    Thanks for the reply Tom.

    I will test this out on our test site in the very near future – the buttons are working [brilliantly] at the moment and unfortunately I have things to do :-/

    Since we implemented your code to lazy load the article sharing buttons, along with the lazy loading/load on scroll of images, and the load on hover of the social buttons on the sidebar, the speed of our site has dramatically improved.

    Lazy loading is really underrated, and I believe it will become much more popular in the very near future – due to the constant drive for speed.

    Christopher

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘CSS adjustments’ is closed to new replies.