Entrar
Os membros mais ativos do mês
Nenhum usuário |
Quem está conectado?
Há 3 usuários online :: 0 registrados, 0 invisíveis e 3 visitantes Nenhum
[ Ver toda a lista ]
O recorde de usuários online foi de 23 em Seg Jun 08, 2020 3:43 am
Últimos assuntos
[TUTORIAL] Personalizar área intermediária do fórum
Web ASA Fórum | Oficial :: Geral :: :: Serviços Web Sites :: Suporte Forumeiros :: Forumeiros & Você :: Tutoriais, dicas e astúcias :: Scripts CSS
Página 1 de 1
[TUTORIAL] Personalizar área intermediária do fórum
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] | 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
Personalizar área intermediária do fórum
1º - 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)
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
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. |
2º - 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([Tens de ter uma conta e sessão iniciada para poderes visualizar este link]); - 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).
Atenção pois quando é utilizado palavras deve a primeiras variar entre top/center/bottom e a segunda entre left/center/right.EXEMPLO escreveu:background-position: bottom right;
background-position: 2px 10px;
3º - Agora deverão copiar o código correspondente à versão:
PhpBB 2 |
|
PhpBB 3 |
|
Invision |
|
PunBB |
|
4º - Exemplo do código:
- Código: [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
#wrap {
background-image: url(https://i.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)
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
© 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] Personalizar área intermediária do fórum |
Tópicos semelhantes
» [TUTORIAL] Personalizar caixa de Busca
» [TUTORIAL] Personalizar o Chatbox
» [TUTORIAL] Personalizar o fundo do quote
» [TUTORIAL] Personalizar o cursor do mouse
» [TUTORIAL] Personalizar as caixas de mensagem
» [TUTORIAL] Personalizar o Chatbox
» [TUTORIAL] Personalizar o fundo do quote
» [TUTORIAL] Personalizar o cursor do mouse
» [TUTORIAL] Personalizar as caixas de mensagem
Web ASA Fórum | Oficial :: Geral :: :: Serviços Web Sites :: Suporte Forumeiros :: Forumeiros & Você :: Tutoriais, dicas e astúcias :: Scripts CSS
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos
Dom Jun 24, 2012 11:15 am por Alisson Silva
» [Re-Apresentação] Fábio
Sex maio 25, 2012 4:45 pm por Fábio
» PixelZIP ~ design&programção em só lugar
Sex maio 25, 2012 4:44 pm por Fábio
» Pedido de logo
Dom maio 20, 2012 10:06 am por Alisson Silva
» Kernel - Apresentação
Sáb maio 19, 2012 9:49 am por Alisson Silva
» [Galeria] Gabriel Schiavi - Atualizado (20/02 - !5:21)
Sáb maio 19, 2012 9:48 am por Alisson Silva
» HEBBO HOTEL 24 HORAS ONLINE !!
Sex maio 04, 2012 7:20 pm por Alisson Silva
» Pedido de Layout
Sex maio 04, 2012 5:23 pm por Fonsecca
» [RESOLVIDO]TV CCE HPS 2071-D (IMAGEM SÓ EMBAIXO, ACIMA, LINHAS DE RETRAÇO E FAIXA PRÊTA NO TOPO DA TELA).
Qua Abr 11, 2012 4:07 pm por Fry
» [contato] Deixo aqui meus contatos virtuais
Qua Abr 11, 2012 3:25 pm por Fry