Acesso rápido
Últimos assuntos
TEMASEIROS


Setembro/2010

Parceiros
Fórum dos Temas

Compartilhe
Ver o tópico anteriorIr em baixoVer o tópico seguinte
avatar
danielmendes
Membro ativo
Mensagens : 180
Reputação : 6
Data de inscrição : 21/07/2010
http://intech.nicetopics.com/index.htm

Adicionar imagem no fundo do menu

em Qui 22 Jul 2010 - 7:22
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:
[Dúvida] Adicionar imagem no fundo do menu
Ver o tópico anteriorVoltar ao TopoVer o tópico seguinte
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum