[TUTORIAL] Legenda elegante

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

[TUTORIAL] Legenda elegante

Mensagem por Convidad em 01/06/11, 09:17 pm

Legenda Elegante
Às vezes queremos deixar o nosso fórum bonito e elegante. Neste tutorial iremos aprender a personalizar a "Picture Legenda" ou seja, personalizar a área das imagens: Novas mensagens, Não há novas mensagens e Fórum Bloqueado.


--> Tutorial <--
Legenda Elegante



- Teremos de aceder à "Folha de estilo CSS":
Para que possamos personalizar a área "Picture Legenda" é necessário adicionar códigos CSS para criarmos o efeito desejado. Sendo assim teremos de aceder a:
Painel de Controle -> Visualização -> Imagens e cores -> Cores -> Folha de estilo CSS
(clique na imagem para aumentar)

- Código:

#picture_legend {
background-position: center;
background-repeat: no-repeat;
background: url(URL da imagem escolhida) no-repeat 50% 0;
}

Vermelho :seta2: Em vez de " URL da imagem escolhida " devemos colocar o endereço real de nossa imagem.

- Vejamos um exemplo:
Veremos como irá ficar o nosso código depois de estar pronto e também poderemos ver como ficará bonito no nosso fórum.

Código:
#picture_legend {
background-position: center;
background-repeat: no-repeat;
background: url(http://i34.tinypic.com/b80g87.png) no-repeat 50% 0;
padding: 24px 0;}
Resultado:
(clique na imagem para aumentar)




--> FAQ do Tutorial <--
Legenda Elegante




  • Este código é para todas as versões?
    Não! Infelizmente este código só resulta na versão PhpBB3.





© Fórum dos Fóruns



Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
Legenda Elegante
avatar

Convidad
Convidado


Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo


Permissão deste fórum:
Você não pode responder aos tópicos neste fórum