[TUTORIAL] Adicionar imagem no fundo do menu

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

[TUTORIAL] Adicionar imagem no fundo do menu

Mensagem por seender em 19/06/09, 06:22 pm

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




- 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)



- 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.


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:

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;





--> 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



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
avatar

seender
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 07/04/2009
Mensagens : 9450
Pontos Ativos : 12457

Ver perfil do usuário http://www.divulgamaisweb.com https://www.facebook.com/Divulga-Mais-Web-874814432638426/

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

- Tópicos similares

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