Passo-a-passo: como criar um tema para Tumblr – parte 1

Tutoriais e dicas

Esta é a primeira parte de um tutorial que vai tentar explicar detalhadamente como criar um tema para o Tumblr. A ideia é passar os fundamentos para quem não entende de HTML, por isso ele é bem maior do que seria se eu apenas fosse explicar as bases do templates desta rede social. Lembrando que eu não sou muito boa em explicar essas coisas, mas espero conseguir ajudar alguém. E que ler os tutoriais sem ir fazendo os passos só gera confusão! Tem que ir testando pra conseguir entender.

Para escrever este post, usei como referência o Tutorial de customização do próprio Tumblr e a página do w3schools. Se você sabe um pouco de inglês, visite esses sites e aprenda muito mais do que eu posso pensar em ensinar aqui! :)

Você precisa saber que…

O Tumblr tem uma espécie de manual próprio, com todas as variáveis disponíveis para criação do seu tema.

Eles também disponibilizam uma página de upload onde você pode hospedar imagens, CSS e javascripts que vai usar. Estes arquivos não poderão ser alterados ou deletados (se precisar fazer uma nova versão, terá que upar de novo). Se você for criar um tema para disponibilizar para uso público no Theme Garden, todos os arquivos externos precisam estar hospedados aí. Ah, é proibido fazer upload de arquivos que não tenham a finalidade de serem usados em temas.

Como editar um tema

Sempre que vou criar um tema, seja para Tumblr ou WordPress, a primeira coisa que eu faço é montar o modelo no Photoshop. No caso do Tumblr, monto apenas a ideia base e vou adaptando para cada tipo de post durante a programação do layout. A base do theme que vamos criar hoje é essa daqui:

Obviamente você vai precisar de um Tumblr. Prefiro criar os temas em um Tumblr de testes, assim posso salvar as alterações que for fazendo sem me preocupar que alguém visite e veja tudo bagunçado.

Para editar o HTML do seu tema, siga esses passos:

É nessa caixa azul que é aberta na customização de HTML que você vai editar o seu theme. Sempre que quiser visualizar o resultado de uma alteração feita, clique no botão verde “Update Preview“. Depois de clicar nele, aparecerá o botão “Save” que permitirá salvar as mudanças – lembre-se de ir salvando pra não correr o risco de perder tudo, hein!

Variáveis e blocos

A estrutura do seu template será escrita em HTML e o estilo dele em CSS. No entanto, para definir o “conteúdo de verdade”, você usará as variáveis do Tumblr. Através delas, os dados gerados pelo próprio sistema serão inseridos no seu tema. As variáveis do Tumblr começam e terminam sempre com chaves, e não funcionam em outros sistemas de blogagem. Exemplo:

O <title> significa, em HTML, algo como início do texto que a ser usado como título da página e </title> significa fim do texto. É o nome da página que aparece na aba do seu navegador. Você poderia escrever entre elas o nome do seu blog, mas se alterasse ele em algum momento ou se distribuísse esse código, ele permaneceria sempre o mesmo.

Portanto, a variável {Title} vai sempre inserir o nome atualizado do seu Tumblr, que é definido na página de customização. Os blocos começam e terminam com chaves e possuem o nome “block”. Eles servem para apresentar um bloco HTML ou definir condições. Exemplo:

Entre {block:Posts} e {/block:Posts} será definido o conteúdo que deve aparecer nos posts. Ou seja, não entra aí o “que deve acontecer” no cabeçalho, em uma página ou na barra lateral, etc. Apenas o que está dentro dos posts. A ideia é próxima ao loop do WordPress.

Na criação do theme, você vai precisar definir separadamente as características de cada tipo de post disponibilizado pelo Tumblr (texto, foto, set de fotos, áudio, vídeo, chat, link, citação – aqueles que você escolhe na página principal, lembra?) e para isso vai usar os blocos correspondentes a cada um deles.

No caso, {block:Text} {/block:Text} define “o que acontece com os” Posts de Texto. O {block:HasTags} {/block:HasTags} exemplifica uma condição: se o post tem tags… Como está ali, o bloco define o que acontece sempre que um post (não importa de qual tipo) tiver tags. Se ele estivesse dentro do bloco de Texto, seria especificado apenas o que aconteceria se o post de Texto tivesse tags.

É confuso, mas você precisa entender direitinho isso, afinal, são usadas diversas combinação de blocos e muitas de variáveis para criar um tema.

Começando um tema do zero

Apague todo o conteúdo que está na caixa de HTML e coloque esse abaixo:

