16 novembro 2016

Personalizando os gadgets do sidebar







Aperte Ctrl+F e procure por h2 {
Logo abaixo do trecho que você procurou, vai ter algo parecido com isso (se nunca foi alterado):

h2 {
  font: $(widget.title.font);
  color: $(widget.title.text.color);
}



Apague toda essa parte e no lugar coloque esse código:

.sidebar h2 {
font-family: Century Gothic; /*Tipo de fonte*/
font-size: 16px; /*Tamanho da fonte*/
color: #000000; /*Cor da fonte*/
border-bottom: 2px solid #fff; /*Borda de baixo, apague se não quiser*/
background: #fbfbfb; /*Cor de fundo*/
text-align: center; /*Alinhamento do texto*/
}

Agora é só modificar as cores e a fonte como quiser. Se em vez de cor, você quiser colocar uma imagem de fundo, substitua essa parte:
background: #fbfbfb; /*Cor de fundo*/
 
Por isso:
background: url(link_da_imagem) no-repeat center;
height: 30px;/*Altura da imagem*/
width: 200px; /*Largura da imagem*/ 
Visualize se está tudo certo e salve. Espero que tenham gostado. 
Um forte abraço, e ate o proximo tutorial!
 







310x40

Ajutstes: 1200x330

Nenhum comentário:

Postar um comentário