Oi Pessoal !
Hoje eu to trazendo mais um tutorial Vão no editor HTML ( Indo em Modelo > Editar HTML ) pressione as teclas Ctrl + F e procure por : .sidebar .widget { . Vocês irão encontrar isso :
.sidebar .widget {
border-bottom: 2px solid $(widget.border.bevel.color);
padding-bottom: 10px;
margin: 10px 0;
}
Apague a parte em negrito ( o conteúdo ) até a chavinha , e substitua por :
background: #FFF; /*Código da Cor do Fundo do Gadget */
padding-top: 5px; /*Espaço do Topo*/
padding-right: 10px; /*Espaço da Direita*/
padding-left: 10px; /*Espaço da Esquerda*/
padding-bottom: 30px; /*Espaço de baixo*/
border-top: 2px solid #ccc; /* Borda do topo se não quiser apague*/
border-bottom: 2px solid #ccc; /*Borda de Baixo se não quiser apague*/
-moz-box-shadow: 0px 0px 5px #CCC; /*Sombreado se não quiser apague*/
-webkit-box-shadow: 0px 0px 5px #CCC; /*Sombreado se não quiser apague*/
box-shadow: 0px 0px 5px #CCC; /*Sombreado se não quiser apague*/
-moz-border-radius: 5px; /*Arredondamento se não quiser apague*/
-webkit-border-radius: 5px; /*Arredondamento*/
border-radius: 5px; /*Arredondamento*/
}
Entenda os últimos Códigos
Azul : Nível do Sombreado , quanto maior o número mais sombra .
Vermelho : Código da cor do Sombreado
Verde : Nível do arredondamento , quanto maior mais redondo.
Entendendo as Bordas
Quem não quiser as bordas é só apagar as linhas que estão indicadas no mesmo.
Laranja : Cor das Bordas
Contorno Amarelo : Grossura das bordas.
Ah perai ! no último Gadget sempre fica sem a borda de baixo , para mudar isso procure por : border-bottom: none; e apague esta linha , para facilitar aperte enter e Delete ( somente uma vez ) que o código já é excluído .
Bem gente é isso, esse foi o tutorial , qualquer dúvida é só comentar , Abraços e até o próximo post !





Nenhum comentário :
Postar um comentário