Aprendendo a Editar um Layout: Parte 3

by - julho 21, 2013


Olá, acho que já disse antes e direi novamente, a primeira segunda parte foram simplesmente
o básico do básico para começarmos realmente a editar.

Bem, para essa fase, será necessário usar uma tabela de cores, faço da seguinte forma:
1-Escolho uma imagem para ser a base de cores do layout.
2- Extraio as cores dela usando o http://www.degraeve.com/color-palette/index.php
Recomendo que escolha a usa imagem e use o mesmo site.

Essa será minha tabela de cor!



Vamos começar com uma coisa simples, personalizar a data do blog, ela está assim:


Vá no HTML do seu blog, aperte CTRL+ F e procure por:

.main-inner h2.date-header {


Agora apaguem a parte abaixo disso até a chave. Ou seja, essa parte:

font: $(date.font);
  color: $(date.text.color);

Agora substitua por essa parte:

font: Tahoma;
color: #333;/*Cor da fonte, altere a seu favor*/
margin-left: -80px;/*Posicionamento, pode alterar*/
background: #aa4477;/*Plano de fundo,Altere a seu favor*/
float: left;/*Não altere*/
font-size: 11px;/*Tamanho da fonte*/
padding: 4px;/*Não altere*/
-webkit-border-radius: 5px;/*Borda arredondada, retire se quiser*/
-moz-border-radius: 5px;
border-radius: 5px;
}
.main-inner h2.date-header:hover {
background: #776688;/*Cor do fundo quando passa o mouse, altere se quiser*/

Altere o desejado e salve.


Agora vamos personalizar o background pelo HTML

Primeiro abra o html do seu blog:  Modelo>>Editar Html
Clique em alguma letra dele e aperte Ctrl+F (Para a nova versão do html do blogger, o F3 não funciona)
Procure por: body {
 Então você vai achar isso:

body {

  font: $(body.font);/* tipo e tamanho da fonte para o blog */
  color: $(body.text.color); /* cor do texto no blog*/
  background: $(body.background); /* plano de fundo */  
}


Então, apagamos a parte:
$(body.background)
Mas, deixe a virgula no final.

E cole no lugar do que você apagou:
url(URL_Da_Sua_Imagem)

Altere o url da sua imagem, eu usei essa:

Salve e visualize:


Viram, até agora, tudo bem facilzinho, vamos bem divagar.

Espero que esteja ajudando^^

You May Also Like

3 Comentários

  1. *O* Queee legal que ficou ! Bem organizado e com cores ótimas !

    No meu próximo lay é claaaaaaaaaaaaaaaaaaaaaaro que vou utilizar esse site que tu recomendou !!! EU NECESSITO O.O , sou péssima em organizar as cores no blooog !

    Tutorial ótimo !!!!!!!!!!!!!!!!!!!!!! *OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO* SABE EXPLICAR MUITO BEM !

    Bjoooooooooos pra tyyyyy ! Se kissus chegarem aí voando são meeeeeus que te mandei *W*WW**W*WW**WW*W*W*

    ResponderExcluir
    Respostas
    1. Muito obrigada, eu também sou péssima com as cores quando não uso imagem como base e.e'

      Fico feliz por ter gostado, hihi*----*

      ~~kissus *3*
      *----------*

      Excluir
  2. d+, super fofinho, adorei!!

    ResponderExcluir

Muito obrigada por seu comentário e por sua presença!
Ambos são super importantes para mim.

Kaomojis:
(*´∀`*) (*≧∀≦*) (=´∀`)人(´∀`=) ( ・ ▽ ・)
ヾ(*^▽^*)o, 。・゚゚・(>_<)・゚゚・。 (>ω<;)*(´∀`)ノノ*
(。ゝω・)~♡ ヘ(´∀`ヘ)ヘ (╯°□°)╯•ᴥ• (´・ω・`)