22/10/2012

Tutorial , Gadgets em Caixas




Oi Oi Pudins de Abacaxi :s , o blog deu uma parada em visitas :'( , Mais tudo bem , Ontem meu post foi sobre a banda paramore , e de tarde eu sem fazer nada , {tedio} fiiz um blog falando sobre paramore e outras coisinhas depois eu passo o link , bom vamos ao que importa , vim postar um tutorial super legal , que gosto muito e quase sempre preciso dele !  , como colocar os gadgets em caixas , assim quando colocamos no modelo travel ai fica tudo junto , mais acho melhor em caixas então GO !

Resultado : 




Passo a Passo !

Vá em design > Editar Html > Dê Ctrl+F e procure por: 

/* Widgets
E antes de fechar o } cole:

background: COR AQUI !; /*---- 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 ----*/

Onde está COR AQUI ! é a cor da caixa, se quiser alterar a cor eu recomendo essa tabela.

Quando você visualizar você pode estranhar que vai ficar com o fundo original da sidebar, como mostra aqui:

Para retirar esse fundo é só você ir novamente em Html > Ctrl+f e se sua coluna for do lado direito procure por:
.main-inner .fauxcolumn-right-outer .fauxcolumn-inner { 
e se for no 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;
}

4 comentários:

  1. Adorei o tutu ^^
    vc já está add nos afiliados, estamos mto felizes q você tenha aceitado :)

    ResponderExcluir
  2. Esse tutorial é super legal, estou usando no meu blog já faz um tempo e gosto bastante do efeito.
    Ah e estou seguindo seu blog.
    victory-blog1.blogspot.com.br

    ResponderExcluir