Photobucket

25 de fev. de 2008

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]


4 Comments:

jaime said...

obrigado pela visita. quanto ao link ele está na barra lateral direita do blog bem lá embaixo já com o código link me.

Kika Honeycutt said...

Rô essa dica sobre o recuo nos posts era o que eu precisava para os looongos textos da minha história. Super útil! Valeu mesmo!

Ah estou te linkei nos meus blogs, ok?
Bjos.

Rô Rezende said...

Jaime:Achei, moço. Obrigada pelo link.

Kika Honeycutt: Oi, moça...fico muito feliz de ser útil, a intenção dos post é essa.
E muito obrigada pelo link!

Bjos

Fábio Saraiva Teles said...

Olá!
No blog da minha esposa não estou conseguindo fazer a aparecer o "Postado por"...
Já fui nas configurações no Blogspot e marquei para que fosse exibido, mas não funciona....
Existe algum código específico que possa ser incluído no template para que esse dado seja exibido corretamente?