13/12/2012

Novo template + Como fazer themes para o tumblr Part.01 - criando as principais áreas


http://data.whicdn.com/images/45954173/tumblr_mexf6ukAFC1rza53xo1_500_large.jpg 
To com milhares de ideias pro blog, e agora já não tenho provas e trabalhos da escola. É! Mas a preguiça anda me consumindo de forma absurda. É algo meio complicado de se livrar.

Mas, em meio a toda a preguiça que me roei, fiz esse template pro blogger, que é o meu primeiro de muitos. Quem já viu o meu tumblr sabe o que quero dizer. E gostaria de saber o que acharam ;) Eai, ficou legal ?
Queria falar rapidinho do menu! Mapa = arquivos de postagens do maio97. Cont. = meios para entrar em contato comigo.Créd. = área destinada aos créditos por tutoriais e tal, que me ajudaram a fazer esse template atual.Vitrine = minha vitrine de themes, que será atualizada até o fim de semanada.
Andei, também, fazendo alguns themes novos para o meu tumblr, e achei que seria legal fazer um post sobre o assunto, já que adoro fazer themes para o tumblr (msm não sendo todos expetaculares).  Mas, vou logo avisando que o tuto sera grande, e por isso, dividido em algumas partes que ainda não sei definir em números (talvez umas 7 partes). Vou tentar ser o mais clara possível, para que vocês entendam bem o MEU modo de fazer themes.
Então vamos lá ?  


O tumblr tem um html bem simples, que nos possibilita milhares de estilos diferentes, e sem regras rígidas. Realidade bem diferente do blogger, com seu html, ainda, muito complexo pra mim.
Para fazer themes, vamos utilizar o bloco de notas,e para começar, vamos entender o super-mega-básico de um documento html:

 
Lembre-se que no html você não coloca /* Legenda */ antes ou depois de uma tag.
Explicando:
 Tudo que estiver entre as tags < html > e < / html > é o conteúdo do nosso html.
 Entre as tags < head > e < / head > colocamos o título que aparece na aba do navegador, o favicon, scripts e etc.
< title > < / title > são as tags usadas para o título na aba do navegador.
 { T i t l e } é uma tag de título automático do tumblr. Onde você pode mudar o título através do seu painel (primeira coisa que aparece quando você vai nos customize do tumblr).
 CSS; é a aparência do nosso theme.
 Conteudo do theme; é onde vamos aplicas as IDs ou CLASS do nosso css.
Abra o bloco de notas e monte a estrutura da primeira imagem, sem as legendas. Tudo bem até aqui?

---- Criando a área geral do theme
 Agora, substitua CSS por:
  1.                            /* Área Geral da pagina */
  2.                            #content { .... }
 Explicando:
 /*  Área Geral da pagina */ é o título que eu dei para entendermos, e encontrarmos melhor o pedaço referente ao content. Você sempre pode por títulos assim no CSS.
#content é o nome da nossa ID que vai representar a área geral. Por que é ID ? No css o que começa com # é ID e o que começa com . é CLASS.
{ .... } é o lugar onde vamos definir as propriedades da nossa pagina.

O que a área geral tem que ter? Logicamente: tamanho.
E o que representa tamanho no html? width.
 Então vamos substituir os ...... dentro das chaves por width: VALORpx;
 Devemos substituir VALOR pelo tamanho que queremos a nossa página onde ficara o theme. Tem que ser um valor alto. Eu recomendo uns 900px, pois não fica pequeno e nem grande demais (muito grande faz aparecer aquela barra de rolagem horizontal).
 Outro ponto importante é definirmos uma margem entre nossa área geral e os lados da pagina. Para não ficar tudo grudado.
 Para isso vamos utilizar o margin: VALORpx;
 Então o nosso #content vai ficar assim:
  1.  #content {width: 900px; margin-top: 0px; margin-right: auto; margin-bottom: 50px; margin-left: auto;}
 Explicando:
 margin significa margem. E aqui eu defini espaços mais detalhados em determinados pontos, repare:
    margin-top se refere a margem entre nossa área geral e o topo. O valor é 0px, pois vamos definir outros espaços para top em outras áreas.
    margin-right é a margem entre o lado direito, e aqui o valor é auto, que quer dizer automático. O mesmo para margin-left que é a margem da esquerda.
    margin-bottom é a margem do final da pagina, e aqui é 50px para não ficar grudada com o rodapé do seu navegador.