Essa é a base que você usa para criar um documento em HTML5. Se você pré-visualizar as alterações agora tudo que vai ver será uma tela em branco.

DOCTYPE declara o tipo de documento. No caso, HTML. Entre <html> e </html> estará todo o conteúdo em si. O <head> e </head> engloba as informações como título, scripts, folhas de estilo e meta datas, que servem para descrições do documento (essa já presente no exemplo acima vai garantir que os caracteres como aqueles com acentos não fiquem desconfigurados na página). Entre <body> e </body> estará todo o conteúdo visível do site.

Head

Você apagou todo o conteúdo e colocou aquele ali em cima, certo? Vamos começar a incluir as variáveis básicas do tema. Primeiramente, editaremos o conteúdo dentre <head> e </head>, começando pelo o título da página:

Agora, definiremos a descrição do blog, que será lido pelo navegador e pelos sistema de buscas:

O bloco define que usaremos a descrição do blog. E {MetaDescription} é a variável para a versão segura de descrição, que inclui apenas texto.

O próximo passo é adicionar o Favicon, que é o ícone que representa seu site na aba do navegador (aquela asinha no caso aqui do blog), e o url do seu Feed RSS, que poderá ser assinado pelos seus visitantes.

Abra e feche a tag <style>, que é onde você determinará o estilo do seu blog. É aí dentro que você vai definir como vai ser a aparência do conteúdo visível da página.

Inicialmente, temos apenas a variável {CustomCSS} que permite inserir o código CSS pelo menu de customização do seu Tumblr. A pessoa não vai precisar editar o tema para adicionar o código por aí, mas vai precisar ter conhecimento de CSS.

Agora seu head deve estar assim:

Dando uma cara a seu Tumblr

Enfim, vamos começar a editar o conteúdo que você vai poder perceber no seu preview. A primeira coisa que vamos fazer é definir o fundo e a fonte que usaremos. Coloque logo acima de {CustomCSS}:

Em background, #f2f2f2 é o código hexadecimal da cor do fundo. Para descobrir o código de uma cor, você pode usar o conta-gotas no Photoshop para escolher a cor em uma imagem, depois clicar duas vezes na cor no menu direito e copiar o código (ou deixe o conta-gotas pra lá e crie sua própria cor).

O endereço dentro de url é a imagem upada através daquela página que citei no começo. O color define a cor padrão dos textos das páginas. No caso, #6f6f6f foi a cor que usei no meu arquivo do Photoshop. Margin está dizendo que não queremos nenhuma margem ao redor da nossa página.

Em fonte, escolhi o tamanho dela (14px) e a família (Arial; se não tiver Arial no computador, Helvetica; se não houver Helvetica, qualquer fonte sem serifa). Com esse código, você deve usar fontes que todos os sistemas tem por padrão, para que não haja o risco da pessoa não ter a fonte instalada e visualizar o seu tema desconfiguradamente. Mas, veja, no tema que criei no PS, escolhi uma fonte mais bonitinha. Ela faz parte do Google Web Fonts. Para usá-la, vou adicionar o código que eles disponibilizam:

Adiciono esse link no meu head e já posso usar a fonte Abel. O head fica assim:

Você pode possibilitar que o usuário faça upload de imagens (ex.: título, background) e mude cores e fontes através do painel de customização, sem uso do HTML. Mas vou deixar pra explicar isso em outra parte do tutorial pra não confundir demais a cabeça de vocês.

Da mesma forma que escolhemos as cores e as características padrão para o texto, vamos escolher uma para os links. Lembre-se que você vai poder determinar características específicas para cada área depois, mas é interessante que defina o padrão primeiro.

O a define as características de todos os links (não visitados, visitados, ativos e hover). Nesse caso, text-decoration está dizendo que não queremos nenhuma “decoração” nos links. Assim, ele não será sublinhado. Color define a cor deles.

O a:hover está dizendo que quando o mouse estiver por cima do link, ele deve mudar a cor dele para essa escolhida. Observe que o a sozinho já definia uma cor para o a:hover, mas, em CSS, existe uma ordem em que a característica que você define por último é a que será considerada. Por exemplo, se colocássemos a linha a novamente e mudássemos a característica dos links, ela que valeria.

O a img está tirando as bordas de todas as imagens que servirem como link. Seu html deve estar assim:

As divs

Agora iremos começar a colocar conteúdo visível na página. Para isso, você precisa entender o que é uma div. Imagine uma div como uma caixa que vai rodear o conteúdo que você inserir nela. Cada uma receberá classes e identificações diferentes. Com isso, você poderá definir as posições de cada div e as características dos elementos dentro dela, de forma a compor o seu layout.

