Criando um layout #2: Mudanças Básicas

Olá pessoal! Espero que tenham conseguido fazer a primeira parte do tutorial. Dividir o tuto é bem mais fácil, pois dá mais tempo para vocês tentarem. Mas enfim, vamos continuar com nosso layout? Não vamos nos apressar muito, no entanto, vamos trocar os links de navegação. Se não souber o que é isso, eu vou explicar: São aqueles links/nomes "Postagens mais antigas", "Início" e "Postagens mais recentes". Eu vou ensinar como substituí-los por imagens. Vá em modelo > Editar HTML > Se aparecer algum aviso, clique em prosseguir > Marque a opção "Expandir modelos de widgets.

Substituindo o link "Início"
Dê Ctrl+F e procure por: <data:homemsg>
Vão aparecer dois códigos, mas você só irá mexer no primeiro que aparecer. Substitui esse código por esse:
<img src="url_da_imagem" />

Substituindo o link "Postagens mais antigas"
Dê Ctrl+F e procure por: <data:olderpagetitle>
Também irão aparecer dois códigos, mas só mexa no primeiro. Substitua por esse:
<img src="url_da_imagem"/>

Substituindo o link "Postagens mais recentes"
Procure por: <data:newerpagetitle>
E substitua por:
<img src="url_da_imagem" />

Salve. Prontinho!  Vamos continuar? Agora vamos aplicar um estilo nos títulos da sidebar. Eu vou usar um do Cherry Bomb como base. Eu apenas modifiquei a cor do texto e do coraçãozinho mas se você quiser pode pegar o código original aqui.

<style>
/*Inicio Titulo dos gadgets*/
.sidebar h2 {
font-family: Georgia;
font-style: italic;
font-size: 15px;
font-weight: bold;
text-align: left;
color: #000000; /*Cor da fonte*/
background: url('http://img834.imageshack.us/img834/3098/miniheartcpia.png') no-repeat left top; /*imagem do topo*/
padding-left: 12px;
margin-bottom: 5px;
/*Estilo para titulo dos gadgets por www.bombadecereja.tk Não retire os créditos*/}
</style>

Agora vamos personalizar o título dos posts. Eu vou deixar bem simples, mas se você quiser pode procurar outro tutorial bem mais caprichado, há váaarios na web. Eu apenas vou mudar a fonte. Eu vou usar a mesma fonte dos gadgets, que é Georgia + negrito + itálico. Como é uma fonte comum, vou mudar no designer do modelo. Bora lá?
Vá em modelo > personalizar > Avançado > Título da postagem > Seleciona a fonte "Georgia" e marque as opções "B" e "I", como mostra o print:

Vou deixar com a fonte preta mesmo, já que também é a cor do título dos gadgets. Mas você pode escolher a fonte que você quiser, e a cor também. Agora eu vou acrescentar sobra no post. Vamos?
Para colocar sombra nos posts, procure por .main-inner .column-center-outer {
E logo abaixo, cole:

 box-shadow: 1px 3px 15px 2px #dcdcdc;

 Prontinho, visualize, se estiver tudo certo, salve.
Agora vamos personalizar uma parte muito importante de um layout: Os links. Eu vou usar um efeito fade bem legal, já que a paleta de cores do meu blog um tanto quanto diferenciada. So let's go?

- Créditos do tutorial ao Kawaii World / Cherry Bomb -

Vá em Modelo > Editar HTML > Dê ctrl+f e procure por a:link {

Você irá encontrar um código parecido com esse:

a:link {
text-decoration:none;
color: $(link.color);
}
a:visited {
text-decoration:none;
color: $(link.visited.color);
}
a:hover {
text-decoration:underline;
color: $(link.hover.color);
}

Apague tudo, e no lugar cole:

a:link {
color: #000000; /* Cor do link*/
text-decoration: none;
-webkit-transition: color 0.7s ease-out;-moz-transition:
color 0.7s ease-out;transition: color 0.7s ease-out;
}
a:visited {
color: #000000; /*Cor dos links visitados*/
text-decoration:none;
filter:alpha(opacity=100);
-moz-opacity: 1; -khtml-opacity: 1; opacity: 1;
}
a:hover {
color: #000000; /*Cor do link quando passa o mouse*/
text-decoration:none;
filter:alpha(opacity=100);
-moz-opacity: 1; -khtml-opacity: 1; opacity: 1;
}