Precisa de apenas uma ajudinha com sprites no Magento CE 1.9

Question

Preciso apenas de uma ajudinha com sprites.Não sou especialista, mas estou aprendendo, e é a primeira vez que estou tentando fazer um sprite aparecer no bloco cms.Meu sprite é spritesheet.png, uma imagem com ícones sociais.Por enquanto carreguei na pasta public_html e coloquei esse cone no meu bloco cms (tive que adicionar espaços depois de "<" aqui no meu post porque senão o código não aparecia)

<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 ">

Então adicionei isso ao meu estilos.css

.sprite {Background-Image:url(spritesheet.png);fundo de repetição:sem repetição;mostrar:bloquear;}

.sprite-etsy {width:18px;altura:18px;posição de fundo:-5px -5px;}

.sprite-facebook {width:18px;altura:18px;posição de fundo:-33px -5px;}

.sprite-Google {width:18px;altura:18px;posição de fundo:-61px -5px;}

.sprite-instagram {width:18px;altura:18px;posição de fundo:-89px -5px;}

.sprite-pinterest {width:18px;altura:18px;posição de fundo:-117px -5px;}

.sprite-twitter {width:18px;altura:18px;posição de fundo:-145px -5px;}

.sprite-youtube {width:18px;altura:18px;posição de fundo:-173px -5px;}

Tudo isso foi gerado por um site que ajuda na confecção de sprites, então deveria estar correto, mas ainda não vejo as imagens.Eu vejo o bloco CMS vazio.Você poderia me ajudar a entender o que estou perdendo?Obrigado!

Answer 1

Geralmente prefiro usar li e ul.exemplo:

<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>

e css ->

para o ator ->

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

para posições ->

#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;
}

espero que ajude.