Entrar
Os membros mais ativos do mês
Nenhum usuário |
Quem está conectado?
Há 2 usuários online :: 0 registrados, 0 invisíveis e 2 visitantes :: 1 motor de buscaNenhum
[ Ver toda a lista ]
O recorde de usuários online foi de 23 em Seg Jun 08, 2020 3:43 am
Últimos assuntos
[TUTORIAL] Adicionar imagem no fundo do menu
Web ASA Fórum | Oficial :: Geral :: :: Serviços Web Sites :: Suporte Forumeiros :: Forumeiros & Você :: Tutoriais, dicas e astúcias :: Widgets e módulos personalizados
Página 1 de 1
[TUTORIAL] Adicionar imagem no fundo do menu
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] | Adicionar imagem no fundo do menu |
Através deste tutorial poderá personalizar fundo do menu de navegação do Fórum, como por exemplo imagens de fundo, ou uma simples cor, tornando assim uma personalização independente do restante Fórum.
Atenção! Não foi desenvolvido nenhum código para a versão PhpBB 2, uma vez que não existe nenhuma classe CSS que englobe a secção do menu de navegação. Algo que poderá ser realizado através da edição dos templates |
--> Tutoriais, Dicas e Astúcias <--
Adicionar imagem no fundo do menu
Adicionar imagem no fundo do menu
1º - Teremos de aceder à "Folha de estilo CSS":
Para que possamos personalizar o fundo do menu, é preciso adicionar códigos CSS para criarmos o efeito desejado, como dito agora então, vamos 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]
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
2º - Gerando a propriedade para o seu menu:
Vamos a ver agora as propriedades compatíveis com edição do fundo do menu.
- Background-image:
background-image: url('LINK DA SUA IMAGEM');
- Background-repeat:
background-repeat: no-repeat;
- Background-color:
background-color: #FF0000;
- Background-attachment:
background-attachment: scroll;
- Background-position:
background-position: bottom right;
background-position: 2px 10px;
Atenção pois quando é utilizado palavras deve a primeiras variar entre top/center/bottom e a segunda entre left/center/right.
Segue a tua versão, pois cada versão tem um código diferente. referimos-nos ás versões: PhpBB 3, PunBB e Invision, Infelizmente a única versão que não e compatível a tal edição e a Phpbb2. |
3º - Classes para adição das imagens de fundo:
PhpBB 3 |
#page-header .navbar {
propriedade
}
PunBB |
#pun-head #pun-navlinks {
propriedade
}
Invision |
#submenu {
propriedade
}
Deverá colocar no lugar do texto "propriedades" o que foi discutido no ponto número 2 do tutorial, poderá colocar mais do que uma propriedade e não são somente as propriedades referidas no ponto 2 que funcionam, poderá utilizar outros propriedades, mas não é o objectivo do tutorial explicar outras modificações.
Veja agora os resultados abaixo, clicando na imagem das versões;
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
--> FAQ do Tutorial <--
Adicionar imagem no fundo do menu
Adicionar imagem no fundo do menu
- Posso pedir minha imagem aqui no FdF?
Sim, lembre-se sempre de seguir as [Tens de ter uma conta e sessão iniciada para poderes visualizar este link], não temos uma área especifica para tal pedido mas poderá pedir em [Tens de ter uma conta e sessão iniciada para poderes visualizar este link].
© 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] Adicionar imagem no fundo do menu |
Tópicos semelhantes
» [TUTORIAL] Imagem do fundo aleatório
» [TUTORIAL] Imagem flutuante
» [TUTORIAL] Adicionar fóruns à um widget
» [TUTORIAL] Colocar fundo em widgets
» [TUTORIAL] Personalizar fundo de categorias
» [TUTORIAL] Imagem flutuante
» [TUTORIAL] Adicionar fóruns à um widget
» [TUTORIAL] Colocar fundo em widgets
» [TUTORIAL] Personalizar fundo de categorias
Web ASA Fórum | Oficial :: Geral :: :: Serviços Web Sites :: Suporte Forumeiros :: Forumeiros & Você :: Tutoriais, dicas e astúcias :: Widgets e módulos personalizados
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos
|
|
Dom Jun 24, 2012 11:15 am por Alisson Silva
» [Re-Apresentação] Fábio
Sex maio 25, 2012 4:45 pm por Fábio
» PixelZIP ~ design&programção em só lugar
Sex maio 25, 2012 4:44 pm por Fábio
» Pedido de logo
Dom maio 20, 2012 10:06 am por Alisson Silva
» Kernel - Apresentação
Sáb maio 19, 2012 9:49 am por Alisson Silva
» [Galeria] Gabriel Schiavi - Atualizado (20/02 - !5:21)
Sáb maio 19, 2012 9:48 am por Alisson Silva
» HEBBO HOTEL 24 HORAS ONLINE !!
Sex maio 04, 2012 7:20 pm por Alisson Silva
» Pedido de Layout
Sex 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).
Qua Abr 11, 2012 4:07 pm por Fry
» [contato] Deixo aqui meus contatos virtuais
Qua Abr 11, 2012 3:25 pm por Fry