05 maio 2012

Tutorizando - bordas arredondadas somento nos cantos externos

                 
Oi, hoje eu vim postar um tutorial que a Lu do Teen Style me pediu por comentário. Ela queria saber como eu fiz pra deixar somente os cantos externos do layout arredondados. Bom, eu achei o código no Go Imagine portanto os créditos já estão dados >< Vamos lá? Clique em continue lendo.



Todos que usam as bordas arredondadas percebem que fica um tipo de uma fenda entre a área de postagem e a sidebar, como vocês podem ver na imagem. Mas esse tutorial vai ensinar como arredondar somente os cantos externos. Bom, esse tutorial só foi testado no template travel (viagem), então eu não garanto que vai dar certo nos outros templates. Agora vamos ao tutorial:

Atenção! Caso sua coluna seja do lado esquerdo inverta os códigos, use o código referente a área da postagem na coluna, e o código referente a coluna use na área do post ok?

Agora vá em Design > Editar HTML e pesquise por: 

.main-inner .column-center-outer {

Você vai ver que logo abaixo terá o código: _background-image: none; 

Aí você vai colar ABAIXO dele o código referente a área da postagem, que é o seguinte:

-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomleft: 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
Depois você vai pesquisar por:

.main-inner .fauxcolumn-right-outer .fauxcolumn-inner {  (se sua sidebar for do lado direito)
ou
.main-inner .fauxcolumn-left-outer .fauxcolumn-inner {  (se sua sidebar for do lado esquerdo)

Abaixo terá o seguinte código:


background:$(widget.outer.background.color) $(widget.outer.background.gradient) repeat scroll top left;

Aí você vai colar ABAIXO dele o código referente à sidebar, que é esse:

-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomright: 20px;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px; 
Aí seu template vai ficar assim:



É isso gente, espero que vocês aproveitem bem esse tutorial ! Beijos (: 

5 comentários:

Luuh Oliveira disse...

OMGOMGOMG!! Cris <33 Te love cris <33 Obg por atender meu pedido ó, ja botei lá ficou lindoo s2 Bezões Luuh
Rawr Girl ~> teenstyle.com

Danny disse...

haha, que tutorial mais perfeito! ameei demais : D Beijos ^^ to seguindo aqui!

www.blogmeninamulher.com

Lais Raquel disse...

Tuto divino viu CRIS??Eu não vou botar(ainda) pois to com lay novo e NÃO QUERIA MECHER AGORA!Mas eu irei indicar viu??Como já disse eu amo aqui!

www.girlycute.blogspot.com

Cris disse...

awn sua tchuca, magina, atender aos pedidos dos meus leitores é o mínimo que eu posso fazer né :p

Mayara Alves disse...

Adorei a dica! Vou usar lá no blog.

Seguindo!!

Beijos

http://gmaterialistas.blogspot.com
@gmaterialistas