22 março 2015

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 ó
Bem meus amores, espero ter ajudado...
Um Big beijo e até a próxima !!




Nenhum comentário:

Postar um comentário

Página Anterior Próxima Página Home
Layout criado por;