segunda-feira, 11 de novembro de 2013
#Dicasblog:Gadgets separados em caixas
Vá em design - Editar HTML - Aperte F3 ou Ctrl+F e procure por:
/* Widgets
E antes de fechar } cole o seguinte código:
background: #fff; /*---- cor do fundo da caixa ----*/padding-left: 20px; /*---- espaço à esquerda ----*/padding-bottom: 20px; /*--- espaço de baixo ---*/padding-right: 20px; /*--- espaço à direita ---*/padding-top: 5px; /*---- espaço de cima ----*/border-radius: 5px; /*---- bordas arredondadas, apague a linha se não quiser ----*/box-shadow: 1px 3px 15px 2px #ccc; /*---- sombra da caixa ----*/
Se você quiser da pra trocar a cor da
caixa (trocando #fff pela cor que desejar), mudar os valores de padding, remover a sombra da
caixa e as bordas arredondadas apagando a linha das mesmas como também da pra
personalizar a borda e a sombra.
Certamente quando você visualizar vai ficar com o fundo original da sua
coluna por trás da caixinha, assim:
Para resolver isso é bem simples, vá em Design - Designer do modelo - Avançado - Plano de fundo da barra lateral e deixe transparente como
mostra a imagem abaixo:
Feito isso você vai ver que o fundo de trás saiu, assim:
Caso feito isso, ainda ficar aquele fundo original (que eu acho horrível) vá em :
Vá em design - Editar HTML - Aperte F3 ou Ctrl+F e procure por:
Vá em design - Editar HTML - Aperte F3 ou Ctrl+F e procure por:
se caso você tiver a coluna do lado direito, procure por:
.main-inner .fauxcolumn-right-outer .fauxcolumn-inner {
se você tiver a coluna do lado esquerdo, procure por:
.main-inner .fauxcolumn-left-outer .fauxcolumn-inner {
Vai aparecer assim:
.main-inner .fauxcolumn-right-outer .fauxcolumn-inner {
margin-right: $(content.padding);
background:$(widget.outer.background.color) $(widget.outer.background.gradient) repeat scroll top left;
}
Apague esta parte em rosa e pronto, visualize, caso estiver tudo certo
salve e pronto, ai esta, espero ter ajudado vocês . um beijo e até o próximo
post, não esqueça de comentar ein :D
Marcadores:
#dicasblog,
Tutorial
Assinar:
Postar comentários (Atom)
0 comentários:
Postar um comentário