Oi gente, hoje eu vou ensinar alguns cĂłdigos bĂĄsicos para fazer um theme e explicar eles, de acordo com o tempo eu posso postar outros tutoriais de personalização, vocĂȘs podem pedir se quiserem aprender alguma coisa em especifico, mas vamos lĂĄ:
Eu sempre quando começo a fazer um theme faço um tumblr secundårio de testes, assim faço todo o theme lå, então recomendo que façam isso.
Um theme tem seus cĂłdigos âobrigatĂłriosâ, se nĂŁo tiver eles ou ele nĂŁo vai funcionar ou nĂŁo vai poder personaliza-lo, eu vou deixar ele na ordem que tem que ser e explicar eles. Pegue
<html> <head> </head> <style> </style> <body> </body> </html>
Html: à onde começa o seu theme, todos os outros códigos vão ficar dentro desse.
Head: Como o nome diz Ă© a âcabeçaâ do teu theme, aqui Ă© onde vai o titulo, favicon, scripts etc.
Style:  à onde tu personaliza seu theme, o estilo dele. Ele também é o CSS que quer dizer Cascading Style Sheets  sempre que tu ler CSS tu vai botar dentro do <style>
Body: à como o nome diz tambĂ©m ele Ă© o âcorpoâ do nosso theme, tudo que botar dentro dele ira aparecer no seu theme, vocĂȘ vai botar as coisas que tu colocou no <style>
VocĂȘ pode ter percebido que todas as tags se repetiram sĂł que a segunda com â/â na frente do nome. Isso Ă© porque todas as tags quando abertas precisam ser fechadas, e sempre pra fechar uma tem que usar o / antes da palavra.
Agora vamos começar a personalizar o theme:
Cole esse cĂłdios entre <head> e </head>
<title>{title}</title> <link rel=âshortcut iconâ href=â{favicon}â>
O <title> Ă© o titulo que fica na aba do navegador, vocĂȘ pode tirar o {title} ali do meio que Ă© pra pegar o titulo que vocĂȘ coloca no tumblr, e escrever algo pra ficar diferente.
O segundo cĂłdigo Ă© o favicon, o deseinho que fica do lado do titulo na aba do navegador, tu pode tirar o {favicon} que Ă© o teu dash icon e botar algum link de uma outra imagem que tu queira, sĂł deixe as aspas.
Agora esse cĂłdigo depois de <style>:
body{background:#ffffff; /**Cor do fundo do theme**/ Â Â Â background-image:('LINK DA IMAGEM'); /**se quiser uma imagem no fundo, se nĂŁo quiser Ă© sĂł nĂŁo botar nada**/ font-family:verdana; /**Fonte do theme**/ Â Â Â color:#3B3B3B; /**cor da fonte**/ Â Â Â font-size:11px; /**tamanho da font**/ Â Â Â text-align:center; /**aliamento do texto, pode ser right, left e center**/ }
Aonde esta em negrito vocĂȘ pode mudar. Aqui tem uns sites onde tu pode escolher as cores. xx, xx, xx (nesse Ășltimo tem um menu ali do lado com vĂĄrias coisas sobre html, vocĂȘ pode dar uma olhada nele.)
e esse depois do que eu acabei de dar antes de </style>
/**negrito, itĂĄlico, sublinhado, riscado, links**/ b, strong, bold: {color: #cor do negrito;} s {color: #cor do riscado;} i, em {color: #cor do itĂĄlico;} u {color: #cor do sublinhado;}
Tu vai mudar onde esta em negrito, é a personalização de quando tu bota essas coisas, exemplos: xx xx xx xx
E esse cĂłdigo depois desse que tu botou:
a, a:link, a:active, a:visited {color: #COR DO LINK; text-decoration:none; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; transition: all 0.4s ease-out;} a:hover {text-decoration:none; color:#COR DO LINK NO HOVER, QUANDO PASSA O MOUSE EM CIMA; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; transition: all 0.4s ease-out;}
Por enquanto sĂŁo esses cĂłdigos, Ă© o bĂĄsico do bĂĄsico, depois disso vocĂȘs vĂŁo botando a sidebar, posts e etc. Quando der vou fazer um tutorial tipo uma parte dois desse sobre a sidebar, e depois de outras coisas.
Qualquer dĂșvida sĂł mandar ask.
Se gostar dĂȘ like. NĂŁo reblog ou repasse!
Leh
