Como Como colocar Sidebar/Gadgets Personalizados

Olá meus amores !! Cá estou eu com mais um tutorial... kkkk, só um aviso ! O blog não é só sobre tutoriais.... kkkkkk é que ultimamente eu estou bem empolgada com alguns tutoriais que resolvi postar sobre essas coisas no blog rsrsrsrsrsrs... Quer saber mais sobre o assunto ? Clique em "Leia Mais"

Bem meus amores vamos começar com o nosso tutorial, a nossa sidebar vai ficar mais ou menos assim:

Poderão trocar as cores sim, mas primeiro vamos aprender como colocar essa sidebar:

Vá em Modelo - Editar HTML - Clique dentro do quadradinho do html e aperte Ctrl + F-

PROCURE POR:

/* Widgets

Irão encontrar um código mais ou menos assim:

.sidebar .widget {

  border-bottom: 2px solid $(widget.border.bevel.color);

  padding-bottom: 10px;

  margin: 10px 0;

}

E antes de fechar } cole o seguinte código:

background: #transparent; /*---- cor do fundo da caixa ----*/ 

  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 ----*/ 

  background:url("http://i.imgur.com/PmWgDGc.png") no-repeat; /* Link da linha Azul*/

border-radius: 5px; /*---- bordas arredondadas, apague a linha se não quiser ----*/

box-shadow: 1px 3px 15px 2px #ccc; /*---- sombra da caixa ----*/ 

Onde tiver cor do fundo da caixa você pode trocar por outra cor, veja os exemplos:

Código:

background: #FF1493; /*---- cor do fundo da caixa ----*/ 

  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-radius: 5px; /*---- bordas arredondadas, apague a linha se não quiser ----*/

box-shadow: 1px 3px 15px 2px #ccc; /*---- sombra da caixa ----*/

Código

background: #7616a1; /*---- cor do fundo da caixa ----*/ 

  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-radius: 5px; /*---- bordas arredondadas, apague a linha se não quiser ----*/

box-shadow: 1px 3px 15px 2px #ccc; /*---- sombra da caixa ----*/

Se não quiser a sombra da caixa é só apagar esse código aqui:

box-shadow: 1px 3px 15px 2px #ccc; /*---- sombra da caixa ----*/

Se quiser tirar o fundo é só procurar por :

/* Main

e excluirá esse código aqui:

Ficará Assim:

Se quiser trocar essas cores das caixinhas é só ir no código que passei para vocês:

background: #7616a1; /*---- cor do fundo da caixa ----*/ 

  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-radius: 5px; /*---- bordas arredondadas, apague a linha se não quiser ----*/

box-shadow: 1px 3px 15px 2px #ccc; /*---- sombra da caixa ----*/

Vá no backgroud e troque pela cor que desejar:

background: #7616a1; /*---- cor do fundo da caixa ----*/ 

Para poder saber o número da cor ( #7616a1 ) é só procurar no google por :

tabela de cores hexadecimal

                                                                            (antes)

(deois)

Já vou deixar o site aqui ó

Tabelas de Cores Html/Hexadecimal

Bem meus amores, espero ter ajudado...

Um Big beijo e até a próxima !!