Olá cupcakes de menta !!!! Como vocês vão? Eu vou bem, muito bem !!!!! Bom, hoje irei mostrar para vocês como arredondar as bordas externas do blog!!!
Ex.:
Preparados???? Go!!!!!!
Como aplicar?
1. Vá em Design Editar HTM procure por: .main-inner .column-center-outer {
2. Logo abaixo terá o seguinte código: background-image: none; , cole abaixo o código de borda que você escolheu, referente a área da postagem.
3. Depois de tudo isso, pesquise este código : .main-inner .fauxcolumn-right-outer .fauxcolumn-inner { (para o lado DIREITO)
4. Pesquise este código: .main-inner .fauxcolumn-left-outer .fauxcolumn-inner { (para o lado ESQUERDO)
Abaixo terá o seguinte:
background:$(widget.outer.background.color) $(widget.outer.background.gradient) repeat scroll top left; , então você irá colar abaixo dele o código de borda que escolheu, refernte á coluna!!!!
background:$(widget.outer.background.color) $(widget.outer.background.gradient) repeat scroll top left; , então você irá colar abaixo dele o código de borda que escolheu, refernte á coluna!!!!
Os código:
1. Para deixar só o topo do blog com os cantos arredondados:
Código para arredondar a área da postagem:
-webkit-border-top-left-radius: 20px;
-moz-border-radius-topleft: 20px;
border-top-left-radius: 20px;
Código para arredondar as colunas:
-webkit-border-top-right-radius: 20px;
-moz-border-radius-topright: 20px;
border-top-right-radius: 20px;
-moz-border-radius-topright: 20px;
border-top-right-radius: 20px;
2. Para deixar só a parte de baixo do blog com os cantos arredondados:
Código para arredondar a área da postagem:
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-bottomleft: 20px;
border-bottom-left-radius: 20px;
-moz-border-radius-bottomleft: 20px;
border-bottom-left-radius: 20px;
Código para arredondar a coluna:
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
border-bottom-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
border-bottom-right-radius: 20px;
3. Para deixar todos os cantos externos arredondados:
Código para arredondar a área da postagem:
-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
-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
Código para arredondar a coluna:
-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;
-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;
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, certo?!?!?!
Caso você não ache os códigos procure pela parte que se refere a área do post e da sidebar e faça os mesmos procedimentos. Quem desenrola um pouco mais pode criar outros modelos de borda usando "este site!!!
Espero que tenha gostado!!!!
Beijos!
Nenhum comentário:
Postar um comentário