Bordas Coloridas na Área de post e Sidebar
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!