Estilo para os titulos da sidebar Antes de tudo, preciso avisar que este tutorial serve para os modelos de layout (nao testei os novos modelos) e foi usado um template Minima.A classe a que pertencem os titulos da sidebar e h2 e no template Minima existe um trecho do codigo para h2, que engloba os titulos da sidebar e a data dos posts:/* Headings----------------------------------------------- */h2 {margin:1.5em 0 .75em;font:$headerfont;line-height: 1.4em;text-transform:uppercase;letter-spacing:.2em;color:$sidebarcolor;}Mas voce pode dar outros estilos para os titulos da sidebar, inclusive usando imagens e cores diferentes para cada um, bastando acrescentar um pouquinho mais de css. Sidebar sem estilo:Primeiro, localize no codigo CSS, o trecho:/* Sidebar Content----------------------------------------------- */.sidebar { color: $sidebartextcolor;line-height: 1.5em;}Logo depois, acrescente:.sidebar h2{ }e entre as chaves que voce ira acrescentar o estilo que pretende dar aos titulos da sidebar. Por exemplo:.sidebar h2{font-size: 22px;color: red;}resultado:Voce pode acrescentar aqui estilos para a fonte e cores do plano de fundo (ou ate mesmo uma imagem para o background). Pode, por exemplo, determinar que a primeira letra de cada titulo seja diferente do restante:.sidebar h2{font-size: 17px;color: #777e95;font-family: Tahoma;}.sidebar h2:first-letter {font-family:Tangerine;color:#8262ae;font-size:38px;font-weight: bold}resultado:Posso criar e acrescentar uma imagem de fundo (aqui criei uma imagem 320 x 50):.sidebar h2{width: 320px;height: 50px;font-size: 17px;color: #777e95;font-family: Tahoma;background: url(http://3.bp.blogspot.com/_YGpl3rQPSzI/TPPq5PUdiBI/AAAAAAAAQ-I/hrx4kFtnQG4/s1600/side.png) no-repeat;}resultado:Note como os titulos nao ficaram centrados (estao muito 'para cima'). Entao, nao basta colocar a medida da imagem, e preciso usar um pouco de padding:.sidebar h2{width: 320px;height: 35px;font-size: 17px;color: #777e95;font-family: Tahoma;background: url(http://3.bp.blogspot.com/_YGpl3rQPSzI/TPPq5PUdiBI/AAAAAAAAQ-I/hrx4kFtnQG4/s1600/side.png) no-repeat;padding-top: 15px;}resultado: Veja que eu subtrai de height o valor que coloquei em padding-top.Mas o titulo ainda esta 'grudado' no limite a esquerda da imagem. Preciso usar padding aqui? Nao. Basta acrescentar text-indent:.sidebar h2{width: 320px;height: 35px;font-size: 17px;color: #777e95;font-family: Tahoma;background: url(http://3.bp.blogspot.com/_YGpl3rQPSzI/TPPq5PUdiBI/AAAAAAAAQ-I/hrx4kFtnQG4/s1600/side.png) no-repeat;padding-top: 15px;text-indent: 10px;}resultado:Agora eu quero usar um icone diferente para cada titulo da sidebar. Como expliquei aqui, procure o id de cada widget que acrescentou na sidebar. No meu caso, sao:Anote as ID's e acrescente la no CSS:#CustomSearch1 h2{background: #ccc url(http://2.bp.blogspot.com/_YGpl3rQPSzI/TPPjWZXr1wI/AAAAAAAAQ9g/5Qkq22EfRUQ/s1600/Find+Search_32.png) no-repeat 280px 10px;-moz-border-radius: 5px;border-radius: 5px;}Veja que ja nao vale mais o background que coloquei em .sidebar h2. O que fiz aqui foi colocar uma cor de fundo e o icone posicionado, 10px de distancia do topo do espaco ocupado pelo titulo e 280px de distancia da esquerda, alem de uma borda arredondada de 5px (codigo em vermelho):Faca o mesmo para cada widget da sidebar e em cada um coloque uma imagem e cor diferente:#CustomSearch1 h2{background: #DAF2FE url(http://2.bp.blogspot.com/_YGpl3rQPSzI/TPPjWZXr1wI/AAAAAAAAQ9g/5Qkq22EfRUQ/s1600/Find+Search_32.png) no-repeat 280px 10px;-moz-border-radius: 5px;border-radius: 5px; }#Profile1 h2{background: #E3FDB3 url(http://1.bp.blogspot.com/_YGpl3rQPSzI/TPPjxoHvnII/AAAAAAAAQ9k/7oDcQSHmh4A/s1600/Buddy+Chat_32.png) no-repeat 280px 10px;-moz-border-radius: 5px;border-radius: 5px;}#Label1 h2{background: #FCF1B4 url(http://2.bp.blogspot.com/_YGpl3rQPSzI/TPPj1QzXk3I/AAAAAAAAQ9w/kgBQ1cSLbeo/s1600/Tag_32.png) no-repeat 280px 10px;-moz-border-radius: 5px;border-radius: 5px;}resultado:Invertendo a posicao do icone:#CustomSearch1 h2{background: #DAF2FE url(http://2.bp.blogspot.com/_YGpl3rQPSzI/TPPjWZXr1wI/AAAAAAAAQ9g/5Qkq22EfRUQ/s1600/Find+Search_32.png) no-repeat 4px 10px;text-indent: 36px;-moz-border-radius: 5px;border-radius: 5px; }Para completar, veja este tutorial no blog Vagabundia, que ensina como usar span para dar estilos diferentes para um mesmo titulo.CREDITOS: Template Novo Blogger Mais um duro dia de trabalhos! A montagem de Maria Gomes foi contemplada pelo Projeto Ademar Guerra, da Secretaria de Estado da Cultura, para receber orientacao artistica durante o ano de 2013, por ter como foco a pesquisa da linguagem teatral como forma de aperfeicoar o trabalho artistico e de grupo no municipio de Suzano. Alem disso, se tornou parceira da Secretaria