[TUTORIAL] Adicionar imagem no fundo do menu

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

Membro Entusiasta

[TUTORIAL] Adicionar imagem no fundo do menu Empty [TUTORIAL] Adicionar imagem no fundo do menu

Mensagem por seender 19.06.09 22:22

[TUTORIAL] Adicionar imagem no fundo do menu Magic 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.



[TUTORIAL] Adicionar imagem no fundo do menu Act_bottom 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




- 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)
[TUTORIAL] Adicionar imagem no fundo do menu 1114



- Gerando a propriedade para o seu menu:
Vamos a ver agora as propriedades compatíveis com edição do fundo do menu.


  • Background-image:
Esta propriedade, é das principais, pois ela permitirá adicionar a imagem pretendida para que se possa ter uma imagem de fundo, lembrando que deverá editar o valor de vermelho.
background-image: url('LINK DA SUA IMAGEM');

  • Background-repeat:
Definirá se haverá repetição da imagem ou não (no-repeat), podendo esta repetição fazer-se somente na horizontal (repeat-x), na vertical (repeat-y) ou também nos dois planos (repeat), lembrando deverá editar os valores de vermelho.
background-repeat: no-repeat;

  • Background-color:
Nesta propriedade apenas teremos de adicionar o código hexadecimal de uma cor, existe outros tipos, mas para não complicar, analisaremos desta forma.
background-color: #FF0000;

  • Background-attachment:
Permitirá definir se a imagem toma uma posição de rolagem (scroll), sendo que estará sempre na mesma posição, independentemente do tamanho da caixa de texto, ou de fixagem (fixed), que fará com que a imagem fique na posição definida, mesmo que a caixa de texto aumente.
background-attachment: scroll;

  • Background-position:
Para definir a posição da imagem, se no topo (top), em baixo (bottom), à esquerda (left), à direita (right) ao centro (center), ou então por definição de valores em percentagem (%) ou em píxeis (px).
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.


[TUTORIAL] Adicionar imagem no fundo do menu Logo 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.


- Classes para adição das imagens de fundo:

[TUTORIAL] Adicionar imagem no fundo do menu Versio12 PhpBB 3
#page-header .navbar {
propriedade
}

[TUTORIAL] Adicionar imagem no fundo do menu Versio15 PunBB
#pun-head #pun-navlinks {
propriedade
}


[TUTORIAL] Adicionar imagem no fundo do menu Versio14 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;

[TUTORIAL] Adicionar imagem no fundo do menu Versio12 [TUTORIAL] Adicionar imagem no fundo do menu Versio15 [TUTORIAL] Adicionar imagem no fundo do menu Versio14



--> FAQ do Tutorial <--
Adicionar imagem no fundo do menu




  • Posso pedir minha imagem aqui no FdF?
    Sim, lembre-se sempre de seguir as Regras da sessão, não temos uma área especifica para tal pedido mas poderá pedir em Outros pedidos.




© Fórum dos Fóruns



[TUTORIAL] Adicionar imagem no fundo do menu Act_bottom Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
Adicionar imagem no fundo do menu
seender

seender
Membro Entusiasta
Membro Entusiasta

Membro desde : 07/04/2009
Mensagens : 9449
Pontos : 12455

http://www.divulgamaisweb.com https://www.facebook.com/Divulga-Mais-Web-874814432638426/

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

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