TTutorial tirado do blog:(www.isjackiezzdream.blogspot.com.b)
coloquei no lugar do Background-color(ou seja a cor do fundo COLOQUE A URL DA
IMAGEM QUE VOCÊ QUIZER) e o espaço dos comentários.
Substitua todo o código acima por este:
.post-footer {
border-top:1px dotted #000000;
background-image:url('URL DA SUA IMAGEM AQUI'); background-repeat:no-repeat; font-family: 'Cookie', cursive;
font-size: 16px;
letter-spacing:1px;
margin:0.73em 0;
padding:5px 8px;
text-transform:none;
}
.post-footer a{
color:#FF1493;
text-decoration:;
font-weight: ;
background-color: #FFFF00;
}
.post-footer a:hover{
color:#FFFF00;
text-decoration:none;
background-color:#FF1493;
}
.comment-link {
margin-left:17px;
magin-top:500px;
color: #ccc;
background-color: #FFFF00;
}
<link href='http://fonts.googleapis.com/css?family=Cookie' rel='stylesheet' type='text/css'/>
(só
pra que usa o google chrome, baby) Pra acertar as medidas vá na área
que fica o rodapé do seu template e aperte o Button direito do mouse e
selecione a opção ''inspecionar elemento''
coloquei no lugar do Background-color(ou seja a cor do fundo COLOQUE A URL DA
IMAGEM QUE VOCÊ QUIZER) e o espaço dos comentários.
Vá no seu HTML (use ctrl + f pra facilitar a busca) e procure por:
.post-footer {
Se você nunca tiver mexido nessa área do template ele irá aparecer acompanhado pelo seguinte código:
.post-footer {
margin: .5em 0;
line-height: 1.6;
}
Substitua todo o código acima por este:
.post-footer {
border-top:1px dotted #000000;
background-image:url('URL DA SUA IMAGEM AQUI'); background-repeat:no-repeat; font-family: 'Cookie', cursive;
font-size: 16px;
letter-spacing:1px;
margin:0.73em 0;
padding:5px 8px;
text-transform:none;
}
.post-footer a{
color:#FF1493;
text-decoration:;
font-weight: ;
background-color: #FFFF00;
}
.post-footer a:hover{
color:#FFFF00;
text-decoration:none;
background-color:#FF1493;
}
.comment-link {
margin-left:17px;
magin-top:500px;
color: #ccc;
background-color: #FFFF00;
}
Pra fonte funcionar corretamente primeiro você precisa instalar ela no template entenda mais lendo este post (www).
Instalando a fonte!
Cole o código abaixo acima de: </head>
<link href='http://fonts.googleapis.com/css?family=Cookie' rel='stylesheet' type='text/css'/>
Personalizando a imagem de fundo!
Agora você só precisa criar uma imagem que fique no fundo, assim como eu fiz, exemplo:
Agora que você sabe a medida certa é só criar uma imagem e colar a url dela no local indicado de vermelho (não apague os tracinhos do lado) : background-image:url('URL DA SUA IMAGEM AQUI');
Visualize se estiver tudo certo salve ;D
Nenhum comentário:
Postar um comentário