DIY: Layout para blog (parte 3)

#main-wrapper {
width:600px;
height: auto;
background-color:transparent;
float: right;
padding-bottom: 10px;
margin-top: -170px;
margin-right: 85px;
color:#333333;
font-family:Arial,Helvetica,sans-serif, Verdana, Tahoma;
font-size:12px;
}

Em vermelho: Este é o tamanho da sua área de post. Assim como fizemos para descobrir a da sidebar, faça aqui para descobrir a do post. O tamanho que der você coloca aí. Lembrando que você pode alterar caso fique maior ou menor.

Em laranja: Caso seu post esteja ao lado direito da página, deixe como está. Se estiver no esquerdo, troque o right por left.

Em azul: Aqui é a margem interna inferior. Coloque o número que achar melhor.

Em roxo: Neste item você vai configurar a posição superior do post. Vá mexendo nos números até ele ficar certinho na “altura” da página, em cima da área que marcamos para ser a das postagens.

Em rosa: Esta é a margem direita da área dos posts. Se sua área de postagem está à direita, só troque o número. Se estiver na esquerda, altere o número e o right por left.

Em dourado: Aqui você vai modificar a cor dos textos no post. Aconselho a deixar como está ou trocar por #000000 (preto).

Em verde: Este é o item onde você escolhe a fonte do post. Indico Verdana, Arial ou Tahoma que são as mais “comuns”.

Em azul: Aqui você configura o tamanho da fonte. Indico deixar entre 10 e 12, assim não fica tão pequena nem tão grande.

.post {
margin:.5em 0 .5em;
padding-bottom:.5em;
}

Em vermelho: Aqui você vai mudar as margens do post. Indico deixar como está.

Em laranja: Neste item você altera a margem inferior interna do post.

.post p, .post-body {
line-height:1.7em;
font-family: Arial,Helvetica,sans-serif;
text-align: justify;
font-size: 12px;
}

Em vermelho: Neste item você muda o espaçamento entre as linhas do post. Pode deixar como está, se quiser.

Em laranja: Trocar a fonte do texto do post.

Em azul: Aqui você troca o alinhamento do post. Você tem quatro opções: justify (justificado), right (à direita), left (à esquerda) e center (centralizado).

Em roxo: Tamanho da fonte no post.

#main-wrapper .post-body a {
color:#7b5342;
text-decoration:none;font-weight: bold;
}

Em vermelho: Cor do link nos posts.

Em azul: Se deixar essa opção, o link ficará em negrito. Se quiser tirar, basta apagar essa linha.

#main-wrapper .post-body a:visited {
color:#7b5342;
text-decoration:none;
font-weight: bold;
}

Em vermelho: Cor do link no post quando já foi visitado.

Em azul: Se deixar essa opção, o link ficará em negrito. Se quiser tirar, basta apagar essa linha.

#main-wrapper .post-body a:hover {
color:#333333;
text-decoration:none;
font-weight: bold;
}

Em vermelho: Cor do link quando o mouse passa por cima.

Em laranja: Se deixar essa opção, o link ficará em negrito. Se quiser tirar, basta apagar essa linha.

#main .post h3 {
color:#c3937e;
font-family:’Cookie’, cursive;
font-size:40px;
margin-top: 50px;
text-align:left;
text-decoration:none;
width:600px;
}

Em vermelho: Cor do título do post quando está na página da postagem e não na principal do blog.

Em laranja: Fonte do título do post quando está na página da postagem e não na principal do blog.

Em azul: Tamanho do título do post quando está na página da postagem e não na principal do blog.

Em roxo: Margem superior do título do post quando está na página da postagem e não na principal do blog.

Em rosa: Alinhamento do título do post quando está na página da postagem e não na principal do blog. Pode ser trocado por right (direita), center (centralizado), justify (justificado) ou deixar como está, left (esquerda).

Em dourado: Tamanho do espaço do título do post quando está na página da postagem e não na principal do blog.

#main .post h3 a, .post h3 a:visited, .post h3 strong {
color:#c3937e;
display:block;
font-family:’Cookie’, cursive;
font-size:40px;
border-bottom: 1px dotted #cecece;
margin-top:50px;
text-align:left;text-decoration:none;
width:600px;}

Aqui nós vamos mudar o estilo do título do post quando está na principal, ou seja, quando está “linkado”. Conselho a deixar os mesmos valores/cores do item anterior para os itens que já estão aqui. Ou seja, se colocou tamanho 40px na fonte de lá, coloque aqui também. Por isso só vou explicar aqueles que não estão no anterior e que vocês “podem” mudar, ok?

Em vermelho: Cor do título do post linkado.

Em roxo: Borda inferior do título do post linkado. Podem trocar o dotted por solid, se quiserem.

Em rosa: Margem superior do título do post na inicial.

#main .post h3 strong, #main .post h3 a:hover {
color:#deaa94;
text-decoration:none;
}