Tutorial - Como criar theme! #Completo
Eu vou fazer esse tuto, ele é BEM completo, espero que entendam e não ser esqueçam de dar like caso for útil... >.< e perguntem, caso vocês tenham alguma dúvida ou encontrem algum erro.
Primeiro Passo - Entendendo o que vamos trabalhar.
O Tumblr é composto de HTML e CSS, ou seja, é uma linguagem, da qual faz você criar um theme, com várias personalizações. Pra mim, o HTML se torna uma coisa fácil, quando você faz as coisas com atenção e vontade. Coisinha clichê, mas é a verdade.
Leia todo o tutorial, não pule nenhuma linha e se encontrar algum erro,releia-o. Se tal coisa persistir, você pode vir até a ask e tirar sua dúvida.
A base final, é ESTA!!! (CLIQUE) ela é linda, não é? super meiga e simples.
Vá até o Customize. Salve uma cópia do seu theme atual (copie e cole o código no bloco de notas). Agora apague e siga o tutorial!
Então, copie os códigos abaixo e cole-os lá :
<html>
<head>
<!-- Favicon -->
<link rel="shortcurt icon" href="{Favicon}">
<!-- Título -->
<title>{title}</title>
<!-- Aqui no head você insere javas, fontes e etc. -->
</head>
<style>
todo o css aqui
</style>
<body>
html aqui
</body>
</html>
Bom, em <head>, como você deve ter percebido, o favicon, título, javascripts são inseridos ali. Em style, o css fica lá. Então, cores, menus, backgrounds ficam no style, entendeu? Em body, fica o html. Então tudo o que você coloca em body, é visível no seu theme, diferente do style e head que ficam invisíveis.
Sabe onde fica o 'todo o css aqui?' então, apague-a e cole este código :
body
{background-image:url('BG AQUI');
background-position: center;
background-attachment: fixed;
background-repeat: repeat;
font-family: Consolas; font-size: 10px;}
Então, ali eu vou explicar tudo. onde está 'BG AQUI' , você vai inserir um background, ou seja, um background em link (óbvio). Se você quiser um BG na base de cores HEX, assim #000; apague esta parte :
background-image:url('BG AQUI');
Então, em #eee; você pode mudar a cor por outra, dai no caso se você não souber nenhuma cor, pode usar essa tabela de cores, então você escolhe e troca o código pela cor desejado. Aqui tem uma tabelinha de cores que você pode usar e fazer um bom proveito.
Esses outros códigos, de background-position, attachment, repeat e tal, são indicações de como o background ficará posicionado no seu theme. Não há necessidade de mexer nele. Logo abaixo temos o "font-family", no qual você pode modificar o 'Consolas', que é a fonte geral do theme. Sugiro que use a Tahoma, Verdana ou Calibri (♥). E o font-size, você mudar o 10 por outro número, que é o tamanho da fonte. Sugiro que coloque entre 11 a 12 px.
Agora, vamos fazer a sidebar. Vou dar a base de side que sempre uso, e eu vou deixar tudo explicadinho nos códigos, para que não se confunda. Copie o código abaixo, e cole logo abaixo do código que você acabou de modificar (no caso, o background, a fonte e etc)
/*Sidebar*/
#side {background-color: #fff; /*cor*/
position: absolute; /*esse cód. deixa tudo alinhadinho, não mude*/
padding: 5px; /*espaçamento, modifique a gosto!*/
margin-top: 50px; /*distância do topo, modifique como quiser*/
margin-left: 50px; /*distância da esquerda, modifique até ficar como quer*/
Temos uma side certinha, você pode modificar o margin-top e left, mas cuidado, se não tiver noção, por favor não mexa. Já deixei certinho.
Pronto, já temos a side. Agora, vamos fazer a área de postagem certo? Cole o código abaixo, embaixo do cód. da sua sidebar.
/*Área de postagens*/ #post {background: #fff; /*bg*/ width: 500px; /*tamanho dos posts*/ padding: 5px; /*espaçamento entre as bordas*/ margin-top: 30px; /*dist. do topo*/ margin-left: 300px; /*distancia da esquerda*/ position: absolute; /*mantém tudo alinhado*/}
Bom, ali está tudo alinhadinho, você pode mudar os valores assim como eu disse sobre a sidebar,mas lembre-se de que a responsabilidade é sua.
Agora, vou passar umas coisinhas extras de presente k. Vou passar um título de postagem personalizado e um blockquote fofinho. Cole estes códigos abaixo do cód. da área de post (antes de </style>)
/*Título das postagens*/
h1 {font-family: 'Georgia'; font-style: bold; color: #000; text-align: center; font-size: 11px;}
O que você pode modificar neste código?
Georgia - Nome da fonte, você pode mudar para qualquer uma desejada, tipo courier new, comic sans ms, calibri e etc.
bold: Significa que a fonte está em negrito, certo? Você pode retirar este código ou trocar para italic, (a fonte ficará em itálico, é claro kk)
text-align: center; Significa que o texto está alinhado ao centro, então, você pode deixar assim fica superr fofinho.
e finalmente, font-size: 11px; é o tamanho da sua fonte, você pode mudar o 11 para qualquer número desejado.
Depois de tantas explicações, vamos para o blockquote.
Cole este código no seu css :
blockquote {border-left: 2px solid #696969;}
Bom, o border-left é uma bordinha simples que aparecerá a esquerda, 2px é a grossura dessa borda e o #696969; (viish KKKKKKKKK) é a cor dessa borda. Você pode mudar o que quiser, tudo bem ?
Bom, agora, nós vamos colocar um efeitozinho simples na foto que irá aparecer na sidebar, é o famoso efeito de opacidade, não é nada complicado ok? É só colar este código depois do nosso blockquote :
/*Opacidade*/ .foto {width: 180px; height: 180px;} .foto:hover {opacity: 0.7; -webkit-transition: all 0.99s ease-in-out;}
Prontinho. Vamos agora, colocar uma personalização para os links, pra tirar aquele azul e sublinhado feio que fica perseguindo a gente hahaha. Cole este código depois da opacidade :
/*Links*/
a:link {color: #DEB887; text-decoration: none;}
a:hover {color: #000; -webkit-transition: all 0.99s ease-in-out;}
Eu coloquei uma cor chocolate, e no hover o preto básico, certo? você pode modificar o que quiser, e jamaiss retire o text-decoration: none; pois é ele que faz o sublinhado sumir!!
Precisamos criar uma div para posicionar a descrição, né? Então, para deixar ela fofinha abaixo da sidebar, criei uma class bem rapidinha pra ela, cole este código abaixo dos links.
/*Descrição*/ #desc {text-align: justify; width: 180px;}
Eu coloquei 180 no width, pois esse é o tamanho da minha sidebar e a imagem que tem nela. Então se você for colocar algo maior ou menor, mude o width da descrição, ok?
Agora vamos colocar um estilo básico de notes, tudo bem? Vou passar o que eu uso, vocês podem ver como ele é, na visualização da base. Cole este código abaixo da descrição que fizemos :
/*estilo de notes por sua-barbie-preferida SE USAR CREDITE!!*/.not {width: 496px; background: #fff; padding: 2px; color: #000; font-family: 'Consolas'; font-size: 10px; text-align: center;}
Prontinho. Agora, vamos trabalhar com a tag <body>, certo? Lá vamos fazer a sidebar e o post aparecerem. Então cole os cód. a seguir abaixo de <body> :
<div id="side"> <img src="https://64.media.tumblr.com/f22302bc7977d3905ac5c1e144eed261/tumblr_inline_mpfg0nECvZ1qz4rgp.png" class="foto"> <br> <div id="desc">{Description}</div> </div> <div id="post"> Seus posts vão estar aqui. </div>
Bom, ali onde está <img src.. você pode trocar o link pela imagem que quer que apareça na sidebar. Logo abaixo temos o {Description}, ok? Você vai poder colocar um texto simples na parte 'info' do seu theme.
Depois temos a div das postagens, dentro dela colocamos os blocks de post, certo? Eu vou passar a que eu uso pra vocês, é essa aqui do tthy. Você vai copiar este código e colar ele entre <body> e </body>.
Prontinho, temos um theme lindo e xeiroso!! rç.
x------------- NOTAS FINAIS -------------x
- Este theme NÃO tem appearance, mas se você quiser colocar, leia ESTE tutorial que eu acabei de preparar.
- Se você quiser algumas dicas básicas de html, leia ESTE post, é bem básico, mas vai te ajudar um pouco. Leia também este post, onde eu falo sobre alguns erros que podem acontecer no css e como você pode consertar. E ESTE, que é para formatação básica, negrito itálico e blah.
- CREDITE AO MÁXIMO por essa base, você pode sim disponibilizar, mas com os devidos créditos!!!!! não use como base para fazer a SUA base!!!!!
- Não reposte ou reblogue este tutorial, não repasse enfim não faça nada com ele sem a minha permissão, não poste em blog ou o que for.
- Essa base não tem estilo de ask nem menu, nem uma paginação, deixei isso pra vocês pois se eu ficar enchendo de fru fru ela vira um theme comum e isso atrapalha quem tá começando agora com css.
O CÓDIGO DA BASE ESTÁ AQUI
E por favor, se este tutorial lhe for útil, dê like. Feito por babi ^-^
