Separe os Gadgets em Caixas + Personalização

28 dezembro 2014

| |
Oi Pessoal ! 
Hoje eu to trazendo mais um tutorial para a coleção , e este é de como separar os Gadgets e de personalizar eles. Vamos lá aprender ?
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