CSS Sprites

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter Jon Scaife

    (@jonscaife)

    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.