Main Wrapper - Desmembrando

Hoje vou continuar o post anterior sobre a área de postagem.
Você já sabe como modificar a área total, não é? Agora vai aprender a modificar elemento por elemento (data, título etc).
Só que como já tem um post (Variáveis CSS) explicando os elementos, vou só dizer a que cada trecho se refere e dar umas dicas de modificação, ok? Assim fica um post limpo e menos extenso.
Vamos lá!

Esse trecho é o que iremos conhecer hoje:

/* Posts
-----------------------------------------------
*/
h2.date-header {
margin:1.5em 0 .5em;
background: black;
}

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}

.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}

.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:$titlecolor;
font-weight:normal;
}

.post h3 strong, .post h3 a:hover {
color:$textcolor;
}

.post p {
margin:0 0 .75em;
line-height:1.6em;
}

.post-footer {
margin: .75em 0;
color:$sidebarcolor;
text-transform:uppercase;
letter-spacing:.1em;
font: $postfooterfont;
line-height: 1.4em;
}

.comment-link {
margin-$startSide:.6em;
}

.post img {
padding:4px;
border:1px solid $bordercolor;
}
.post blockquote {
margin:1em 20px;
}

.post blockquote p {
margin:.75em 0;
}

Percebeu que cada pedaço está com uma cor? Isso é para ajudar você a visualizar o que é o que, observe bem e agora vamos ver melhor cada pedaço.

Clique na imagem para ampliar

DATA
Vamos começar pela data que é o primeiro trecho:

h2.date-header {
margin:1.5em 0 .5em;
}

Lembre-se que esse é o trecho original do Mínima do Blogger. Você pode adicionar qualquer um dos elementos indicados nesse post.

DICA:

Alinhando a data: Você pode usar text-align, e deixar a data a direita, esquerda ou central.

Para saber como fazer isso, e procure pelo elemento que quer adicionar.



POST

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}

Aqui é toda a área do post exceto a data, na imagem outras cores estão sobre ela, mas se você não definir outra cores ficará apenas a que por ai, como na imagem abaixo:

Clique na imagem para ampliar

DICA

Espaçamento entre as linhas: Um recurso bem simples, mas que faz muita diferença na hora de se ler um post é o line-height. É esse 'propriedade' que define o espaço entre as linhas, você pode por com porcentagem (Ex. line-height: 120%), com px ou em. Experimente mudar os números, você vai ver como é útil.


TÍTULO DO POST, TÍTULO COM LINK

Agora veremos o título do post, perceba que aqui não se trata simplesmente do título, mas também dele como link ativo, visitado e hover (com o mouse em cima).

.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}

.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:$titlecolor;
font-weight:normal;
}

.post h3 strong, .post h3 a:hover {
color:$textcolor;
}

Em vermelho temos o título normal, sem links nada.

Em azul temos o título com link ativo.

Em verde o link já visitado.

Em laranja com o mouse em cima.

Perceba que como link ativo e o visitado estão juntos, então toda modificação que fizer em um, automaticamente será feita no outro.


LINK DOS COMENTÁRIOS

.comment-link {
margin-$startSide:.6em;
}

Esse são os links do comentário e de Links para esta postagem no rodapé do post.



IMAGENS DO POST

.post img {
padding:4px;
border:1px solid $bordercolor;
}

Você já percebeu como as imagens postadas costumam aparecer com uma borda, como se fosse uma moldura? Esse trecho é que define isso.
Padding é o espaço entre a borda e a imagem.

DICA

Criando molduras: Se você adicionar um fundo (background) e modificar a borda pode conseguir efeitos bem interessantes, como esse:

Clique na imagem para ampliar

Para conseguir esse efeito modifiquei o código assim:

.post img {
background: #000000;
padding:4px;
border:2px dashed #ffffff;
}

Mesmo se você modificar apenas esses 3 elementos, você já consegue efeitos muito interessantes. É só ser criativo, aproveite!

PARÁGRAFO DO POST

O parágrafo no código html é representado por <p></p>, e para modificá-lo no css o trecho é esse:

.post p {
margin:0 0 .75em;
line-height:1.6em;
}

DICA

Adicionando recuo de texto: Nesse trecho é interessante adicionar um recuo, como quando escrevemos a mão e deixamos aquele espaço a cada parágrafo, sabe?
Se você colocar um recuo em seus post vai perceber que eles ficam mais limpos. Para isso use a propriedade text-indent com medidas comuns (px, cm, em etc). Observe a imagem:

Para dar esse efeito usei o text-indent com 30px:

.post p {
margin:0 0 .75em;
line-height:1.6em;
text-indent: 30px;
}

ATENÇÃO: Lembre-se que esse efeito só acontecerá nos trechos do blog que estiverem entre <p></p>.


PARÁGRAFO, BLOCKQUOTE