A base desse tema que estamos construindo será definido em quatro divs. Vou colocar um texto dentro de cada uma delas apenas para esclarecer como funciona. Cole entre <body> e </body>:

Id é a identificação da div. Você pode nomeá-las como quiser, vou usar estes nomes que são os mais comuns e assim você vai se situar melhor se um dia for editar um tema do Theme Garden. Cada id garante que você defina características para essas divs.

Para você visualizar melhor o que são as divs, vou usar algumas cores aleatórias como background de cada um delas. Dentro do style e vou colar:

Perceba que antes do nome de uma id sempre aparece o caractere #.

Se você visualizasse o conteúdo no Tumblr agora, veria algo assim:

Vamos deixar essas cores aí por enquanto.

A #wrapper é a div que engloba todas essas outras. Vou até meu arquivo do Photoshop para ver qua a largura do conteúdo da minha página (área dos posts + barra lateral).

Para conferir larguras e alturas, faça uma seleção em retângulo no Photoshop. Em seguida, pressione F8 para ver a caixa de Info. Ela marca a altura e largura da seleção. A informação precisa estar em pixels; como essa não é a medida padrão dessa ferramenta, você precisa mudar as configurações no painel de opções da caixa.

Assim:

A largura é 760px. Margin está definindo que deve existir 0 pixels de margem em cima (ou seja, não deve existir margem), 0 pixels em baixo e que ela deve ser automática do lado direito e do lado esquerdo. Isso vai garantir que a #wrapper flutue no centro da página.

Uma margem é definida da seguinte forma: margin-top; margin-right; margin-bottom e margin-left. Você pode definir um por um esses elementos ou agrupadamente. Se escrevêssemos “margin: 1px 2px 3px 4px” definiríamos um valor para um daqueles que citamos respectivamente (imagine desenhar um losango começando da ponta de cima para lembrar a ordem: em cima, direita, em baixo, esquerda).  No caso de repetições, você pode “resumir” o código como foi feito aqui. 

Depois de conferir o tamanho das outras divs, tenho o seguinte:

Float:left e Float:right definem que as divs devem flutuar à esquerda e à direita da página. Como elas estão dentro da #wrapper, flutuarão apenas no limite dela. Se não houvesse essa div, elas ficariam nos cantos da tela.

O float precisa ser “desligado” para não influenciar as divs seguintes. Adicione a seguinte linha depois da div sidebar:

O resultado dessas edições está aí embaixo. Note que o vermelho da wrapper apareceu porque o tamanho das divs que estão flutuando não é o total dela. Está tudo ok.

Cabeçalho

Nossas divs estão posicionadas. É hora de começar a usar as variáveis do Tumblr. Vamos começar com o título da página. A variável é a mesma que usamos no <head>, mas vamos incluí-la dentro do <h1> – com ele estamos dizendo aos motores de busca que este é o cabeçalho principal do site.

Da forma que está aí, ele vai continuar aparecendo da mesma forma que o texto “Cabeçalho” estava na imagem anterior. Vamos deixar como no modelo do Photoshop:

Esse código define o estilo do “h1 que está dentro da id #header“. Como posso dar todos os parâmetros dentro dele, apaguei a linha #header e juntei as informações. Tirei aquele background rosa, adicionei a fonte que eu quero (no caso a Wire One do Google Web fonts), o tamanho da fonte e a cor dela. Como o h1 tem por padrão estar em negrito, definimos ele como “normal”. Agora o título terá 30 pixels de margem em cima e em baixo, e 13 pixels do lado esquerdo e do lado direito.

Preciso atualizar meu código do Google Web Fonts para incluir a Wire One:

Vou tirar o background do wrapper para visualizar melhor o resultado:

Barra lateral

Com o cabeçalho pronto, vamos pular para a barra lateral. Começamos com nosso avatar e com a descrição:

<img /> é o código para exibir uma imagem. Em src="" deve estar a url dela. {PortraitURL-128} é a variável do Tumblr para incluir a url do seu avatar (a imagem que representa seu Tumblr na dashboard e em outros lugares) com o tamanho máximo, que é de 128px.

No entanto, minha barra lateral tem 200px de largura e eu quero que a imagem que apareça nela tenha o mesmo tamanho. Por isso, vou substituir o {PortraitURL-128} pelo endereço da imagem upada por mim.

Em seguida, vamos dar uma cara bonitinha a isso.

Tirei o background amarelo da sidebar.

A div #portrait recebe a sua altura, 200px. Isso vai tirar a margem que o Tumblr adiciona automaticamente abaixo da imagem.

