Ele vai localizar este código, substitua então o The Beat Was Goin' Strong pelo nome do seu tumblr.

Transcrição

1 Então gente, há alguns dias, disponibilizei meu theme antigo, o primeiro feito por mim, e eu não coloquei appearance nele, e quem não tem conhecimento de html fica meio tenso de editar. Então, ao invés de eu ficar explicando pra cada um como mexer, fiz esse tuto. Espero que ajude, qualquer dúvida, mande uma ask. Para pegar o código do theme, clique aqui. Primeiro, vou ensinar vocês a mudar o title. O title é o texto que aparece na guia, quando você abre ela. O código que eu disponibilizei tá identico ao que eu fiz no meu tumblr, por pura preguiça de minha parte. Bom, para mudar, use o atalho do seu teclado Ctrl + F e digite lá <title>the Beat Was Goin' Strong</title> Ele vai localizar este código, substitua então o The Beat Was Goin' Strong pelo nome do seu tumblr. <title>nome DO SEU TUMBLR</title> - Feito isso, vamos aprender a mexer no CSS da página. O CSS fica dentro de <style> e são os códigos que customizam sua página. 1. Alterando o background: Utilize o atalho Ctrl + F e busque por body {background: #b9b9b9 url(' -ExVs3PUwiyg/T5tLqegklBI/AAAAAAAABCc/f_DxkvWtIoo/s1600/ game.jpg')fixed center; Este é meu código pronto. Vamos aprender a alterá-lo. body {background: #COR DO FUNDO, HEXADECIMAL url('link DA IMAGEM DO FUNDO')fixed center; Para ver a tabela de cores hexadecimais, clique aqui. 2. Alterando as outras definições gerais da página color: #ffffff; font-size: 12px; font-family: Cicle; background-repeat: repeat; font-align: justify; color: #COR HEXADECIMAL DA FONT DO TUMBLR; font-size: TAMANHO, EM PIXELS, DA FONT; font-family: NOME DA FONT QUE VOCÊ QUER USAR¹; background-repeat: REPETIR OU NÃO O BACKGROUND²; font-align: ALINHAMENTO DA FONT; ¹Nome da font que quer usar: Uma font que não precise de instalação, porque nem todas pessoas instalam as mesmas

2 fonts que você, então pode causar erros na exibição da página. ²Repetir ou não o background: repeat, para repetir, norepeat para não repetir, repeat-y, para repetir só na vertical, repeat-x, para repetir só na horizontal. 3. Alterando o menu da página - O código do menu é dividido em duas partes. Sendo que a primeira define a exibição normal dele, e a segunda, chamada de Hover, define a exibição quando alguém passa o mouse sobre ele. - Código pronto div.navigate a{ background: #696969; color: #eee5de; display:block; width: 88px; height: 15px; text-align: center; padding-top:2px; margin-left:2px; margin-top:2px; position:relative; text-align: center; z-index:1; font-weight: bold; -moz-border-radius:7px; - webkit-border-radius:7px; display: inline-block; div.navigate a:hover{ background: #eee5de; color:#696969; letter-spacing:1px; Vamos aprender a alterar: PARTE NORMAL div.navigate a{ background: #CÓDIGO DA COR DO FUNDO HEXADECIMAL; color: #COR DA FONT HEXADECIMAL; display:block; width: 88px; height: 15px; text-align: center; padding-top:2px; margin-left:2px; margintop:2px; position:relative; text-align: center; z-index:1; font-weight: bold; -moz-border-radius:7px; -webkit-borderradius:7px; display: inline-block; PARTE HOVER div.navigate a:hover{ background: #CÓDIGO HEXADECIMAL DA COR DO FUNDO QUANDO O MOUSE É PASSADO SOBRE O MENU; color:#código HEXADECIMAL DA COR DA FONT QUANDO O MOUSE É PASSADO NO MENU; letter-spacing:1px; 4. Alterando links, negrito, sublinhado, etc a:link, a:active, a:visited { color: #000000; text-decoration: none; -webkit-transition-duration:.80s; a:hover { color: #2F4F4F;

3 s {color: #ffffff; i {color: #ffffff; b, strong {color: #8B8989; u, span.sublinha {color: #000; text-decoration: none; borderbottom: 1px solid; h1 {text-align: center; font: 10px Cicle ; color: #000000; LINKS a:link, a:active, a:visited { color: #CÓDIGO HEXADECIMAL DA COR DO LINK; text-decoration: none; -webkit-transitionduration:.80s; a:hover { color: #CÓDIGO HEXADECIMAL DA COR DO LINK EM HOVER; NEGRITO, SUBLINHADO, ITÁLICO, TACHADO E TÍTULOS s {color: #COR HEXADECIMAL DO TEXTO TACHADO (RISCADO); i {color: #COR HEXADECIMAL DO TEXTO EM ITÁLICO; b, strong {color: #COR HEXADECIMAL DO TEXTO EM NEGRITO; u, span.sublinha {color: #COR HEXADECIMAL DO TEXTO EM SUBLINHADO; text-decoration: none; border-bottom: 1px solid; h1 {text-align: ALINHAMENTO DO TÍTULO; font: TAMANHO DA FONT EM PIXELS NOME DA FONT ; color: #COR HEXADECIMAL DOS TÍTULOS; - Dentro do style, depois disso vem a paginação, que não iremos mexer. O código não foi feito por mim e eu nem mexi. Não há necessidade de mexer. 5. Alterando o favicon <link rel="shortcut icon" href=" 8881wtyt23.ico" type="image/x-icon" /> <link rel="shortcut icon" href="link DO SEU FAVICON, TEM QUE SER UMA IMAGEM.ICO" type="image/x-icon" /> 6. Alterando a sidebar <div class="sidebarf" style="background: #EEE9E9; color: #696969; width: 290px; padding: 5px; text-align: justify;"> <img src=" tumblr_lnoc6lroxa1qkhblto1_500.gif" width= 290px"/><br> <center><h1>the beat was goin' strong...</h1> <div class="line" style="border-bottom: 3px dashed #696969; margin: 7px 0px 7px 0px;"></div><br> My name's Gabriel and i'm 15. I live in Brazil and I'm Lovatic and Smiler. I'm not like the rest, hope y'all like what you are seeing now 'cause I'm just starting. Follow your heart and realize your dreams. <center><div class="navigate"> <a href="/" style="text-decoration:none">home</a> <a href="/ask" style="text-decoration:none">ask</a> <a href="/tagged/extras" style="text-decoration:none">extra</a>

4 <a href=" target="_blank" style="text-decoration:none">twitter</a> <a href=" target="_blank" style="text-decoration:none">twitter 2</a> <a href=" target="_blank" style="text-decoration:none">6 years!</a> </div> </center> <div class="line" style="border-bottom: 3px dashed #696969; margin: 7px 0px 7px 0px;"></div> <div class="sidebarf" style="background: #CÓDIGO HEXADECIMAL DA COR DO FUNDO; color: #CÓDIGO HEXADECIMAL DA COR DA FONT; width: 290px; padding: 5px; text-align: ALINHAMENTO DO TEXTO DA SIDEBAR;"> <img src="link DA FOTO DA SIDEBAR" width= 290px"/><br> <center><h1>título DO SEU TUMBLR</h1> //ESSE CÓDIGO É O QUE DESENHA AS LINHAS <div class="line" style="border-bottom: 3px dashed #CÓDIGO HEXADECIMAL DA COR DAS LINHAS; margin: 7px 0px 7px 0px;"></ div><br> SUA DESCRIÇÃO //ITENS DO MENU <center><div class="navigate"> //ACRESCENTE O CÓDIGO ABAIXO PARA ADICIONAR UM ITEM AO MENU </div> </center> //ESSE CÓDIGO É O QUE DESENHA AS LINHAS <div class="line" style="border-bottom: 3px dashed #CÓDIGO HEXADECIMAL DA COR DAS LINHAS; margin: 7px 0px 7px 0px;"></ div><br> 7. Alterando as postagens <div id="post" style="padding: 6px; top: 0px; left: 450px; position: absolute; width: 550px; color:#eee9e9; background: #696969; line-height:120%; text-align: justify;">

5 <div id="post" style="padding: 6px; top: 0px; left: 450px; position: absolute; width: 550px; color:#código HEXADECIMAL DA COR DO TEXTO DAS POSTAGENS; background: :#CÓDIGO HEXADECIMAL DA COR DO FUNDO DAS POSTAGENS; line-height:120%; text-align: ALINHAMENTO DO TEXTO DAS POSTAGENS;"> 8. Alterando a Box - Box é aquela faixa que fica embaixo de cada postagem, escrito REBLOG, o número de notes, e talz. <div class="box" style="background: #EEE5DE;color: #8B8989; padding: 5px; text-align: center;"> <div class="box" style="background: #CÓDIGO HEXADECIMAL DA COR DO FUNDO DO BOX;color: #CÓDIGO HEXADECIMAL DA COR DA FONT DO BOX; padding: 5px; text-align: ALINHAMENTO DO TEXTO DA BOX;"> ESPERO QUE TENHA AJUDADO. QUALQUER COISA PERGUNTEM NA ASK. THE-BEAT-WAS-GOIN-STRONG.TUMBLR.COM