Bordas no conteúdo da Área dos Posts

Nesta série de tutoriais vou mostrar como colocar bordas no conteúdo do Main-Wrapper do Blogger. Neste primeiro artigo trabalharemos com bordas na Área dos Posts.


No main-wrapper temos:

* A área dos posts: a data do post, o título do post, o corpo do post e o rodapé do post;
* Os comentários: o título dos comentários, o bloco de comentários, autor dos comentários, corpo dos comentários e o rodapé dos comentários;
* O formulário de comentários: título da mensagem do formulário, mensagem do formulário de comentários e o iframe do formulário.


Temos ainda os backlinks, a navegação (blog-pager e status-message) e os feed-links.

Fiz essa relação acima dos ítens que estão no Main-Wrapper pois, só conhecendo onde se localiza cada pedaço de seu template, é que você aprende a colocar os estilos.

Antes de seguir, veja os outros artigos sobre bordas onde mostro como colocar estilos, grossura e cor: bordas em colunas e bordas em textos.

Para variar um pouco, em vez do Template Mínima, vamos usar o Template Scribe como modelo.

Algumas explicações sobre CSS e HTML no Blogger são necessárias: em CSS, os comandos são em cascata (Cascading Style Sheets). Isso significa o seguinte: o estilo que estiver descrito mais ao fim da folha de estilos é o que está valendo. Especificando a class você assegura que aquele estilo será aplicado apenas à classe escolhida (as class na folha de estilos são precedidas de um ponto . ). Todos os elementos da área de postagens estão no código do Blogger como class.

Quem está iniciando no Blogger às vezes tem dificuldade em localizar onde colocar estilos para cada área do post. Vou tentar explicar em uma figura:



Veja na figura que a data do post está fora do bloco branco, que é a área do post. Quando colocamos bordas na área do post, a data fica como nessa figura - fora da borda. Para incluir a data dentro das bordas, você precisa mexer no código e mudar a data de lugar (veja como colocar elementos na linha abaixo do título do post)
Área dos posts
A área dos posts envolve o título, o corpo do post e o rodapé do post. No código do template essa class está descrita da seguinte maneira:

Há algumas pequenas variações entre um template e outro, mas em geral são bastante semelhantes.

Vamos colocar a borda na folha de estilos para a class do post, que é identificada como: .post.



.post {
margin-top:8px;
margin-$endSide:0;
margin-bottom:24px;
margin-$startSide:0;
border: 5px double #000000;
}


Data do Post
A data do post nos templates originais do Blogger pertence à uma class de título h2. Está identificada no código da seguinte maneira:

O título h2 também é relativo ao título da Sidebar. Alguns templates tem um espaço para "Headings", onde estão estilos para o h2. Se você alterar esses estilos, a data do post e o título da Sidebar serão alterados.

Como iremos aplicar o estilo para a class h2.date-header , somente a data do post receberá a borda.



h2.date-header {
border: 2px ridge #612e00;
padding:2px;
}


Para que a borda fique apenas no contorno da data e não em toda a linha, estipulamos uma largura (você precisa testar a largura dependendo do formato de data que for usar)



h2.date-header {
width: 290px;
border: 2px ridge #612e00;
padding:5px;
}


Título do Post
O título do post é uma class de título h3 e está identificado no código de forma semelhante à seguinte:

Na CSS o título aparece como .post h3 ou variações (.post-title, .post-title h3, etc). Como o título do post é um link, você pode encontrar também na CSS os estilos para o link (exemplo:.post h3 a), para o link visitado (.post h3 a:visited) e para o link com o mouse-sobre (.post h3 a:hover). Neste nosso exercício, como queremos o estilo (borda) para o título e não para o link, aplicaremos ao .post h3:



.post h3 {
font-weight:normal;
font-size:140%;
color:$postTitleColor;
margin:0;
padding: 3px 3px 0 3px;
border: 4px groove #cc0000;
}


Corpo do Post
Você pode identificar a class do corpo do post no código do template por uma linha parecida com a seguinte:

Na folha de estilos essa class aparece como .post-body. Alguns templates porém (e é o caso do nosso template-modelo, o Scribe), mostram O PARÁGRAFO do corpo do post e não o bloco do post-body: .post-body p. Quando não temos a class na folha de estilos, precisamos cria-la.



.post-body {
border: 5px outset #238E23;
padding: 6px;
}
.post-body p {
line-height:1.5em;
margin-top:0;
margin-$endSide:0;
margin-bottom:.6em;
margin-$startSide:0;
}


Rodapé do Post
Finalizando, temos o rodapé do post, class que está identificada no código como: