Support » Plugin: WordPress Social Login » CSS Sprites

Viewing 2 replies - 1 through 2 (of 2 total)
  • For anyone wanting to do this themselves here’s how…

    Edit wsl.auth.widget.php (in includes/widgets).
    Replace the <img> tags on lines 113 and 120 with the following span
    <span class="wsl-<?php echo $provider_id ?>"></span>

    Create a CSS sprite and put it in assets\img\16×16 (or the appropriate folder). You can grab the sprite I already made if you prefer. It’s for 16x16px images.

    Use CSS to set the background on the spans. Here is mine…

    a.wsl_connect_with_provider span
    {
    background-image:url('/wp-content/plugins/wordpress-social-login/assets/img/16x16/sprite.png');
    background-color:transparent;
    background-repeat:no-repeat;
    width: 16px;
    height: 16px;
    display: inline-block;
    }
    
    .wsl-Facebook { background-position: -16px -16px; }
    .wsl-Google { background-position: -16px -80px; }
    .wsl-Twitter { background-position: -48px -64px; }
    .wsl-Live { background-position: -32px -48px; }
    .wsl-Yahoo { background-position: -80px -48px; }
    .wsl-LinkedIn { background-position: 0px -16px; }
    .wsl-AOL { background-position: -48px -48px; }
    .wsl-Steam { background-position: -64px -80px; }

    Thanks for this, I wanted to fix pagespeed for a while too

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