Meu avatar tem uma borda arredondada no topo. Eu poderia ter feito esse efeito no Photoshop, mas preferi usar a imagem quadrada. Portanto, na linha seguinte, usei #portrait img para dizer “para imagens que estão dentro da div portrait“…  e coloquei aquele código para definir o tamanho desse efeito do lado esquerdo e do lado direito. (Se quiser facilitar seu trabalho, existe um gerador de código de borda arredondada! Lembrando que, para o Internet Explorer, essas bordas só funcionam depois da versão 9 do programa.)

Minha descrição agora tem fundo branco. E tem um espaçamento de 10px ao redor da div. Uso uma fonte um pouco menor. Com line-height defino a altura da linha (quanto maior, maior espaçamento entre linhas). Text-align: justify diz que meu parágrafo deve ter o alinhamento justificado. E adiciono as bordas arredondadas na parte de baixo.

Mas vamos dizer que você quer adicionar manualmente outro box na sidebar. O princípio é  o mesmo. Vou criar dois novo boxes para exemplo. Edite dentro da div sidebar:

H3 diz que estes são cabeçalho, de menor importância que o H1 – que já usamos – e o H2 – que vamos usar nos posts.

Crio uma div para cada conteúdo.
<p> é o início de um parágrafo e </p> é o fim do parágrafo. <br /> é uma quebra de linha.
<a href=""> é o código para um link. A url de destino fica dentro das aspas do href="". Quando usamos target="_blank" estamos dizendo que este link deve ser aberto em uma nova janela. O texto que fica antes da tag de fechamento </a> é o que ficará aparente para que você clique no link.
class também serve para definir as características do elemento. Funciona como o id. No entanto, usamos id para definir um elemento que só aparece uma vez na página. E class para elementos que se repetem. Podemos combinar id e class para gerar resultados melhores.

Customizando o style disso:

Usamos as mesmas tags anteriores. A única que aparece pela primeira vez é o text-transform, que está definindo que todos os caracteres devem estar em maiúsculo.

No CSS, antes do título de uma classe sempre aparece um . . Usei as mesmas características da descrição. Poderia colocar ela também dentro dessa classe, mas deixei separado para se posteriormente quiser criar uma diferenciação.

O .links p diz que os parágrafos dentro de .links não devem ter margens. No caso, usei para evitar um espaço que sobrava aí.

Nosso tema está assim:


Gigante, hein? Por enquanto é isso. Na segunda parte vou ensinar como colocar um menu de páginas na sidebar e vamos começar enfim a montar as estruturas dos posts.

Espero que alguém consiga entender essa explicação toda! hahah Se acharem erros ou tiverem dicas, é só comentar aí embaixo. Além disso, compartilhem e compartilhem!


Quer ser avisado quando a continuação desse post for publicada?



