14/12/2012

Como fazer themes para o tumblr, part 02 - Personalizando

Img1521286325_large
 Oi, tudo bem ?! Prontos para segunda parte do tutorial ?! Pra quem não acompanhou, não entendeu, ou nem fez o tuto anterior, esse aqui não vai ter a menor utilidade, então >> { Tuto anterior }
---- Aparência primaria
Aqui vamos colocar background e fonte personalizada.
No nosso css, vamos adicionar:

  1. body { ... }

Lembra da tag < b o d y >? O local que vai ficar o corpo do nosso theme? Então, esse body {...} se refere a aparência do corpo do nosso theme. E juh, não tem que ter # ou . antes da palavra body?
Nesse caso não, a menos que fosse < div  class = " b o d y "> ou < div id = " b o d y " >, pois quando não é CLASS e nem ID no css, você refere-se a um outro tipo de seletor (tag): < s e l e t o r>. 
 Eu não costumo utilizar esse esquema no tumblr, mas isso depende de cada um. Com o tempo, vocês decidiram qual é melhor para vocês.
 Mas, voltando ao assunto, o que eu disse que body ia personalizar mesmo? O background e a fonte do nosso < b o d y >. Então, substitua os pontos dentro das chaves por:
  1. background: #COR url(' '); font: TAMANHOpx FAMILIA; color: #COR;
Explicando:
background se refere ao nosso fundo, que pode ser cor solida ou uma imagem. Recomendo que mesmo que você use uma imagem como background, escolha também uma cor de fundo, pois até a imagens carregar o fundo não ficara preto. Coloque o link da imagem entre as aspas  dentro dos ( ).
    Tabela de cores >> aqui. / Backgrounds >> aqui
font se refere a fonte geral do nosso theme.
TAMANHO é o tamanho da fonte, mas já deixo avisado que no customize do tumblr os tamanhos mudam um pouco. Por isso você devera checar após salvar o theme.
FAMILIA é o tipo de fonte. Para escolher o tipo de fonte, basta trocar FAMILIA pelo nome da fonte. Exemplo: Ariel.
color se refere a cor da fonte. Substitua #COR pela cor escolhida.
Para você entenderem melhor, eu substui tudo que citei acima, vejam: /* Não copie. Use o citado acima e procure entender */
  • body {background: #F0E6DD url(' '); font: 12px Ariel; color: #452F1F;}
 Aqui, coloquei um fundo meio bege, fonte Ariel como nom exemplo de FAMILIA, tamanho 12px que é um padrão, e color é um marrom bem escuro. Os ('') do backgrouns estão vazios porque não estou usando imagem no background.
 Agora vamos criar as caixas onde vai ficar a sidebar e os posts.

----  Caixa da sidebar e das postagens

Adicione no CSS:
  1. /* Caixa sidebar */
  2. .caixasidebar {....}

  3. /* Caixa Postagens */
  4. .caixaposts {....}
  As caixas vão ser praticamente iguais. Substitua (em ambas as caixas) os pontos dentro das { } por:
  1.   background: #FFF; padding: 5px; margin-bottom: VALORpx;
Explicando:
  Lembra do fundo do body? Então, pra nossa caixa não ficar transparente vamos colocar um fundo aqui também. Coloquei #FFF (branco) por ser mais padrão, mas vocês podem variar.
  padding seria o aprofundamento da caixa. Pra não ficar grudado.
  Lembra de margin-bottom? O espaço entre a margem final com a pagina?
  Na caixa de postagens o margin-bottom vai dizer qual o espaço em px que uma caixa tem que ter da outra. Caso você queira  os posts "juntos" então coloque o margin-bottom em 0px. Na caixa da sidebar, o margin-bottom vai ter a mesma finalidade, separar uma caixa da outra, caso você use mais de uma caixa na sidebar. 

Lembra que definimos o espaço entre ambas as áreas e o float escolhido? left: VALORpx; ou right: VALORpx; ? Faremos o mesmo aqui. Lembre-se do seu float escolhido e então coloque dentro das chaves de ambas as caixas que estamos criando agora:
  1.  left: VALORpx; ou right: VALORpx;
  Eu recomendo uns 10px para a sidebar, e os posts com 100px a mais. Exemplo: 20px para a sidebar, então 220px para os posts.
  Agora, o CSS das caixas ficou assim:
  1. /* Caixa sidebar */
  2. .caixasidebar {background: #FFF; padding: 5px; margin-bottom: VALORpx; LADO: VALORpx;}

  3. /* Caixa Postagens */
  4. .caixaposts {background: #FFF; padding: 5px; margin-bottom: VALORpx; LADO: VALORpx}
Onde LADO refere-se ao float, que acabei de explicar aqui em cima.
 ------ Fazendo as aplicações no < b o d y >;
  No tuto anterior o nosso body estava assim:
   ATENÇÃO!!! NÃO COLOQUE /* EXPLICAÇÃO NO HTML, só coloquei aqui pra vocês saberem especificamente o que vai abrir e fechar.
 Viram a organização? Tudo o que criamos até agora foi utilizado.
 A área geral foi aberta, e dentro dela colocamos a divisão, que é a área da sidebar e a área dos posts. E dentro dessas áreas foi colocada a caixa especifica. E dentro dessa caixa especifica o espaço para o conteúdo especifico.
 Troquei tuto que citei nesses dois tutoriais, e o resultado foi esse.

Aqui o float é right. Mas tanto faz.

 Então, tudo bem até aqui ?! Nosso theme esta quase PRONTO.  No próximo passo (03) vamos colocar as tags do tumblr, e então o theme ja vai estar funcionando.
 Bjsus e até logo ;) Qualquer dúvida deixe um comentário.

  

Nenhum comentário:

Postar um comentário

Criticas e sugestões são sempre bem-vindas ;)
Se gostou de algo, comente, e compartilhe. ;))

 
Tecnologia Blogger e templante desenvolvido por Juliana Sousa. Proibida cópia ou reprodução. Confira os créditos.