quarta-feira, 11 de julho de 2012

Sidebar colorida só na área dos Widgets

tumblr_lfhqs13Y2v1qdj6v9o1_500

Oi minhas maravilhas, como vão ? quero agradecer aos 400 seguidores, muito obrigada a todos que seguiram. Trago um tutorial saindo do forno para vocês, é super fácil e rápido. Neste tutorial vou ensinar a vocês a mudar a cor da sidebar só aonde estão os widgets, por exemplo a cor da sua sidebar é branca, eu vou ensinar a vocês a colocar outra cor só aonde tem os widgets.

Vá na página Design > Editar HTML e procure por .main-inner .column-right-inner { e vai achar um código parecido com este:

.main-inner .column-right-inner {
  margin-left: $(content.padding);
}

Abaixo da segunda linha do trecho acima cole o seguinte código

-webkit-border-top-left-radius: 20px;

-webkit-border-bottom-left-radius: 20px;

-moz-border-radius-topleft: 20px;

-moz-border-radius-bottomleft: 20px;

border-top-left-radius: 20px;

border-bottom-left-radius: 20px;
border-top: 1px solid #000000; ;
border-bottom: 1px solid #000000; ;
border-left: 1px solid #000000; ;

background: #DCDCDC

Agora na parte em negrito mude a cor da borda e na parte de itálico mude a cor do fundo. Esse é o código se sua sidebar for na direita, se a sua sidebar for na esquerda coloque este código. E fazer as mesmas alterações que eu falei do código acima

-webkit-border-top-right-radius: 20px;

-webkit-border-bottom-right-radius: 20px;

-moz-border-radius-topright: 20px;

-moz-border-radius-bottomright: 20px;

border-top-right-radius: 20px;

border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
border-top: 1px solid #000000; ;
border-bottom: 1px solid #000000; ;
border-left: 1px solid #000000; ;

background: #DCDCDC

Depois visualize e se estiver tudo certo, é só salve e pronto. E não se esqueça de dar os créditos.

Até o próximo post.

7 comentários:

  1. Perfeito o blog, já to seguindo.
    Ontem eu fiz um blog e no mesmo dia alguém excluiu ele , triste né, até tentei fazer um lay legal parecido com o de antes mais não consegui, não desisti e fiz outro igual, se der da uma passadinha lá?
    http://souassim-problem.blogspot.com.br/

    ResponderExcluir
  2. Hello!
    Tô dando uma passada aqui pra dizer que te indiquei pra uma brincadeira, o "Meme das 11 coisas".
    http://star-silent.blogspot.com.br/2012/07/betah-do-secret-doramas-me-mandou-um.html
    Bjus
    Á e para lembrar eu tou te seguindo , entao me segue tambem ?

    ResponderExcluir
  3. Ahhh que legal o tuto, muito util mesmo

    O ptr está no seu 1° sorteio de um lindo colar, vamos participar?
    http://portrasdorimel.blogspot.com.br/2012/07/sorteio-colar-asas-de-anjo.html

    ResponderExcluir
  4. Adorei o tutorial, fica lindo :D Parabéns pelos 400 seguidores, você merece isso e muito mais *-*

    Beijos =* Farry Teen

    ResponderExcluir
  5. amei o tutorial, bem fofis,
    www.Bikoti.blogspot.com

    ResponderExcluir
  6. Fica liindo o efeito e parabéns pelos 400 seguidores ^^
    Seguiindo aaq já, Beijão ♥

    plush-girl.blogspot.com

    ResponderExcluir
  7. Adorei o tutorial e parabéns pelos mais de 400 seguidores.
    http://startdreamy.net.tc

    ResponderExcluir