27 de mai de 2014

Separando os gadgets da sidebar em caixas

Olá pessoal, hoje trago um tutorial que me foi pedido nos comentários. Este tuto vai
deixar os gadgets de sua sidebar separadas, como se fossem caixinhas. 

primeiro temos que deixar o fundo da sidebar em transparente..
Vá em modelo > personalizar > e veja o print pra ver onde vc tem que clicar

CLIQUE PARA VER EM TAMANHO NATURAL
Salve!
Agora vá em modelo, editar html
Procure pela tag : /* Widgets

Quando encontrar coloque o código abaixo antes de fachar a chave  } 
background:#fff;
border-bottom:5px #COR DA BORDA solid;
margin:15px 0 !important;
border-radius:0 0 0 0;
padding:10px;
box-shadow: inset 0 0 16px #eee, 0 0 5px #ccc;
overflow:hidden
}

O que faz separar os gadgets é a margin-por isso não mexa.
Se quiser mude a cor, espessura e tipo de borda.
Neste link escolha a cor e neste os tipos de borda
Arredonde as bordas se preferir em border-radius
Visualize, se estiver de seu agrado salve.

11 comentários :

  1. Já conhecia o tutorial. Acho que é essencial, o resultado fica lindo *--*
    Adorei as bordas, fica diferente !

    ~kiss
    CS ♥

    ResponderExcluir
  2. Mas tem modelos que não funcionam, qual é o seu ?

    ResponderExcluir
    Respostas
    1. Eliane, os tutoriais aqui postados são do modelo travel.

      Excluir
  3. Respostas
    1. Felipe, este modelo de layout é o travel.

      Excluir
  4. Teria como fazer um desse com o modelo Janela de imagens?

    ResponderExcluir
    Respostas
    1. Felipe, no html de seu blog procure por:
      /* Widgets
      ----------------------------------------------- */
      abaixo coloque:

      .widget{
      background:#fff;
      margin: 10px 0;
      }

      Excluir
  5. Oiee... tudo bem?
    Coloquei no meu blog e adorei o resultado! Mas estou com um problema... A minha sidebar não fica transparente!! Ela fica com "transparência" e fica aparecendo...
    E também estou achando as caixinhas muito estreitas e longe da área de postagens!
    Como consigo arrumar isto?
    Desde já agradeço demais sua atenção! =D

    http://leticiaeeduardonaaustralia.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Letícia, coloque na sua área da sidebar:

      padding: 5px 5px 10px 5px;
      margin: 5px 5px 10px 5px;

      Se sua sidebar já tiver margin e padding corrija.

      Excluir
  6. Obrigada! Sério fiquei procurando por isso um tempão, e nenhum dos tutoriais funcionavam! <3 Beijão! www.infectedbyculture.blogspot.com.br

    ResponderExcluir

Qualquer dúvida pergunte que
responderei com prazer.
Só peço que seu comentário
seja relacionado à postagem.

© Princess Tutoriais- Agradece sua visita
2014. Todos os direitos reservados
Pedidos? dúvidas? nos comentários ou na Ask.
imagem-logo