MT: Criando um template #2


Lollipop!! Trouxe a segunda parte da Maratona de Tutoriais #1 de Como criar um template!
Na "aula" passada nós personalizamos a "cara" do template. 
Coisas como o theme base, cor da barra lateral... Nessa "aula" vamos começar a modificar a aparencia do theme. Começando pelo background, retirado a borda do template Travel e personalizando os links.
Vamos lá?


Pra começar temos que abrir o HTML. 
É nele que nós vamos mexer, na maioria das vezes. 
Para começar a aula de hoje, procure por: /* Content
Abaixo dele, vai estar algo assim:

body {
  font: $(body.font);
  color: $(body.text.color);
  background: $(body.background);
}
Aonde está escrito background: $(body.background); Você vai substituir por:

 background: url("http://static.tumblr.com/0xqvkot/beymbsgy6/121.png");

No código está com o background que estou usando no theme. Você pode mudar se quiser.
Aqui tem alguns e aqui tem um tutorial de como usar 2 backgrounds.

Agora vamos retirar aquela borda feia?


Procure por: .content-outer .content-cap-top {
Vai estar assim:

.content-outer .content-cap-top {
  height: $(content.imageBorder.top.space);
  background: transparent $(content.imageBorder.top) repeat-x scroll top center;
}
.content-outer {
  margin: 0 auto;
  padding-top: $(content.margin);
}
.content-inner {
  background: $(content.background);
  background-position: left -$(content.imageBorder.top.space);
  background-color: $(content.background.color);
  padding: $(content.padding);
}
Apague todas as partes em vermelho. Visualize. Se tiver sumido, salve.


Hora de personalizar os links!
Essa parte é bem fácil. Isso parece simples, mas ajuda muito na boa aparência do template.
Procure por: a:link {

Vai estar assim:

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);
}
Cole no lugar desse código esse outro aqui:


a:link {
  text-decoration:none;
  color: #c279e7;
}
a:visited {
  text-decoration:none;
  color: #000;
}
a:hover {
  text-decoration:none;
  color: #e14562;
Modifique as partes em negrito, ao seu gosto. 

Agora, vamos personalizar o link da sidebar.
Procure por: .sidebar .widget a:link {
Vai encontrá-lo assim:

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

Se quiser que ele fique igual ao da sidebar, apague.
Se apanas quiser tirar a borda do hover.
Troque "underline" por "none". Agora se quiser modificá-lo cole o seguinte código no lugar dele.

.sidebar .widget a:link {
  color: #cor_aqui;
  text-decoration: none;
}
.sidebar .widget a:visited {
  color: #cor_aqui;
}
.sidebar .widget a:hover {
  color: #cor_aqui;
  text-decoration: none;
}

 Por hoje é só. 
Amanhã nós vamos aprender a a retirar o: Assinar: Postagens (Atom) e personalizaremos sidebar e postagens do blog.



7 comentários:

  1. Estou acompanhado , por que meus layouts são tipo , uma bosta ! Só servem para base ! E gosto de mexer com códigos e HTML , me sinto uma técnica em informatica ! (só me sinto) .

    Obrigada pelo Layout , espero poder retribuir , pode pedir qualquer coisa que estiver ao meu alcance !

    http://semprefuiestranha.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Ana , tive uma ideia para te agradecer ! Vamos fazer uma parceira e fazer um sorteio , primeiro lugar ganha um premio que eu escolhe e comprar e um template seu e o segundo um template meu. Coisa simples para ajudar nos seus números de seguidores , aceita ?

      Me adicione no Facebook :
      https://www.facebook.com/laura.love.adam.levine
      Ou no Hotmail :
      lauriatreis729@hotmail.com

      Para agente combinar melhor !

      Kissus !

      Excluir
    2. Ok. Boa ideia. Obrigada ^^
      É o tempo, daqui a pouco melhora.

      Excluir
  2. Seguindo,pode me seguii
    te ajudo com sua meta e vc me ajuda com minha meta ? Ok
    obg ~~

    ResponderExcluir
    Respostas
    1. Só sigo se me segue, mas vou ajudar dessa vez.

      Excluir