Fazendo meu Layout - Parte 2

Hoje vamos para a segunda parte da série Fazendo meu Layout.

Hoje vamos aprender a personalizar a sidebar, que é a coluna lateral do blog.

A sidebar pode ser personalizada de diferentes formas. Vou ensinar vários modos de personalização. Veja:

• Cor no fundo da sidebar
• Gadgets separados em caixas
•  Imagem nos títulos
• Título em caixinha

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:

/* Widgets

Logo abaixo dele vai estar assim:

.sidebar .widget {
  border-bottom: 2px solid $(widget.border.bevel.color);
  padding-bottom: 10px;
  margin: 10px 0;
}

Substitua todo esse código por esse:

.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 */
}

Para escolher outras cores de fundo consulte essa tabela: clique aqui.

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.

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 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: url(URL DA IMAGEM) no-repeat center;
height: 30px;/*Altura da imagem*/
width: 200px; /*Largura da imagem*/
text-align: center; /*Alinhamento do texto*/
} 

Faça as modificações necessárias. Quando estiver tudo certo, salve o modelo.

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.

Se você perdeu a primeira parte dos posts clique aqui.

No próximo post da série vamos aprender a colocar imagem no cabeçalho do blog.