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;
}'
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
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./*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*/
/*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*/
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.
ResponderExcluirMeu blog http://soumaedecinco.blogspot.com/
email; leilahnassif@gmail.com
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:
ResponderExcluirborder-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!