1

I need just a little help with sprites. I am not an expert, but I'm learning, and this it the first time I'm trying to make a sprite show on in the cms block. My sprite is spritesheet.png, an image with social icons on it. I uploaded it in public_html folder for now and I put this cone in my cms block (I had to add spaces after "<" here in my post because otherwise the code wouldn't show up)

< div class="sprite sprite-etsy"> < div class="sprite sprite-facebook"> < div class="sprite sprite-google"> < div class="sprite sprite-instagram"> < div class="sprite sprite-pinterest"> < div class="sprite sprite-twitter"> < div class="sprite sprite-youtube">

Then I added this to my styles.css

.sprite { background-image: url(spritesheet.png); background-repeat: no-repeat; display: block; }

.sprite-etsy { width: 18px; height: 18px; background-position: -5px -5px; }

.sprite-facebook { width: 18px; height: 18px; background-position: -33px -5px; }

.sprite-google { width: 18px; height: 18px; background-position: -61px -5px; }

.sprite-instagram { width: 18px; height: 18px; background-position: -89px -5px; }

.sprite-pinterest { width: 18px; height: 18px; background-position: -117px -5px; }

.sprite-twitter { width: 18px; height: 18px; background-position: -145px -5px; }

.sprite-youtube { width: 18px; height: 18px; background-position: -173px -5px; }

All this was generated by a website that helps with making sprites, so it should be correct, but I still don't see the images. I see the empty CMS block though. Could you please help me understand what am I missing? Thank you!

1

I usually prefer to use li and ul. example:

<ul id="footer-third-center">
                    <li id="facebook">
                         <?php echo "<a href=\"http://www.facebook.com/yourcompany\" target=\"_blank\" title=\"facebook\"></a>"; ?>
                    </li>
                    <li id="twitter">
                         <?php echo "<a href=\"http://twitter.com/yourcompany\" target=\"_blank\" title=\"twitter\"></a>"; ?>
                    </li>
                    <li id="google">
                         <?php echo "<a href=\"https://plus.google.com/u/0/b/yourcompany/\" target=\"_blank\" title=\"google+\"></a>"; ?>
                    </li>
                    <li id="linkedin">
                         <?php echo "<a href=\"http://www.linkedin.com/companies/yourcompany\" target=\"_blank\" title=\"linkedin\"></a>"; ?>
                    </li>
                </ul>

and css ->

for the sprite ->

#footer-third-center li {
    background-image: url("spritesheet.png");
    background-repeat: no-repeat;
    display: inline-block;
    height: 20px;
    margin-right: 10px;
    width: 22px;
}

for positions ->

#footer-third-center li#linkedin {
    background-position: -82px -42px;
}

#footer-third-center li#google {
    background-position: -55px -42px;
}

#footer-third-center li#twitter {
    background-position: -26px -40px;
}

hope it helps.

  • Nice suggestion! It works great! – Ivan Paunovic Feb 23 '15 at 6:58
  • great @IvanPaunovic . please check the question mark to display as accepted. brgds. – s_h Feb 23 '15 at 7:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.