.post blockquote {
margin:1em 20px;

}
.post blockquote p {
margin:.75em 0;

}

Esse trecho já tem um post próprio. Clique para ver.


RODAPÉ

Essa parte eu acho interessante, pois quando modificado dá um efeito bem legal, como você pode observar abaixo:

Clique na imagem para ampliar

Esse pedaço trata-se desse trecho:

.post-footer {
margin: .75em 0;
color:$sidebarcolor;
text-transform:uppercase;
letter-spacing:.1em;
font: $postfooterfont;
line-height: 1.4em;
}

Dicas: Para dar esse efeito de 'moldura' coloque a borda com a cor do fundo do post, e não do rodapé.
Se a sua área de postagem é branca, e seu rodapé cinza, coloque a borda da cor branca, assim:

Para conseguir esse trecho fiz assim:

.post-footer {
background: gray;
border: 2px dashed white;
padding: 10px;
margin: .75em 0;
color:$sidebarcolor;
text-transform:uppercase;
letter-spacing:.1em;
font: $postfooterfont;
line-height: 1.4em;
}

É isso gente, a área de postagem foi desmembrada e você já sabe do que se trata cada trecho, agora é só usar a criativadade e deixar seu blog ainda mais personalizado.
Lembrando que o post de Variáveis CSS mostra o que pode ser modificado!

Até a próxima e dúvidas, já sabem, comentários.

[EDIT]

DICA: Crie molduras para seus posts! Confira como nesse link!

[/EDIT]

Menu CSS - Imagem (III)

Conseguiu colocar o menu no seu blog? Personalizou os links? Deu tudo certo até agora, mas você quer mudar a cor do menu?
Esse é um passo um pouco mais trabalhoso, mas relaxe que não tem nada de muito complicado, não! Vamos lá!

Se ainda não fez o download de imagem, é hora de fazer! AQUI!

Perceba que a imagem é tem duas, uma em cima e outra embaixo, sendo que a primeira se trata do menu normal e a debaixo do menu selecionado. Preste atenção nisso na hora de mudar de cor, ok?

ATENÇÃO: Para visualizar as imagens de exemplo clique nelas!

1º Passo

Abra com o Photoshop a imagem do seu menu (a imagem maior, tabrightF.gif). Ela estará em .gif, o que nos impede de mexer com ela. Então, é preciso que você a selecione e copie para um arquivo novo.
Para selecioná-la aperte M no teclado e clique com o botão direito em cima da imagem, coloque em Selecionar Todas (a primeira opção). Aperte Ctrl + C.
Abra uma nova imagem e aperte Ctrl + V.

2º Passo

Agora vamos criar uma nova camada de ajuste. Então, embaixo da janela de camadas procure pela 4ª opção (um círculo preto e branco), nela procure por “Cor Seletiva” (2º opção da 3º parte) como mostra a imagem. E vá mexendo nas opções até encontrar a cor que você quer.

3º Passo

Para chegar a cor da imagem eu mexi em NEUTRO (0; 0; +100; +49), como mostra a imagem.

Atenção: Não esqueça de marcar o campo Visualizar ali do lado direito da janela, ou você não verá o que está fazendo! :)

4º Passo

Conseguiu chegar a cor que queria? Então você precisa salvar essa nova camada de ajuste para carregá-la na outra imagem. Se fechou a janela de cor seletiva, clique duas vezes no círculo preto e branco ao lado da camada de ajuste.
Não achou o botão salvar, olhe na imagem:

Atenção para onde está salvando o arquivo, daqui a pouco usaremos ele!

5º Passo

Até aqui tudo bem? Vamos alterar a outra imagem (tableftF.gif), a fininha. Lembre-se que ela está em .gif, logo teremos que refazer o primeiro passo.
Já está com imagem pronta, então repita o 2º passo (criar uma nova camada de ajuste de cor seletiva) só que agora, ao invés de você mexer nos botões vai apenas carregar as definições que salvou. Uma imagem para ajudar:

6º Passo

Pronto, é isso! Agora salve a imagem, de preferência como .gif, porque preservará a transparência e você pode por o menu em qualquer fundo.
Depois é só upar a imagem e substituir nos links do menu. No outro tópico já coloquei isso, mas vou por de novo para ficar mais fácil, ok?

COLOCANDO AS IMAGENS NO MENU

Procure esse trecho do código e coloque a url no lugar indicado.

#menu a {
float:left;
background:url(COLOQUE AQUI O
MENU FINO) no-repeat left top;
margin:0;
padding:0 0 0
4px;
text-decoration:none;
}
#menu a span
{
float:left;
display:block;
background:url(COLOQUE
AQUI O MENU MAIOR) no-repeat right top;
padding:5px 15px 4px
6px;
color:#FFFFFF;
}

E é isso, tomara que você tenha conseguido! Até a próxima!