Tutorizando - Arredondar os cantos do layout

Hoje vou ensinar a arredondar os quatro cantos do layout, do mesmo jeito que o meu, a pedidos de leitores. (:

Clique em "Ler mais".

Coloquei o código para arredondar todos os cantos. Então, você precisa escolher apenas os códigos certos de acordo com o seu layout (a posição das barras laterais). Se o seu é como o meu (uma barra lateral do lado direito apenas), pegue os códigos da barra lateral direita, e os códigos do lado esquerdo da barra de postagens. Beleza?

Vá em Modelo - Editar HTML - Prosseguir.

1. Canto superior (de cima) - barra lateral DIREITA

Procure, com o CTRL+F, por:

.main-inner .fauxcolumn-right-outer .fauxcolumn-inner {

Logo abaixo cole:

-webkit-border-top-right-radius: 20px;
-moz-border-radius-topright: 20px;
border-top-right-radius: 20px;

2. Canto superior (de cima) - barra lateral ESQUERDA

Procure, com o CTRL+F, por:

.main-inner .fauxcolumn-left-outer .fauxcolumn-inner {

Logo abaixo cole:

-webkit-border-top-left-radius: 20px;
-moz-border-radius-topleft: 20px;
border-top-left-radius: 20px;

3. Canto superior - barra de POSTAGENS

Procure, com o CTRL+F, por:

.main-inner .column-center-outer {

Cole logo abaixo:

Para arredondar o lado DIREITO:

-webkit-border-top-right-radius: 20px;
-moz-border-radius-topright: 20px;
border-top-right-radius: 20px;

Para arredondar o lado ESQUERDO:

-webkit-border-top-left-radius: 20px;
-moz-border-radius-topleft: 20px;
border-top-left-radius: 20px;

4. Canto inferior (de baixo) - barra lateral DIREITA

Procure, com o CTRL+F, por:

.main-inner .fauxcolumn-right-outer .fauxcolumn-inner {

Logo abaixo cole:

-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
border-bottom-right-radius: 20px;

5. Canto inferior (de baixo) - barra lateral ESQUERDA

Procure, com o CTRL+F, por:

.main-inner .fauxcolumn-left-outer .fauxcolumn-inner {

Logo abaixo cole:

-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-bottomleft: 20px;
border-bottom-left-radius: 20px;

6. Canto inferior (de baixo) - barra de POSTAGENS

Procure, com o CTRL+F, por:

.main-inner .column-center-outer {

Cole logo abaixo:

Para arredondar o lado DIREITO:

-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
border-bottom-right-radius: 20px;

Para arredondar o lado ESQUERDO:

-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-bottomleft: 20px;
border-bottom-left-radius: 20px;

Qualquer dúvida, é só me perguntar. (:

Participe da promoção "Seu blog no DDP" e  apareça em um post por aqui! É suuuper simples, nada de votações e tudo mais. Clique aqui.