Personalizando o Sidebar.

Olá cats :3

Vocês estão bem? Comigo tá tudo 10, tirando o problema com o meu notebook super velho; o problema é que agora, do nada, duas entradas USB não estão pegando, então eu tenho que escolher em usar o teclado ou usar o mouse, aí fica difícil. 

Enfim, muitos de vocês tem dúvidas em relação ao famoso Sidebar (que é a coluna do lado onde fica os gadgets, tipo o meu, onde eu coloco Afiliados, Caixa de Pesquisa etc), então eu decidi fazer uma série de personalização da Sidebar, onde eu ensinarei passo por passo de como personalizar a sua. Vamos começar?

1°: Bom, em primeiro passo eu vou ensinar como tirar o fundo ou colocar uma cor personalizada no fundo da sidebar; o modelo que eu uso é o viagem, então se não der muito certo com vocês mil desculpas! 

Procure por: .main-inner .fauxcolumn-right-outer .fauxcolumn-inner { (isso é para lado direito, lado esquerdo é esse: .main-inner .fauxcolumn-left-outer .fauxcolumn-inner {), quando tu achar, vai ter o código background, nele você coloca assim se quiser deixar trasnparente, ou seja, sem cor: background: transparent repeat scroll top left; Se você quer com cor troque o transparent por #suacor.

2°: Agora que você personalizou o fundo do seu sidebar nós vamos personalizar o topo dele, nessa parte eu sugiro que você já tenha em mente como vai ficar e como você quer, porque na minha opinião essa é umas das partes mais complicadas na hora do layout. Nem sei o porquê.

A forma de Sidebar que eu vou ensinar é com uma imagem, se você quiser com cor é só colocar uma imagem de cor :)

É simples, só exige paciência. Para começar procure por: .footer-inner .widget h2, vai estar mais ou menos dessa forma: .sidebar .widget h2 { padding-bottom: .5em; } Selecione essa parte todinha e troque pelo seguinte código:

.footer-inner .widget h2,.sidebar .widget h2 {padding-bottom: 1.1em;background:url('URL DA FAIXA')no-repeat;margin-left:-20px;text-align:center;}

3°: Agora que você já tem o fundo do título da sua Sidebar você precisa personalizar o título, certo? Então vamos começar a fazer isso! Primeiro busque no seu código por: h2 { Quando achar, selecione toda parte desde h2 a última } que é ligada ao h2 e troque pelo seguinte código:
h2 {
  font-family: sua fonte;
  font-size: 25px;
  color: #fa84d7;
-webkit-transition-duration: .40s; /*efeito de separação das letras como tem no meu, se não quiser apague somente essa linha*/
}
Abaixo desse código que você colocou agora cole:
.sidebar h2:hover {
text-decoration: none;
text-shadow: 0 1px 1px #a9a7a7;
color: #f45dbb;
letter-spacing: 3px;/*efeito de separação das letras como tem no meu, se não quiser apague somente essa linha*/
-webkit-transition-duration: .40s;/*efeito de separação das letras como tem no meu, se não quiser apague somente essa linha*/
}
Esse é o hover, se você não quiser hover então não coloque!

-------------------------------------------------------------------------------------------------------------------

O tutorial de hoje foi esse gente, espero que vocês tenham gostado e que tenha sido útil para vocês :) Beijos :*