[TUTORIAL] 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

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




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:

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.

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.

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