Para entender melhor essas margens:
Lembrando que o content não é cinza realmente, eu só coloquei cor pra vocês entenderem melhor.
Lembra que eu falei sobre dividir o content? Então, é o nosso próximo passo.

-- Área da sidebar e das postagens
 Vamos pensar o seguinte: estamos criando áreas para sidebar e postagens para definirmos melhor o espaço de cada propriedade no theme. E se o nosso content tem 900px temos que dividi-lo por dois. Então é 450px para cada área, néh Juhh?! NÃO.
 Pense bem! A sidebar é geralmente menor que a os posts, então podemos utilizar esse espaço que sobraria para deixar os posts maiores. Vocês poderão tentar milhares de valores, mais eu começo recomendando: 300px para a sidebar e 570px para os posts. Sendo assim, abaixo do código do content vamos adicionar:
  1.       /* Área da sidebar */
  2.       #sidebar {....}
  3.      /* Área das postagens */
  4.      #postagens {....}
Onde vamos substituir {....} da sidebar por:
  1.    width: 300px;
 E dos posts por:
  1.     width: 570px;

 Mas porque os posts tem um tamanho de 570px? Porque assim vai sobrar 30px, que serão como um espaço sobrando na área postagens.
É apenas isso que tem as duas novas áreas? NÃO. Lembra que cada uma vai ter uma lado? Então, para definir lados usamos float.
Para ajudar, escolha pensando em que lado você quer a sidebar. E então adicione na área da sidebar o seguinte:
                   float: right; (direita) ou float: left; (esquerda)
 E os posts? Não tem float? Bem, nesse tuto não, mas em outra ocasiões sim. Falarei mais depois.
Agora vamos definir o espaço entre a sidebar e o lado escolhido, que vai servir também para os posts. Adicione em ambas as propriedade:
 left: VALORpx; (se vc escolheu o float:left) ou right: VALORpx; (se vc escolheu float:right)
 E vamos substituir o valor pensando que: os posts sempre terão um valor alto, e a sidebar um valor menor.
Eu recomendo: 120px para sidebar, e 562px para os posts, independente do lado escolhido. Já no próximo passo, vocês poderão testar outros valores.

Lembra que eu falei que no content o top era 0px porque íamos definir em outras áreas. Então, na área da sidebar e dos posts adicione:
  1. margin-top: auto;
Por que auto? É um exemplo, que depois vocês poderão ir mudando.

Outra coisa importante de se adiconar é o position que vai definir se a área desce junto com a barra rolante ou se fica parada. Mas preste atenção! Nos posts o position sempre será absolute (parado) pois assim podemos ver os posts de baixo. E na sidebar podemos usar fixed (se move junto) ou absolute.
Então na área dos posts coloque:
            postion: absolute;
E na sidebar coloque:
  1. postion: TIPO; 
Então nosso CSS de hoje ficou assim:

    1.  /* Área Geral */
    2. #content {width: 900px; margin-top: 0px; margin-right: auto; margin-bottom: 50px; margin-left: auto;}
    3. /* Área da sidebar */
    4. #sidebar {width:300px; text-align: justify; float: right; position: fixed; margin-top: auto; right:120px;}
    5.  /* Área das postagens */
    6. #postagens {margin-top: auto; right: 450px; width:570px; position: absolute;}

      Júhh!! O que é text-align: justify;? Text-align defini o alinhamento do texto dentro da área. Justify  força o texto a ocupar toda a extensão da linha da esquerda a direita.
      Bem pessoal, é isso. Na verdade nesse primeiro passo, não temos um resultado "visível" mas no próximo sim. É que pra não ficar muito longo decidi dividir o CSS em duas partes.

      2 comentários:

      1. Omg, que bom que gostou do famenine place, pois também me apaixonei pelo seu blog!! Ele é lindo e tem ótima postagens, aposto que vem muito sucesso pela frente *-*
        Gostei muito do tutorial, beijão :)

        ResponderExcluir

      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.