Primeiramente, queria agradecer pelos 181 seguidores, fico feliz que estejam gostando do blog. O tutorial que trago hoje foi um dos mais pedidos, a famosa ''bordinha nas postagens'' igual meu layout antigo (quem quiser ver é só clicar aqui). É super fácil e tem três tipos de bordinhas que eu vou mostrar no tutorial a seguir. Termine de ler.
1- Vá no seu modelo de um ctrl+f e procure por .main-inner .column-center-outer { Abaixo do código procurado, haverá o componente dele, ou seja, o código abaixo. Vai estar bem assim:
.main-inner .column-center-outer {background: $(post.background.color) $(post.background.url) repeat scroll top left; _background-image: none; }
Então, apague todo esse código (o que mostrei acima), e no lugar dele, cole este código:
.post-outer {box-shadow: inset 0 0 0px #E6E6E6, 0 0 5px #d9d7d7;margin: 3px 8px 15px;background:#fff;padding: 5px 5px;padding: 5px;outline: dotted 1px #cor da borda;outline-offset: -5px;}
Bom onde tem cor da borda vocês já sabem, e onde tem dotted é o tipo de alinhado se tiver em duvida clique aqui e veja os tipos de borda.
2- Borda na sidebar: Vá no seu modelo de um ctrl+f e procure por /* Widgets Logo abaixo você verá que tem um .sidebar .widget { mais o código que o acompanha. Assim:
.sidebar .widget {border-bottom: 2px solid $(widget.border.bevel.color);padding-bottom: 10px;margin: 10px 0;}
Então, substitua esse código mostrado acima, e no lugar dele cole este aqui:
.sidebar .widget {width:100% !important;background:#fff;padding-left: 10px;padding-bottom: 10px;padding-right:10px;padding-top: 5px;margin: 30px 0; box-shadow: inset 0 0 0px #E6E6E6, 0 0 5px #d9d7d7;outline: dotted 1px #cor da borda;outline-offset: -5px;}
Aqui é o mesmo basta trocar os destacados. Se usar credite ao Traveling. Beijos.
Amo bordinhas na sidebar e nos posts, inclusive eu uso <3
ResponderExcluirhtmlandresources.blogspot.com
Obrigada >3<
Excluirawn vanessa, acompanho seu blog faz um pouquinho de tempo, mas acho que nunca comentei aqui, vou passa a comenta todos os posts, seu blog e incrivel, Parabens!
ResponderExcluirBomb Dreams *&* www.bomb-dreams.blogspot.com.br
Wont obrigada >3<
ExcluirTuto fofa! :3 Talvez eu use no próximo lay ^^
ResponderExcluirKissus <3
おめでとう!
Use mesmo vale a pena ! beijos
Excluirque layout lindo! E fazer esse modelinho é super fácil, né? Não tem segredo :3
ResponderExcluirHey, inscreva-se para participar do HTML PROJECT e prove seus conhecimentos em HTML e concorra á uma lista enorme de prêmios maravilhosos! *-*
Inscreva-se: htmlp-roject.blogspot.com.br
Inscrições encerrarão dia: 15/12/2013 (nas férias, venha se divertir com a gente!)
Obrigada, vou se me inscrevo >3<
Excluiramo bordinhas, fica fofo. segue de volta?
ResponderExcluirCollected flowers ♡
Fica mesmo shush ! vou ver se sigo
ExcluirAdorei o tutorial Vanessa >3< Vou usar com certeza!
ResponderExcluirmy world ♡
Use mesmo em ! obrigada >3<
Excluir