Web ASA Fórum | Oficial
Gostaria de reagir a esta mensagem? Crie uma conta em poucos cliques ou inicie sessão para continuar.
Entrar

Esqueci-me da senha

Os membros mais ativos do mês
Nenhum usuário

Quem está conectado?
3 usuários online :: 0 registrados, 0 invisíveis e 3 visitantes

Nenhum

[ Ver toda a lista ]


O recorde de usuários online foi de 23 em Seg Jun 08, 2020 3:43 am
Últimos assuntos
» Equipe Web ASA Fórum
[TUTORIAL] Legenda elegante Icon_minitime1Dom Jun 24, 2012 11:15 am por Alisson Silva

» [Re-Apresentação] Fábio
[TUTORIAL] Legenda elegante Icon_minitime1Sex maio 25, 2012 4:45 pm por Fábio

» PixelZIP ~ design&programção em só lugar
[TUTORIAL] Legenda elegante Icon_minitime1Sex maio 25, 2012 4:44 pm por Fábio

» Pedido de logo
[TUTORIAL] Legenda elegante Icon_minitime1Dom maio 20, 2012 10:06 am por Alisson Silva

» Kernel - Apresentação
[TUTORIAL] Legenda elegante Icon_minitime1Sáb maio 19, 2012 9:49 am por Alisson Silva

» [Galeria] Gabriel Schiavi - Atualizado (20/02 - !5:21)
[TUTORIAL] Legenda elegante Icon_minitime1Sáb maio 19, 2012 9:48 am por Alisson Silva

»  HEBBO HOTEL 24 HORAS ONLINE !!
[TUTORIAL] Legenda elegante Icon_minitime1Sex maio 04, 2012 7:20 pm por Alisson Silva

» Pedido de Layout
[TUTORIAL] Legenda elegante Icon_minitime1Sex maio 04, 2012 5:23 pm por Fonsecca

» [RESOLVIDO]TV CCE HPS 2071-D (IMAGEM SÓ EMBAIXO, ACIMA, LINHAS DE RETRAÇO E FAIXA PRÊTA NO TOPO DA TELA).
[TUTORIAL] Legenda elegante Icon_minitime1Qua Abr 11, 2012 4:07 pm por Fry

» [contato] Deixo aqui meus contatos virtuais
[TUTORIAL] Legenda elegante Icon_minitime1Qua Abr 11, 2012 3:25 pm por Fry


[TUTORIAL] Legenda elegante

Ir para baixo

[TUTORIAL] Legenda elegante Empty [TUTORIAL] Legenda elegante

Mensagem por Fry Qui Dez 29, 2011 12:37 pm

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] 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)
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]


- Código:

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


Vermelho 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(https://2img.net/h/oi34.tinypic.com/b80g87.png) no-repeat 50% 0;
padding: 24px 0;}
Resultado:
(clique na imagem para aumentar)
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]





--> 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:
[Dúvida] Legenda Elegante
Fry
Fry
Admintradores
Admintradores

Posts Posts : 175
Idade Idade : 24
Respeito Respeito : 0
Web Moedas Web Moedas : 415

http://Em breve...

Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

 
Permissões neste sub-fórum
Não podes responder a tópicos