[TUTORIAL] Personalizar fundo de categorias

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

Membro Entusiasta
  • 0

[TUTORIAL] Personalizar fundo de categorias Empty [TUTORIAL] Personalizar fundo de categorias

Mensagem por seender 03.12.09 23:31

[TUTORIAL] Personalizar fundo de categorias Magic Efeitos CSS
As listas de fóruns (onde estão localizados os fóruns) do Fórum, são o ponto de passagem de todos os participantes, desta feita, este tutorial, irá ajudar a tornar as áreas das categorias mais personalizadas, ao estilo do teu Fórum, tornando-as mais atrativas!

/!\ Devido a aplicação das classes CSS nas versões, este código somente foi satisfatório para a versão PhpBB 3, logo, somente existe neste tutorial um código para modificar esta versão. Para as outras, embora exista, eles alteram muito mais outras regiões do que realmente se deseja.



--> Tutoriais, Dicas e Astúcias <--
Personalizar fundo de categorias




- Teremos de aceder à "Folha de estilo CSS":
Para que possamos personalizar ao fundo das categorias, é 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)
[TUTORIAL] Personalizar fundo de categorias 1114



- Ter uma noção de CSS em 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://2img.net/i/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.

  • color:
    Poderá definir a cor da letra do campo de texto. Nesta propriedade apenas teremos de adicionar o código hexadecimal de uma cor,
    EXEMPLO escreveu:color: #FF0000;
  • font-size:
    Caso queira um tamanho de letra diferente. Nesta propriedade apenas teremos de adicionar o tamanho da letra, podendo ser em várias medias,
    EXEMPLO escreveu:color: 10pt;
  • font-family:
    Se pretender uma diferente. Nesta propriedade apenas teremos de adicionar o o nome das fontes, podendo serem separados por virgulas caso tenha uma ordem de prioridade,
    EXEMPLO escreveu:font-family: Verdana, Geneva, sans-serif;


- Agora deverão copiar o código:
Este código deverá ser adicionado na Folha de estilos CSS, depois que as propriedades que desejar sejam aplicadas e o código esteja pronto para ser utilizado.

Normal
li.row {
propriedades
}
Ao passar o mouse
li.row:hover {
propriedades
}


- Resultado final:

(clique na imagem para aumentar)
[TUTORIAL] Personalizar fundo de categorias Im11327




© Fórum dos Fóruns


[TUTORIAL] Personalizar fundo de categorias Act_bottom Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
Personalizar fundo de categorias
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