Tuner Create

Assine o Feed

Modificando modelo do Post - Tutorial Completo

Mauricio




Vou ensinar como editar o modelo do post ( Topo, meio, rodapé, titulo, autor, etc. ).


Esses códigos, eu coloquei ele no template Minima, talvez em outros templates não funcionem, então faça antes um backup do seu template.
São vários códigos para editar completamente o modelo do seu post


Antes de tudo procure por .post { ou .post h2 { quando achar veja em baixo do código uma tag } então cole esses códigos todos em baixo dessa tag.


  • Colocando Imagem no topo do post:
Modifique somente o imagemtopopost.png pelo link da sua imagem.
.topo-post
background:url(imagemtopopost.png) no-repeat;
height:70px; /* Altura ----- */
}

  • Modificando algumas coisas do Título do post:
Agora para modificar algumas coisa do título do post, cole esse código:
.titulo-post
color:#FFFFFF; /* Cor da letra ---- */
font-size: 18px; /* Tamanho da letra --------- */
}

  • Modificando algumas coisas do Autor do post:
Cole este código:
.entry-meta {
font-size:15px; /* Tamanho da fonte do nome do autor. -------- */
color:#FFFFFF; /* Cor da letra ------ */
}
  • Modificando o link de comentários:
Cole este código:
.coments-rodape {
font-size:15px;
font-weight:bold; /* Negrito ------ */
text color:#FF0000;
}
Se não funcionar substitua .coments-rodape por .coments-topo

  • Modificando o link do marcador (ex: postado no marcador: filmes ):
Cole este código:
.categoria-topo {
font-size:15px;
font-weight:bold;
}
Se não funcionar substitua .categoria-topo por .categoria-rodape
  • Modificando o rodapé do post:
Cole este código:
.rodape-post {
background:url(link-da-imagem-aqui) no-repeat;
height:70px;  /* Altura ------ */
}
  • Modificando o corpo do post:
Cole este código:
.post-body {
background:url(link-da-imagem) repeat-y;
/* Deixa o resto do código que ja está lá nesse lugar,
mas se ja tiver esse código acima tire o que já tem e cole esse.----*/
  • Modifique MAIS :
Você também pode adicionar mais códigos para ajustar a imagem ou o texto, como:
padding-left:10px; 
padding-right:10px; 
padding-top:10px; 
padding-bottom:10px; 
margin-right:10px; 
margin-left:10px;
margin-top:10px; 
margin-bottom:10px; 
font size: 10px;
text size: 10px;
background:url(imagem);
background:#códigodacor

Ai é só colocar ele no lugar que você quiser (ex: .titulo-post) antes de fechar a tag }, e editar os VALORES de acordo com sua preferência.


É isso ai galera até mais ! Qualquer dúvida comente.

Créditos: BnetDesign
Seja o primeiro a comentar!

0 comentários:

Postar um comentário

Assinar: Postar comentários (Atom)