Tutorial - Borda nas postagens


Boa tarde, pessoal. Hoje, estava sem inspiração, então resolvi postar um tutorial, para colocar bordas nas postagens.Foi um tutorial que gostei muito,então vou deixar os créditos de onde eu peguei : Portal encantado. Quer ver o tutorial? Leia mais

Se você usa o modelo Travel procure por:

.main-inner .column-center-outer {
Se você usa o Modelo Janela de Imagem ou Marca d'agua procure por :

.post-outer {

Agora você vai achar isto:

No Modelo Travel 

.main-inner .column-center-outer {  background: $(post.background.color) $(post.background.url) repeat scroll top left;   _background-image: none;}

Se você usa o Marca d'agua

.post-outer { background-color: $(post.background.color);  border: solid 1px $(post.border.color);  -moz-border-radius: $(post.border.radius);  -webkit-border-radius: $(post.border.radius);  border-radius: $(post.border.radius);  -goog-ms-border-radius: $(post.border.radius);  padding: 15px 20px;  margin: 0 $(post.margin.sides) 20px;

Se você usa o Janela de Imagem

.post-outer {  background-color: $(post.background.color);  border: solid 1px $(post.border.color);  -moz-border-radius: $(post.border.radius);  -webkit-border-radius: $(post.border.radius);  border-radius: $(post.border.radius);  -goog-ms-border-radius: $(post.border.radius);  padding: 15px 20px;  margin: 0 $(post.margin.sides) 20px;

 Independente do modelo você vai substituir tudo o que você achou por :


.post-outer {background: #fff; /* Fundo da postagem */
padding-top: 1px; /* Espaço do topo */
padding-left: 10px; /* Espaço da esquerda */
padding-right: 10px; /* Espaço da direita */
padding-bottom: 10px; /* Espaço de baixo */
margin: 1px 12px 7px;border-top:2px #EDEDED solid; /* Borda de cima */
border-left:1px #EDEDED solid; /* Borda da esquerda */
border-right:1px #EDEDED solid; /* Borda da direita */
border-bottom:1px #EDEDED solid; /* Borda de baixo */
box-shadow: inset 0 0 5px #F8F8F8, 0 0 1px #ccc; /* Sobra */
border-radius: 15px; /* Se quiser arredondar a postagem */
margin-top: 35px;
}
 Espero que gostem! Beijos.

4 comentários:

  1. Yoo é um ótimo tuto, bem útil ><
    Já esta na elite de afiliados...desculpe '3

    Portal Encantado

    ResponderExcluir
  2. Que linda a bordinha *---* você pode participar do joguinho no meu blog??

    http://juventudedamoda-br.blogspot.com.br/2013/02/joguinho-novidade.html

    ResponderExcluir
  3. Adorei a bordinha.
    Mesmo já sabendo como fazer.

    ResponderExcluir