10.6.13

sidebar personalizada

Vejam aqui como vai ficar Lindo não? Eu pelo menos amei hahahaha agora chega de falação e vamos ao que interessa!
Procure por:



/* Widgets

E coloque abaixo dele o seguinte código:
.sidebar .widget { text-align: center;
   border-bottom: 2px solid $(widget.border.bevel.color);
  padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
  margin: 30px 0;
Background: #ffffff;
box-shadow: inset 0 0 40px #eee, 0 0 6px #ccc;
border-bottom: 10px solid #aca8e8;
}
.sidebar h2 {
font-family: Century Gothic; /*Nome da fonte*/
text-transform: uppercase;
font-size: 20px; /*Tamanho da fonte*/
color: #fff; /*Cor da fonte*/
background: url(Url da imagem) no-repeat center; /*Sua faixa e posição*/
height: 16px;/*Altura da imagem*/
line-height: 6px;
text-align: center; /*Alinhamento do texto*/
margin-top: 0px;
margin-left:-36px ;
text-shadow:0 2px 2px #e07eb6;
margin-bottom:20px ;
margin-right: -4px;
padding:21px;
width:112%;
-webkit-transition-duration: .40s;
}

E onde está destacado de vermelho, vocês colocam o url da image que vocês escolherem:







Eu também tenho algumas lisas como a do exemplo, se quiserem é só falar ai nos comentarios

Nenhum comentário:

Postar um comentário