← WordPress

CSS Sprite: Chamadas em - Posts/barra lateral/cabeçalho/Rodapé

Lida 3712 vezes

Offline

DiegoSilva 
Membro
Mensagens 4 Gostos 0
Troféus totais: 17
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Level 3 Level 2 Level 1 First Post Karma Avatar Eighth year Anniversary

CSS Sprite em Wordpress

Olá.

Estou utilizando o gerador de CSS Sprite: http://pt.spritegen.website-performance.org/
Porém, não encontro informação detalhada sobre onde adicionar as chamadas em CSS para posicionar as imagens no posts (estou utilizando cms wordpress), no cabeçalho, barra lateral e rodapé.

Encontrei informações sobre chamar em "meu html" em "meu css", porém não encontrei uma informações especifica como: Chamar em posts, no html do post? No cabelaçho de algo? por exemplo.

Não compreendo bem CSS, mas compreendo o significado das chamadas, porém onde adicionar as chamadas...não sei.
Estou seguindo as melhores práticas do google e yahoo para agilizar o carregamento das páginas, CSS é uma delas.

Poderiam me informar:

    * Como chamar/posicionar imagens do Sprite nos posts do wordpress?
    * Como chamar/posicionar Cabeçalho
    * Como chamar/posicionar Barra lateral
    * Como chamar/posicionar Rodapé



Expressões CSS em páginas geram problemas. Essas chamadas em posts seriam expressões CSS?
Offline

Ricardo75 
Membro
Mensagens 1660 Gostos 0
Troféus totais: 28
Trófeus: (Ver todos)
Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1

Olá Diego,
no html não há nada que saber, onde houver uma "class" ou um "id" ou mesmo um <h1>, <h2>, <p>, <a>, etc... podes estilizar o elemento. Não precisas fazer mais nada no html a não ser que queiras adicionar class's novas (é simples, google por "adicionar class css").

No css usas a propriedade background-position para posicionar a imagem de fundo:
http://www.w3schools.com/css/pr_background-position.asp
http://www.w3schools.com/css/css_background.asp

Ou seja, vou tentar resumir, se quiseres usar uma imagem atrás do botão "ler mais" fazes o seguinte no css (assumimos que a class do link é .read-more):

**************************

.read-more:link, .read-more:visited {
background-image: url(images/imagem_de_sprites.png); /* Chamas a imagem com os sprites*/
background-repeat: no-repeat; /* Indicas que a imagem não deve repetir */
background-position: 40px 0px; /* Aqui basicamente estás a escolher o sprite que queres, neste caso fomos para uma imagem posicionada a partir do pixel 40 vertical e do 0 horizontal da  imagem_de_sprites.png */
}

.read-more:hover {
background-position: 80px 0px; /* Agora, quando o rato passa por cima do link, vai mostrar o sprite da posição 80px 0px da mesma imagem */
}


**************************

Se reparares o link normal (:link e :visited) está com a sprite posicionada a 40px 0px, no link :hover (quando o rato fica em cima) chamamos a sprite posicionada em 80px 0px.


Está um pouco confuso, sem um exemplo fica mais complicado de explicar. Tentei deixar o essencial apenas. Deu para entender?
Offline

DiegoSilva 
Membro
Mensagens 4 Gostos 0
Troféus totais: 17
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Level 3 Level 2 Level 1 First Post Karma Avatar Eighth year Anniversary

Olá Ricardo 75, obrigado por sua ajuda.  :o

Compreendi algumas partes. Visitei: http://www.w3schools.com/css/css_image_sprites.asp e entendi mais sobre a formação de CSS Sprite.
Porém, usando o gerador: http://pt.spritegen.website-performance.org/, ele informa um código diferente daquele informado pelo http://www.w3schools.com/css/css_image_sprites.asp para a criação do CSS para sprites.

Não quero efeitos em imagens, quero apenas utilizar imagens em sprite para diminuir o numero de requisições HTTP.  Qual desses é mais "correto"? Aquele informado pelo gerador ou w3schools? Gerador, cria automaticamente e rapidamente e informa o CSS, peço que você teste e analise o código CSS criado, porque é diferente.

Novamente, obrigado pela atenção Ricardo 75. Estou tentando seguir todas as regras do google speed e yahoo performance.
Offline

Ricardo75 
Membro
Mensagens 1660 Gostos 0
Troféus totais: 28
Trófeus: (Ver todos)
Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1

O código do w3schools está correctissimo, como seria de esperar, pode é ser já um pouco avançado para quem ainda não domina o css.
O código do gerador não conheço, nunca o usei. Mas quase de certeza que está correcto também. Podes colocar aqui o código do gerador?

O exemplo que dei foi isso mesmo, um exemplo, a técnica é igual seja para usar em efeitos num mesmo elemento seja para colocar as sprites nos vários elementos.

Mais uma vez repito, o segredo está no atributo background-position! Primeiro defines uma imagem de fundo para o elemento usando a propriedade background-image ou apenas background, depois com o background-position movimentas a imagem para cima, para baixo, esquerda ou direita.

Convém que percebas primeiro isso antes de dar o próximo passo.

Sem dúvida que com exemplo era muito mais fácil, vou tentar encontrar algum e já mostro.
Offline

DiegoSilva 
Membro
Mensagens 4 Gostos 0
Troféus totais: 17
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Level 3 Level 2 Level 1 First Post Karma Avatar Eighth year Anniversary

Mas deixa. Vou desistir mesmo.
Depois de tantos testei não consegui nada. Provavelmente errando as regras, adicionei isso nos posts do wordpress:

Código: [Seleccione]
<style type="text/css">
img.home
{
width:46px;
height:44px;
background:url(img_navsprites.gif) 0 0;
}
</style>

Com certeza está completamente errado.
Offline

Ricardo75 
Membro
Mensagens 1660 Gostos 0
Troféus totais: 28
Trófeus: (Ver todos)
Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1

Está errado sim, até porque esse código deve ser inserido no tema do wordpress, na secção <head> ou melhor ainda no ficheiro style.css.
Podia estar aqui a dar mais exemplos, mas acho que é melhor antes de dares esse passo no teu blog, perceberes melhor como funciona o css básico (classes, elementos, selectores, propriedades) e então depois pensares em criar sprites das tuas imagens. É que esse código está mesmo errado, além de não poderes aplicar directamente num post.
Offline

DiegoSilva 
Membro
Mensagens 4 Gostos 0
Troféus totais: 17
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Level 3 Level 2 Level 1 First Post Karma Avatar Eighth year Anniversary

Exatamente por isso informei a desistencia.
Preciso colocar um blog no ar, porém já não tenho mais tempo, até porque estou desempregado, é tudo ou nada. E essa técnicas terá que ficar para trás.

Obrigado pela atenção Ricardo. Mais adiante vou estudar CSS.
Offline

Ricardo75 
Membro
Mensagens 1660 Gostos 0
Troféus totais: 28
Trófeus: (Ver todos)
Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1

De nada. Certamente não será por isso que o blog terá mais ou menos sucesso.

Boa sorte :)