Cor no fundo da sidebar
Para colocar uma cor como plano de fundo da sidebar é bem fácil.
Vá no painel do blog clique em "Modelo" Personalizar
Na aba "Avançado", clique em "Plano de fundo da barra lateral" e mude a cor do plano de fundo. Deixe a cor da moldura transparente.
Gadgets separados em caixas
Para separar os gadgets em caixinhas, assim como é a sidebar aqui do blog, o processo muda.
A cor usada no modo acima deverá ser ambas transparentes. Feito isso, clique em "Aplicar ao blog".
No painel do blog, clique em "Modelo", depois em "Editar HTML".
Marque a opção "Expandir modelos de widgets". Depois aperte no seu teclado Ctrl+F ou F3.
Pesquise por:
/* WidgetsLogo abaixo dele vai estar assim:
sidebar .widget {Substitua todo esse código por esse:
border-bottom: 2px solid $(widget.border.bevel.color);
padding-bottom: 10px;
margin: 10px 0;
}
.sidebar .widget {
margin: 0px 0px 15px 0px; /* margem entre uma caixa e outra */
background: #FFFFFF; /* cor de fundo das caixas */
padding:10px; /* espaço entre o texto e as margens */
border-radius: 10px; /* arredondamento dos cantos das caixas */
text-align: justify; /* alinhamento justificado do texto */
-webkit-box-shadow: 0 0 1em #c9c9c9; /* sombra nas caixas, apague esse trecho se não quiser sombra */
}A parte em vermelho é a cor. Para mudar a cor visite esse site.
Visualize, se estiver tudo certinho, salve o modelo.
Imagem nos títulos
Vamos agora aprender a colocar uma imagem no fundo do título, assim como eu uso aqui no blog.
Tenha sempre suas imagens hospedadas em algum site.
Pesquise por:
h2 {Substitua por:
font: $(widget.title.font);
color: $(widget.title.text.color);
}
.sidebar h2 {Faça as modificações necessárias. Quando estiver tudo certo, salve o modelo.
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: url(URL DA IMAGEM) no-repeat center;
height: 30px;/*Altura da imagem*/
width: 200px; /*Largura da imagem*/
text-align: center; /*Alinhamento do texto*/
}
Título em caixinha
Vai ficar mais ou menos assim:
No painel do blog, clique em "Modelo", depois em "Editar HTML".
Marque a opção "Expandir modelos de widgets". Depois aperte no seu teclado Ctrl+F ou F3.
Pesquise por:h2 {
font: $(widget.title.font);
color: $(widget.title.text.color);
}
Substitua por:
.sidebar .widget h2 {
padding-bottom: .5em;
font-family: 'Arial', sans-serif;
text-transform: uppercase;
background: #B0C4DE;
margin-top: -20px;
margin-left: 6px;
height: 12px;
width: 150px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
Entenda
Uppercase quer dizer que todas as letras do título ficarão maiúsculas. Em background coloque a cor de fundo da caixinha que fica o título.
Feito as alterações necessárias, visualize e salve o modelo.
Não coloquei uma imagem de como ficou o meu porque são diversos modos. Depende do que você vai usar.