Personalizando os Gadgets

Hoje trouxe um tutorial ensinando a personalizar os gadgets. Confiram:

Vá em Modelo > HTML > Pesquise por Headings > Logo abaixo você irá encontrar h2 {  > Apague tudo até } .

Substitua por :

h2 { margin: 0 0 1em 0; font: $(widget.title.font); color: $(widget.title.text.color); text-transform: uppercase; border-radius:0px 0px 0 0; /* borda */ font: normal normal 12px tahoma; text-transform:uppercase; color: #000; background: #FAF0E6; /* cor do fundo da caixa */ text-align:RIGHT; /* alinhamento do texto */ padding:5px; float:center; right: 5px; margin-top:-24px; /* altura da caixa */ }

Depois disso, procure por Widgets  > Abaixo dele cole:

.sidebar .widget { background: #fff; /*---- cor do fundo da sidebar ----*/ padding-left: 20px; /*---- espaço à esquerda ----*/ padding-bottom: 20px; /*--- espaço de baixo ---*/ padding-right: 20px; /*--- espaço à direita ---*/ padding-top: 5px; /*---- espaço de cima ----*/ border-bottom: 8px solid #FF69B4; /* cor da borda */ box-shadow: 1px 1px 1px 1px #ccc; /*---- sombra da caixa ----*/ }

Visualize > Se tudo estiver certo Salve.

Para mudar as cores, é só seguir de acordo com essa legenda. Para visitar a tabela, clique 'aqui'.

HHH > Letras do título.

HHH > Fundo do título.

HHH > Fundo do gadget.

HHH > Barrinha embaixo do gadget.

HHH > Sombra do gadget.

E este é o resultado final:

Espero que tenham gostado, pois este tutorial é bem facil!

Muitos Beijos e Abraços!

Até mais.

- Jullie F. M.