Tutorial de como fazer themes do zero - Tumblr

Download PDF
74 downloads 110 Views 394KB Size Report
Comment
Bem, eu desativei meu tumblr, já decidi, então eu gostaria de ensinar isso para vocês ... lugar onde fica os códigos do appearance, do título, do favicon e de diversos scripts, e o style ... Background Attachment é se o background é fixo ou não.
Feito por Mikaela Mascarenhas (http://consolar.tumblr.com/). Bem, eu desativei meu tumblr, já decidi, então eu gostaria de ensinar isso para vocês, muita gente tem curiosidade de aprender, sempre me pedem, enfim, vou ensinar como fazer. Aprender a fazer themes é a regra dos C. Chato, Cansativo e Complicado. Mas você aprende, só precisa de prática. Eu aprendi todo este tutorial sozinha, sem ajuda de ninguém, então você também aprende né? Bem, vamos começar. No theme de HTML, existem as tags principais. Sem ela, nada tem sentido no theme. São elas: 

  

Todas as tags devem ter um final. Por exemplo, termina em , assim como as outras. É essencial para o funcionamento delas. Entre e fica TODOS os códigos, pois sinaliza que ali o HTML do theme começa, e ali no final termina. Todo theme deve começar com e terminar com . A tag assim como ela mesmo diz, é a “cabeça” do theme. Aí é o lugar onde fica os códigos do appearance, do título, do favicon e de diversos scripts, e o style. Tudo que está entre e é o CSS do theme. É aí que define a aparência, os links, as cores, as posições, os enfeites… Basicamente tudo! A tag é onde é aplicado tudo o que você escolheu no CSS. Mas como assim? Em breve você vai entender. Tudo o que você posicionou no css, toda a aparência que você escolheu no css vai ser aplicada aí para aparecer no seu theme. É o corpo da sua página.

Pronto, agora vamos começar a fazer o theme. Paciência. Para uma melhor resolução do theme em qualquer navegador, sugiro este código no começo do theme, e logo em seguida, o código do favicon e do título. Abra o seu customize, de preferência o classic (http://www.tumblr.com/customizeclassic/), e comece colando este código: (http://static.tumblr.com/pjp1ppe/u49lyqrvm/themes_sem_base_consolar_1.txt). Na boa, não tira meus créditos daí. Esses códigos à seguir são respectivamente a cabeça do theme, o código do título a parecer na aba do navegador, o favicon (imagem que aparece do lado do título na aba do navegador), o RSS e o código da description a ser mudada no Info. Jamais pense em mudar nada.

{Title} {block:Description} {/block:Description} Lembrando que, logo abaixo desse código aí deve ficar as opções do appearance, as chamadas default variables, que vou ensinar depois. Ok, depois de ter colado aquele código, vamos começar o , que o vamos substituir por , que é melhor. Eu sempre começo o style com as coisas básicas do theme, como background, cores, fontes… À principio, vou ensinar sem as opções do appearance, depois eu ensino como colocar. body {background-color: #COR DO BACKGROUND; color: #COR DAS LETRAS; font-family: FONTE DO THEME; font-size: TAMANHO DA LETRApx; text-align: ALINHAMENTO DO TEXTO; background-image:url('LINK DO BACKGROUND'); background-repeat: SE O BACKGROUND REPETE SIM OU NÃO; backgroundattachment: FIXO OU NÃO;} Vou explicar: Todas as cores do HTML devem ser por exemplo assim: #000000, que é preto, #FFFFFF que é branco… Você pode descobrir o código da cor que você quer (aqui).        

O background-color é a cor de fundo do theme. O color é a cor da fonte, é a cor das letras. A font-family é a fonte usada nas letras. Ex: Tahoma, Georgia, Verdana… Font-size é o tamanho da letra, em pixels. Costumo usar 10px. Text-Align é o alinhamento do texto (center = centro, right = direita, left = esquerda, justify = justificado) Background-image é caso você queira um bg ou um pattern no fundo, você coloca o link. Background repeat é se o background repete ou não. Para repetir = background-repeat: repeat; para não repetir = background-repeat: norepeat; Background Attachment é se o background é fixo ou não. Para ficar fixo colocar fixed; para não ficar coloque absolute;

“Mas como eu descubro o link do meu background? Eu tenho ele no meu computador, mas não sei o link dele…” Entra nesse site e hospeda. Agora vamos aos links, que você deve colocar o código logo em seguida: a, a:link, a:active, a:visited {color: #COR DOS LINKS; textdecoration: none} a:hover {color: #COR DOS LINKS AO PASSAR O MOUSE; text-decoration: none}

Toda vez que aparecer hover no seu theme, saiba que é ao passar o mouse. Troque #COR DOS LINKS pela cor dos links (óbvio), e a #COR DOS LINKS AO PASSAR O MOUSE pela cor dos links ao passar o mouse (óbvio também). Depois dos links, é o riscado, sublinhado, negrito e o itálico, cole e modifique este código: s {color: #COR DO RISCADO;} i {color: #COR DO ITÁLICO;} b, strong {color: #COR DO NEGRITO;} u, span.sublinha {color: #000; text-decoration: none; border-bottom: 1px solid #COR DO SUBLINHADO;} Mas como assim cor do riscado? Ahn? É o seguinte, quando você riscar um texto PALAVRA você pode deixar ela de outra cor, assim como os outros. Para escrever qualquer palavra riscada coloque: PALAVRA , em itálico PALAVRA , em negrito PALAVRA e sublinhado coloque PALAVRA . E agora cole o seguinte código, que é o do blockquote: blockquote{margin:2px 5px 2px 5px; padding: 1px 0 3px 6px; borderleft: 2px solid #COR DO BLOCKQUOTE} Depois do blockquote, vamos aos títulos do theme! Cole este código abaixo do blockquote: h1 {text-align: center; font: 20px FONTE USADA; color: #COR DA FONTE;} Agora vamos a barra de rolagem personalizada! Fala sério, ninguém gosta daquela barra de rolagem feia e normal. Modifique ela, e cole o código depois do h1. ::-webkit-scrollbar{width:5px;height:8px;} ::-webkit-scrollbar-button:start:decrement ::-webkit-scrollbarbutton:end:increment{display:block;height:0;backgroundcolor:transparent;} ::-webkit-scrollbar-track-piece{background-color: #FFFFFF;-webkitborder-radius:0;-webkit-border-bottom-right-radius:3px;-webkit-borderbottom-left-radius:3px;} ::-webkit-scrollbar-thumb:vertical{height:50px; background-color: #COR DA BARRA DE ROLAGEM;-webkit-border-radius:px;} ::-webkit-scrollbar-thumb:horizontal{width:50px; background-color: #COR DA BARRA DE ROLAGEM;-webkit-border-radius:px;} Agora que você colou o código da barra de rolagem personalizada, vamos a parte mais complicada e chata: As DIV’s: DIV ID E DIV CLASS. Mas o que são elas? As DIV ID normalmente são usadas para definir as posições no HTML. As posições, medidas dos posts, da sidebar… As DIV CLASS estão dentro das Div Id e normalmente são nelas que estão os enfeites, fotos… e etc. Para você fazer um theme, não sei você, mas eu sempre desenho ele primeiro. O theme que vou ensinar para vocês é simples, depois vocês melhoram e mudam ele. Exemplo: (http://static.tumblr.com/pjp1ppe/BSklyspnh/demonstracao.jpg). Voltando ao assunto das div’s, vamos começar pela div id da sidebar. Os códigos são esses:

#sidebarsm {width: 300px; height: 100%; top: 120px; padding: 5px; text-align: center; position: fixed;}

left:

80px;

Explicação:       

Width = Largura da sidebar em pixels. Hight: Altura da sidebar. 100% significa que ela ocupa o topo até o fim da página. Top: É a distância do topo até a sidebar em pixels. Left: É a distância do lado esquerdo até a sidebar em pixels. Padding: É o espaçamento entre o conteúdo da sidebar até a borda dela. Text-align: É o alinhamento do texto. Position: Se é fixo (fixed) ou se ao descer a página, ele não desce junto (absolute).

Como eu disse, a div id é mais para posicionamento. Todas as propriedades e códigos usados nela foram de posicionamento da sidebar no theme. Agora vamos as imagens, descrição, enfeites, e os links! Comecemos pela imagem, cole este código abaixo do código da sidebar: .imagesm {padding: 0px; width: 360px; height: 240px;} .imagesm img { width: 360px; }

display:

inline;

text-align:center;

height:

240px;

Como você já sabe, width é a largura da imagem, e height é a altura da imagem em pixels. Modifique até achar que fica legal. Você também pode colocar outros recursos nessa imagem como por exemplo: 

Tutorial: Imagem passando

(http://apenashtml.tumblr.com/post/14494623044/tutorial-como-fazer-as-imagens-passando) 

Tutorial: Imagem que muda ao passar o mouse sobre ela

(http://apenashtml.tumblr.com/post/16018512682/tutorial-imagem-que-muda-quando-passa-omouse-sobre) Eu fiz estes tutoriais no meu tumblr de HTML, você pode usá-los, mas como iniciante eu esperaria um pouco ok? Pronto. Agora que já temos o código da sidebar, da imagem, vamos a descrição, certo? Copie este código e cole abaixo da div class das imagens: .descricaosm{background: transparent; padding: 5px; margin-bottom: 5px; width: 360px; left: 0px; top: 270px; padding-top: 0px; z-index: 2;} Explicação:   

Background: É a cor em #, mas eu particularmente prefiro a sidebar transparente, então usei transparent; Width: Largura da descrição. Top: Distância do topo do theme até a descrição em pixels, aumente se quiser mais para baixo, e diminua se quiser mais acima.



Não se preocupe com padding, margin-bottom, padding-top e z-index, na descrição eles não irão interferir em nada.

Feita a descrição, vamos a parte que na minha opinião é a que mais dá dor de cabeça: o menu. .menusm {background: transparent; padding: 5px; margin-bottom: 7px; position: fixed; width: 320px; left: 80px; top: DISTÂNCIA DO TOPO ATÉ O MENUpx; padding-top: 0px; z-index: 2; } un {font-style: Tahoma; width: 32%; float: left; background: #COR DOS LINKS; color: #COR DA LETRA DOS LINKS; padding: 4px 0 4px 0; textalign: center; margin: 1px; line-height:15px; font-size: 12px; letter-spacing:1px; text-decoration: none; display: inline-block; } un:hover {font-style: Tahoma; float: left; background-color: #COR DOS LINKS AO PASSAR O MOUSE; color: #COR DAS LETRA DOS LINKS AO PASSAR O MOUSE; cusor: hand;} Modifique onde eu escrevi (background, color, top e etc). Agora vamos a paginação, copie este código e modifique: #paginacaosm {width: 300px; height: 20px; margin-left: 80px; margintop: 400px; position: fixed;} /*** Paginação by madlyluv.com ***/ #paginacaoml {font-size: 10px; font-weight: bold; line-height: 21px; font-family: verdana;} #paginacaoml a {background: #COR DA PAGINAÇÃO; margin: 0 1px 0 0; padding: 2px 4px; color: #000000; text-decoration: none;} #paginacaoml a:hover {background: #COR DA PAGINAÇÃO AO PASSAR O MOUSE;} #paginacaoml span.pagina_atual {background: #COR DA PAGINAÇÃO; margin: 0 1px 0 0; padding: 2px 4px; color: #000000; text-decoration: none;} #paginacaoml span.info {background: #cor de fundo; margin: 0 1px 0 0; padding: 2px 4px; color: #cor da fonte; text-decoration: none;} Modifique onde pede. Na div id #paginacaosm o top eu estimei, mas você pode mudá-lo, quando maior mais para baixo, quando menor mais para cima. Pronto, terminamos basicamente o style. Se você tiver algum código à acrescentar, acrescente abaixo do código da paginação, depois, cole este código para fecharmos o style. Agora que terminamos a parte dos códigos, vamos colocar para aparecê-los no theme! Vamos lá, começando pela sidebar, claro. Este é o código:
Lembre-se que, toda div aberta deve ser fechada com um
para que tudo funcione direito. Não fecharemos a div id ainda, pois a nossa sidebar ainda não acabou. Prosseguindo o código:
{Description}


Caso você queria colocar barra de rolagem na descrição, coloque este código:
{Description}


80px;

Obs: Como eu abri mais de uma div (perceba que tem duas div’s, uma da descrição e outra da barra de rolagem na side) então ela deve ser fechada duas vezes (
). E o código dos links:

NOME 3">NOME 4">NOME 5">NOME 6">NOME

DO DO NO DO DO DO

LINK LINK LINK LINK LINK LINK

1 2 3 4 5 6

Theme por SEU NOME, base dos códigos por consolar
{block:Pagination}{block:PreviousPage}«{/block:PreviousPage}{/block:Paginati on}{block:JumpPagination length="8"}{block:CurrentPage}{PageNumber}{/block:CurrentPage}{block:Jum pPage}{PageNumber}{/block:JumpPage}{/block:JumpPagination}{ block:Pagination}{block:NextPage} »{/block:NextPage}{/block:Pagination}
Como terminamos os links, os créditos (por favor não retire meu link) e também a sidebar, coloquei mais uma
no final, para terminar a sidebar. Já temos a sidebar pronta, e agora vamos aos posts! Eu modifiquei t-o-d-o o código, portante eles são m-e-u-s, e devem ter m-e-u-s créditos, vou falar isso e repetir, né mole não fazer um tutorial gigante e cansativo desses. Enfim, o código é este aqui: (http://static.tumblr.com/pjp1ppe/euilyssoh/themes_sem_base_consolar_2.txt) Copie, cola lá depois do fim do código da sidebar, e pronto, acabou o theme! Modifique o que está pedindo neste código, como cores, largura e etc. Ok, agora falta a data e as tags dos posts apenas, que são »essas« (http://static.tumblr.com/pjp1ppe/ehJlyst39/themes_sem_base_consolar_3.txt), modificadas por mim (como sempre). Copie-as, e cole-as dentro daquele código que eu passei anteriormente dos posts. Procure por {/block:posts} e cole exatamente acima dele.

Pronto! Seu theme está completíssimo. Caso o botão de follow ou dashboard desaparecer, coloque umas 10
antes de pois pode ser que alguma div não foi fechada. Obs: Este theme foi feito sem appearance. Para colocar appearance, eu fiz este tutorial:  

Tutorial: Como colocar appearance no theme. (http://apenashtml.tumblr.com/post/16444848924/colocando-appearance-em-um-

theme) Há também outros tutoriais necessários que você pode usar no theme que eu fiz: 

Tutorial: Texto que muda ao passar o mouse sobre ele

http://apenashtml.tumblr.com/post/16027097281/texto-que-muda-para-outro-aopassar-o-mouse-sobre-ele 

Tutorial: Como fazer o BG não repetir

http://apenashtml.tumblr.com/post/12768756698/tutorial-como-fazer-o-bg-naorepetir 

Tutorial: Título digitando na aba do navegador

http://apenashtml.tumblr.com/post/16656078269/como-faco-pras-letras-do-nomedo-meu-tumblr-ficar-tipo 

Tutorial: Menu Falso I-Frame

http://apenashtml.tumblr.com/post/16016106056/menu-falso-i-frame 

Tutorial: Fonte personalizada (cufon font)

http://apenashtml.tumblr.com/post/8139866141/como-colocar-fonte-personalizadano-seu-theme 

Tutorial: Bloqueando Ctrl U (Anti Plágios)

http://apenashtml.tumblr.com/post/16032856293/bloqueando-ctrl-u 

Tutorial: Como colocar banner acima dos posts

http://apenashtml.tumblr.com/post/14495415197/como-se-colocar-banner-acimados-posts Há diversos tutoriais também, ou melhor, qualquer dúvida pode me perguntar, de preferência no apenashtml pois eu gosto de fazer tutoriais é lá. Enfim, espero que tenham entendido, dúvidas > ask, NÃO RETIRE MEUS CRÉDITOS, FALO E REPITO, EU GASTEI TRÊS DIAS DA MINHA VIDA FAZENDO ESSE TUTORIAL, ENSINANDO PARA VOCÊS O QUE EU APRENDI »SOZINHA« E SEM NENHUM TUTORIAL PARA ME ENSINAR, ENTÃO NÃO FAÇAM EU ME ARREPENDER.

Não reblogue este post, se usar, apenas dê like e me avise na ask se foi útil. Dá like é o suficiente que vocês podem fazer né? Agradecer minha boa vontade e paciência também. Tornando a repetir NÃO, N-Ã-O, N/Ã/O, N*Ã*O, N~Ã~O, N!Ã!O retire meus créditos. Se colocar os seus créditos em outro lugar, coloque o link do meu tumblr lá poxa. OS CÓDIGOS SÃO TODOS MEUS, e EU RECONHEÇO MEUS CÓDIGOS, e se eu ver alguém usando sem creditar, eu vou no mínimo arrumar barraco e no máximo denunciar plágio pro support do tumblr. Obrigada. Espero que tenham gostado (e entendido) o tutorial. Beijos, Mikaela.