Seja bem vindo(a) ao Sugoi tutoriais =)
Temos temas para blogger, wordpress e outros!
Acompanhe nosso blog pela FANPAGE!
Peça o seu tutorial aqui!

2/22/2013

Bordas Coloridas na Área de post e Sidebar


Irei ensinar a vocês como colocar bordas coloridas na área de post e sidebar de seu template.
Vejam o exemplo...

Área de post
(clique na imagem para amplia-la)

Sidebar

Atenção: No exemplo a borda está aparecendo só na parte de baixo. Mas com o código que irei disponibilizar a borda fica em cima e em baixo

Vamos começar?
Primeiro irei ensinar a como colocar na área de post...

1. Procure por '.main-inner .column-center-outer {
  background: $(post.background.color) $(post.background.url) repeat scroll top left;
  _background-image: none;
}'
2. Depois de achar '.main-inner .column-center-outer {
  background: $(post.background.color) $(post.background.url) repeat scroll top left;
  _background-image: none;
}' substitua ele pelo seguinte código
/* PERSONALIZAÇÃO DA ÁREA DE POST */
.post-outer {
border-top: 5px solid #8db6c8; */cor da borda de cima*/
margin: 4px 2px 30px;
padding: 10px 10px;
background:#ffffff; /*cor do fundo*/
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border-radius:50px; /*arredondamento das bordas*/
border-bottom: 5px solid #8db6c8; */ cor da borda de baixo */
box-shadow: inset 0 0 6px #e2e1e1, 0 0 1px #ccc; /* cor da sombra*/
}
/* PERSONALIZAÇÃO DA ÁREA DE POST */
O que pode ser alterado do código está destacado em negrito.

Agora vamos aprender a como fazer o mesmo na sidebar...

1. Procure por ']]></b:skin>'
2. Acima de ']]></b:skin>' cole o seguinte código
/*PERSONALIZAÇÃO DA SIDEBAR*/
.sidebar .widget {
margin: 4px 2px 30px;
padding: 10px 10px;
background:#ffffff; /*cor do fundo*/
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border-radius:50px; /*arredondamento das bordas*/
border-bottom: 5px solid #8db6c8; /*cor da borda de baixo*/
border-top: 5px solid #8db6c8; /*cor da borda de cima*/
box-shadow: inset 0 0 6px #e2e1e1, 0 0 1px #ccc; /* cor da sombra*/
}
/*PERSONALIZAÇÃO DA SIDEBAR*/

Tem um pequeno problema no código da sidebar. Ele não funciona para o último widget. Mas a solução está logo abaixo.

4. Procure por '.sidebar .widget:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;'
5. Logo abaixo de 'padding-bottom: 0;' cole o seguinte código
/*PERSONALIZAÇÃO DA ÚLTIMA SIDEBAR*/
.sidebar .widget:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
background:#ffffff; /*cor do fundo*/
border-top: 5px solid #8db6c8; /*cor da borda de cima*/
padding: 5px;
margin-left: 13px;
margin-top: 0px;
margin-bottom:25px;
border-radius:30px;
border-bottom: 5px solid #8db6c8;/*cor da borda de baixo*/
box-shadow: inset 0 0 6px #8db6c8, 0 0 1px #ccc; /*cor da sombra*/
}
/*PERSONALIZAÇÃO DA ÚLTIMA SIDEBAR*/
É super recomendável deixar as configurações do último widget, igual ao do resto das widgets.
O que pode ser alterado dos dois códigos está destacado em negrito.

Espero que tenham gostado e aprendido.
Qualquer dúvida ou agradecimento deixe por comentário!

Tutorial feito exclusivamente ao ST, caso reblogue coloque os devidos créditos.

Clique aqui e aprenda a como deixar essas bordas com efeito hover!

2 comentários:

  1. Olá Por favor preciso de sua ajuda, fiz o tutorial colocar bordas na sidebar e area de postagem, fiz primeiro na sidebar e deu certo, depois que fiz na area de postagem ficou tudo transparente e não sei o que fazer please help me tenho uma postagem amanhã e não sei o que fazer.
    Meu blog http://soumaedecinco.blogspot.com/
    email; leilahnassif@gmail.com

    ResponderExcluir
  2. Olá, parabéns pelo tutorial, mas deixo uma pequena dica para quem quiser também coloca a borda ao redor de toda a sidebar, substitua o código:
    border-top: 5px solid #8db6c8; */cor da borda de cima*/
    POR
    border: 5px solid #8db6c8;
    e exclua o código
    border-bottom: 5px solid #8db6c8; /*cor da borda de baixo*/

    só uma dica, não que eu esteja corrigindo esse belíssimo poster, mas é só mais uma opção que seira bem útil, há, e você pode alterar a largura da borda apenas alterando o código
    5px, escolha qualquer número, mantendo apenas o px!! Obrigado!

    ResponderExcluir

Seja educado , nossa educação depende da sua.
Criticas e sugestões são bem vindos.
Se reblogar por favor nos avise.