Entrar
Os membros mais ativos do mês
Nenhum usuário |
Quem está conectado?
Há 5 usuários online :: 0 registrados, 0 invisíveis e 5 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] Colocar fundo em widgets
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] Colocar fundo em widgets
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] | Fundo dos widgets |
Com a tendência cada vez maior de se ter um tema modificado, se faz necessário algumas modificações simples, como adicionar uma imagem de fundo aos Widgets. Este código irá substituir uma cor de fundo por uma imagem por meio de códigos CSS, mas caso queira poderá explorar muito mais as diversas opções que os códigos CSS nos disponibilizam.
/!\ Este código somente funcionará para as versões: PhpBB 3, Invision e PunBB. Isso acontece pois o PhpBB 2 possui uma estrutura que não permite este tipo de modificação, nem mesmo através dos templates (para todos os widgets).
Também é importante dizer que, outros lugares podem assumir o fundo, como é o caso dos anúncios rotativos!
--> Tutoriais e astúcias <--
Colocar fundo em widgets
Colocar fundo em widgets
1º - Elaborar o código CSS:
Para nossa sorte, o código não varia para as versões, todas usam as mesmas propriedades. Somente em fóruns PhpBB 2 não será possível utilizar este tutorial, devido às classes e às estruturas utilizadas pela versão. Tal modificação somente será possível depois de uma alteração no template, que será mostrada no ponto três.
O código será:
Vermelho -> Esta propriedade, é das principais, pois ela permitirá adicionar a imagem pretendida para que se possa ter uma imagem de fundo..module .box-content, .module, .module .main-content {
background-image: url('Endereco_da_imagem') !important;
background-repeat: repeat-x !important;
background-position: center top !important;
background-color: #FFFFFF !important;
}
Verde -> 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).
Laranja -> 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.
Preto -> Nesta propriedade apenas teremos de adicionar o código hexadecimal de uma cor, existe outros tipos, mas para não complicar, analisaremos desta forma.
2º - Adicionar o código CSS à folha de Estilos
Para que possamos personalizar os objetos do nosso fórum, é necessário adicionar códigos CSS para criarmos o efeito desejado, sendo assim, teremos de aceder à:
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]
3º - Resultado por meio de uma imagem:
(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]
©
Fórum dos Fóruns & Needke
Fórum dos Fóruns & Needke
Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: [Dúvida] Colocar fundo em widgets |
Tópicos semelhantes
» [TUTORIAL] Slides em widgets
» [TUTORIAL] Ocultar os widgets do fórum
» [TUTORIAL] Multiplicar os widgets de novidades
» [TUTORIAL] Personalizar fundo de categorias
» [TUTORIAL] Personalizar o fundo do quote
» [TUTORIAL] Ocultar os widgets do fórum
» [TUTORIAL] Multiplicar os widgets de novidades
» [TUTORIAL] Personalizar fundo de categorias
» [TUTORIAL] Personalizar o fundo do quote
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