Embed Size (px)
Citation preview
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:
<html>
<head>
<style>
</style>
</head>
<body>
</body>
</html>
Todas as tags devem ter um final. Por exemplo, <html> termina em
</html>, assim como as outras. É essencial para o funcionamento delas.
Entre <html> e </html> 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
<html> e terminar com </html>.
A tag <head> 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 <style> e </style> é o CSS do theme. É aí que define a
aparência, os links, as cores, as posições, os enfeites… Basicamente tudo!
A tag <body> é 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/customize-
classic/), 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.
<head>
<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
{block:Description}
<meta name="description" content="{MetaDescription}" />
{/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 <style>, que o vamos substituir por <style type=”text/css”>, 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.
<style type="text/css">
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; background-
attachment: 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: no-
repeat;
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; text-
decoration: 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
<s>PALAVRA</s> você pode deixar ela de outra cor, assim como os outros. Para
escrever qualquer palavra riscada coloque:<s> PALAVRA </s>, em itálico <i>
PALAVRA </i>, em negrito <b> PALAVRA </b> e sublinhado coloque <u> PALAVRA </u>.
E agora cole o seguinte código, que é o do blockquote:
blockquote{margin:2px 5px 2px 5px; padding: 1px 0 3px 6px; border-
left: 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-scrollbar-
button:end:increment{display:block;height:0;background-
color:transparent;}
::-webkit-scrollbar-track-piece{background-color: #FFFFFF;-webkit-
border-radius:0;-webkit-border-bottom-right-radius:3px;-webkit-border-
bottom-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; left: 80px;
padding: 5px; text-align: center; position: fixed;}
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 { display: inline; text-align:center; height: 240px;
width: 360px; }
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-o-mouse-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; text-
align: 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; margin-
top: 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.
</style></head>
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:
<body>
<div id="sidebarsm">
<div class="imagesm"><img src="LINK DA IMAGEM"></div>
Lembre-se que, toda div aberta deve ser fechada com um </div> para que tudo
funcione direito. Não fecharemos a div id ainda, pois a nossa sidebar ainda não acabou.
Prosseguindo o código:
<div class="descricaosm">{Description}</div>
Caso você queria colocar barra de rolagem na descrição, coloque este código:
<div class="descricaosm">
<div style="overflow: auto; text-align: justify; height: 80px;
padding: 5px 5px 5px 5px; font-size:11px; line-height: 100%">
{Description}</div></div>
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 (</div></div>).
E o código dos links:
<div class="menusm"><br>
<a href="LINK 1"><un>NOME DO LINK 1</un></a>
<a href="LINK 2"><un>NOME DO LINK 2</un></a>
<a href="LINK 3"><un>NOME NO LINK 3</un></a>
<a href="LINK 4"><un>NOME DO LINK 4</un></a>
<a href="LINK 5"><un>NOME DO LINK 5</un></a>
<a href="LINK 6"><un>NOME DO LINK 6</un></a>
</div>
<div style="font-family: Tahoma; font-size: 10px;
background:transparent; color: #000; width= 250px; margin-left:
100px;">Theme por <a href="LINK DO SEU TUMBLR"><b>SEU NOME</b></a>,
base dos códigos por <a
href="http://consolar.tumblr.com/"><b>consolar</b></a>
</div>
<div id="paginacaosm"><div id="paginacaoml"><div id="paginacaoml">
{block:Pagination}{block:PreviousPage}<a
href="{PreviousPage}">«</a>{/block:PreviousPage}{/block:Paginati
on}{block:JumpPagination length="8"}{block:CurrentPage}<span
class="pagina_atual">{PageNumber}</span>{/block:CurrentPage}{block:Jum
pPage}<a class="jump_page"
href="{URL}">{PageNumber}</a>{/block:JumpPage}{/block:JumpPagination}{
block:Pagination}{block:NextPage}
<a href="{NextPage}">»</a>{/block:NextPage}{/block:Pagination}
</div>
</div></div>
</div>
Como terminamos os links, os créditos (por favor não retire meu link) e também a sidebar, coloquei mais uma </div> 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 </div> antes de </body> 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-ao-passar-o-mouse-sobre-ele
Tutorial: Como fazer o BG não repetir
http://apenashtml.tumblr.com/post/12768756698/tutorial-como-fazer-o-bg-nao-repetir
Tutorial: Título digitando na aba do navegador
http://apenashtml.tumblr.com/post/16656078269/como-faco-pras-letras-do-nome-do-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-personalizada-no-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-acima-dos-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.
