[TUTORIAL] Personalizar área intermediária do fórum

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

[TUTORIAL] Personalizar área intermediária do fórum

Mensagem por seender em 25/02/10, 06:26 pm

Efeito CSS
Às vezes gostaríamos de adicionar algum efeito com imagens, cores ou bordas para assim personalizar a aparência do fórum, neste tutorial irá ver com quais códigos irá se utilizar para obter o efeito desejado.


--> Tutoriais, dicas e Astúcia <--
Personalizar área intermediária do fórum




- Teremos de aceder à "Folha de estilo CSS":
Para que possamos personalizar as caixas de texto do Fórum, é necessário adicionar códigos CSS para criarmos o efeito desejado, sendo assim, teremos de aceder a:
Painel de Controle -> Visualização -> Imagens e cores -> Cores -> Folha de estilo CSS
(clique na imagem para aumentar)

Segue a tua versão, pois cada versão tem um código diferente. referimos-nos ás versões: PhpBB 2, PhpBB 3, PunBB e Invision.



- Ter uma noção de CSS me relação ás imagens:
Antes de adicionarmos o código, temos de saber o que estamos a personalizar, pois não basta adicionar o link da imagem, melhor dizendo, temos de saber trabalhar a aparência.
O que podemos utilizar para personalizar a nossa caixa de texto:

  • 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.
    @EXEMPLO escreveu:background-color: #FF0000;
  • background-image:
    Esta propriedade, é das principais, pois ela permitirá adicionar a imagem pretendida para que se possa ter uma imagem de fundo.
    @EXEMPLO escreveu:background-image: url(https://illiweb.com/bl/logo.png);
  • 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).
    @EXEMPLO escreveu:background-repeat: no-repeat;
  • 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.
    @EXEMPLO escreveu: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).
    @EXEMPLO escreveu: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.


- Agora deverão copiar o código correspondente à versão:
PhpBB 2
.bodyline {
propriedades
}
PhpBB 3
#wrap {
propriedades
}
Invision
#ipbwrapper {
propriedades
}
PunBB
.pun {
propriedades
}

- Exemplo do código:
Código:
#wrap {
background-image: url(http://i85.servimg.com/u/f85/12/75/28/98/li_bg11.png);
background-repeat: repeat-x;
background-position: bottom;
border: 1px solid #CCC;
}
(carregue na imagem para aumentar)



© Fórum dos Fóruns


Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
Personalizar área intermediária do fórum
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


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