61 ideias sobre “Passo-a-passo: como criar um tema para Tumblr – parte 1

  1.  

    Perfeição,Emi!
    Tutorial incrível,estou sem palavras!
    Tenho certeza que vai ajudar muitas pessoas!
    Você poderia também fazer um de como criar um tema no wordpress,é apenas uma sugestão XD
    Beijos linda e continue arrasando como sempre!
    AMEI!

  2.  

    Ai, vou fazer um layout meu pro tumblr agora!! Todo personalizado. Adorei, Emi!!

    Posso sugerir uma coisa? Faz um post com as fontes que você usa? Acho todas lindas. *_*

    Beijo!

  3.  

    Emi, muitooo obrigado!

    Sempre leio suas postagens e sempre me ajudam…
    Tanto com as fotografias…
    E eu sempre gostei demais de criar lays para web… mas nunca entendi nada de “programação”
    ADORO seu site!
    Muito Obrigado!

  4.  

    Oi Iemai, Parabéns esse tutorial é simplesmente perfeito. Nossa consegui customisar o theme que eu uso graças a você que ensina aqui passo a passo, muito obrigada pela humildade em dividir o teu conhecimento, foi muito mais muito util pra mim, não vejo a hora de aprender o proximo passo!
    Beijos!

  5. Pingback: Linkagem para o fim de semana | Melhor Ângulo

  6.  

    Oi!! Adoro o seu site, estou direto aqui ele é lindo *—*
    sei um pouco de html/ css mais confundo tudo quando vou tentar mecher no tema do meu Tumblr
    adorei o seu tutorial muito bom….
    Estou esperando ansiosa pela segunda parte!!
    Vê se não demora tá!
    beijoooos
    Obrigada

  7.  

    Foi ótimo o seu tutorial, consegui fazer direitinho e adequar ao meu jeito.
    Tem como você fazer tutorial de como montar esboço no photoshop? Sou nova nisso kkk obg :)

  8.  

    oi fiz um tema parecido com o seu, mais quando entrei na tela principal para ve como ficava nao estava aparecendo as minhas postagens porque isso ?


    iemai

    Oi, Brenda! Nessa parte do tutorial ainda não ensinei a encaixar os posts, por isso aconteceu isso :((


    JINN

    Vai ensinar como encaixar os post, pois fiz um seguindo seu tutorial e nada de aparecer os posts…

  9.  

    Oi, Emi! Adorei o seu tutorial. Segui ele (fazendo minhas modificaçõezinhas pra finalidade que eu quero) e tá tudo muito bem explicado. Parabéns, obrigado pelo tuto e aguardo ansiosamente a segunda parte! :D

  10.  

    precisa creditar?


    Miyu

    Não né babaca, ela plagiou esse tutorial do XXX.blogspot.com.br, então não tem que creditar essa cadela.


    iemai

    Sério que esse é o jeito que você faz publicidade deste blog? Que triste pra você. :/


    iemai

    Para criar seu theme? Não precisa não!
    Se for reproduzir o tutorial, por favor. :)

  11.  

    Oi, minha querida. Achei o tutorial super interessante. Segui a risca e ficou o mesmo resultado, porém não aparece nenhuma postagem do meu Tumblr. Como faço para aparecer as mesmas?

  12.  

    Quandoo sai a parte 2? Esse tutorial ficou realmente muito bom, melhor do que todos os que encontrei pelo Google e seria muito interessante se você fizesse a próxima parte *-* Parabéns!

  13.  

    Bom eu entendi e fiz meu próprio theme, somente que é para uma fic e algo que eu n sei fazer é por comentário quando foi eu que criei você poderia me ajudar? ficaria grata

  14.  

    Adoreii o tutorial, perfeito!!
    No próximo poderia por favor ensinar, além do restante, a fazer links para redes sociais com as imagenzinhas delas e a fazer aparecer alguns post como twitter ou instagram no cantinho tbm! Obrigada!! No aguardo!

  15.  

    Olá =) óptimo tutorial =) Contudo tive um pequeno (grande problema para mim xD) as fotos não ficam todas juntas, ha espaços em branco como se faltasse fotos. se alguém me puder ajudar agradecia muitoooooo ..
    Obrigada :D

  16.  

    Se eu criar um header e menu personalizados no dreamweaver vai dar certo quando eu jogar no tumblr? Gostaria de algumas dicas ou tutorial quanto a isso. Bjus e obrigada

  17.  

    Eu sou muito burra, pq eu entendi porra nenhuma disso fiz até quando apareceu isso:
    Cabeçalho
    Principal
    Barra lateral

    dps li reli, li devo e nada….
    n quero esse maldito cabeçalho no meu tumblr… af

  18.  

    Gostei muito da organização do tutorial, parabéns.

    Desejo a parte 2 assim que estiver nas alturas de ter que finalizar o trabalho, mas por enquanto, apesar de eu saber que está tudo funcionando pela lógica do código, não consigo visualizar as edições no tumblr (espero que seja defeito do servidor deles e não da pecinha aqui atrás do PC hehe).

    Aproveitando o ensejo, gostaria de saber se além dos tutoriais para o HTML ficar decentemente organizado e entendível, pretendes fazer tutoriais de CSS específicos?

    Abraço e sucesso!

  19.  

    Oi Emi! Eu adorei seu tutorial e acabei descobrindo como colocar os posts na vontade de aprender. Meu theme está quase pronto, o único problema é que meus posts não ficam aparecendo ao lado da sidebar como deveriam e sim abaixo dela no lado direito, e todo o espaço onde ele ocuparia alinhado a sidebar fica vazio. Você pode me ajudar? Faz dias que estou tentando. Agradeço desde já. ><'

  20.  

    Emi, posta o resto depois de dois anos!!! Melhor tutorial da vida!!!!
    Nunca mexi com absolutamente nada de html e você fez as coisas ficarem realmente claras, simples! Pre-ci-so do resto!!! Hahaha show demais

  21.  

    Oi Emi!

    O tutorial está ótimo, um dos melhores que já vi! Você pretende fazer a continuação dele?

    Grande beijo e parabéns pelo trabalho!

  22.  

    perdi um tempo do cacete pra fazer isso e no final não tem continuação nenhuma!!!
    e desse jeito só da pra fazer um theme igual ao seu, ficou impossível fazer um igual ao que eu tinha pronto no photoshop

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">