[TUTORIAL] Fundo dos widgets

Ir para baixo

[TUTORIAL] Fundo dos widgets Empty [TUTORIAL] Fundo dos widgets

Mensagem por Oto! 15.07.12 3:49

[TUTORIAL] Fundo dos widgets Theme 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.

--> Tutoriais e astúcias <--
Colocar fundo em widgets


- 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á:
.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;
}

Vermelho -> Esta propriedade, é das principais, pois ela permitirá adicionar a imagem pretendida para que se possa ter uma imagem de fundo.
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 pixels (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.

- Adicionar o código CSS à folha de Estilos;
Para que possamos personalizar os objetos do nosso Blog, é necessário adicionar códigos CSS para criarmos o efeito desejado, sendo assim, teremos de aceder à:
Administração ->> Multiblog ->> Tema personalizado ->> Edição expert


(clique na imagem para aumentar)
[TUTORIAL] Fundo dos widgets Imagem10

- Resultado por meio de uma imagem:
(clique na imagem para aumentar)
[TUTORIAL] Fundo dos widgets Imagem11

Resultado será uma imagem que foi adicionada para mostrar como fundo. Como pode ver acima, o fundo foi adicionado, mais está imagem não é de um Widget do Blog. Por isso, essa é um ação Reversível, caso a imagem que colocou não ficou como você queria, então poderá alterar no código, mais caso não queira a imagem apenas delete o código da folha de estilo.


© Suporte Criarumblog
[TUTORIAL] Fundo dos widgets Act_bo11 Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
[Dúvida] Adicionar fundo em Widgets
Oto!
Oto!
Hiper Membro

Membro desde : 07/04/2011
Mensagens : 3363
Pontos : 4818

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

 
Permissões neste sub-fórum
Não podes responder a tópicos