5.20.2012

Gadgets separados em caixas .

Tumblr_lxn5a0rzwr1qidcxpo1_500_large
Bom , resolvi colocar aqui alguns tutoriais que usei e uso aqui no blog , vou colocar um por um , por que alguns não lembro , enquanto isso vou colocando os que acho . Esse é o de Gadgets separados que adoro e estou usando também !
Créditos: Go Imagine


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:


É ta pronto , espero que tenham gostado até a Próxima .
Beijos Nanny .

2 comentários:

  1. É um detalhe simples mas que faz diferença, acho que fica bem mais bonito dessa maneira.

    Beijos, Carol
    Crying Lightning

    ResponderExcluir
  2. Eu tava procurando esse tuto. Agora já tá guardado nos meus favoritos aqui no Chrome haha no meu próximo layout eu faço

    monaenrolada.blogspot.com

    ResponderExcluir