27 de dez. de 2012

Tutorial: Bordas Coloridas na Sidebar e na Área das Postagens


Hey Guys!!
How Are You??

Bem, eu achei um tutorial um tempo atrás, ensinando a como colocar essas bordas aqui:

O tutorial era do blog Prince Teen. Mas a explicação estava muito complicada. Agora, eu editei as explicações e trouxe elas pra vocês. Espero que gostem, e em caso de dúvidas, pergunte nos comentários.

Let's go...
A SIDEBAR:
Vá em Modelo> Editar HTML> Ctrl+F> e procure por

]]></b:skin>

Antes desse código, cole:
.main-inner .column-center-outer {
.sidebar .widget {
background:#fff; /*--------Cor do fundo------*/
border-top: 5px solid #FF82AB; /*------------Cor da barra de cima------*/
padding: 5px; /*------------Espaço interno------*/
margin-left: -13px; /*------------Espaço externo da esquerda------*/
margin-top: 0px; /*------------Espaço externo de cima------*/
margin-bottom:25px; /*------------Espaço externo de baixo------*/
border-radius:2px; /*-------------Arredondamento do gadget--------*/
border-bottom: 5px solid #CDB38B ; /*------------Cor da barra de baixo------*/
box-shadow: inset 0 0 6px #e2e1e1, 0 0 1px #ccc;
}



Recomendo editar só o que está em negrito. Visualize, e se estiver tudo certo, salve. 


AS POSTAGENS:
Vá em Modelo> Editar HTML> Ctrl+ F> e procure por 
.main-inner .column-center-outer { 

Você vai encontrar dois códigos. Mas voce irá usar só o segundo. 

Depois do código, cole:
.post-outer {
margin: 4px 2px 30px;
padding: 10px 10px;
background:#ffffff;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
er-top: 5px solid #FF82AB;
border-radius:2px; /*-------------Arredondamento da área--------*/
border-bottom: 5px solid #FF82AB;/*------------Cor da barra de baixo------*/
border-top: 5px solid #d4bfb1;/*------------Cor da barra de cima------*/
box-shadow: inset 0 0 6px #e2e1e1, 0 0 1px #ccc;
}


Mas atenção, se você tiver feito esse tutorial, apague todo o código. Pois vai atrapalhar na hora de fazer esse tutorial.

Espero que tenham gostado.
Beijos, 
Pâm

6 comentários:

  1. Nossa como eu procurei por esse tutorial *___* mas é pra procurar pelo o que nas postagem ?

    ResponderExcluir
    Respostas
    1. ^w^
      Ah, desculpe. Acontece um erro por causa do blockquote. Mas já vou acertar. Desculpe mais uma vez. *_*'

      Excluir
    2. Este comentário foi removido pelo autor.

      Excluir
  2. Estava procurando muito ele, obrigada, gostei muito *-*
    Seguindo, retribui?

    Fashion Love

    ResponderExcluir
  3. Oi como separo os posts depois?

    ResponderExcluir
  4. então o seu quando passa o mouse muda de cor como faz?

    ResponderExcluir

Informações Básicas de Comentários(IBC):
-Ler não mata, então leia o post antes de comentar
- Não serão aceitos comentários ofensivos.
- Aceito pedidos para seguir, se estiver seguindo o blog...
- Respondo e retribuo todos os comentários.


Obrigada por Comentar!!