Como fazer themes + THEME BASE COM E SEM APPEARENCE
TUTORIAL by britinpsds
Muitas pessoas tem dúvidas em questão de tags e como modificar um theme, e as vezes até muita vontade de aprender a fazer themes ou até mesmo editá-los. Porém com pequenos tutoriais espalhados pelos tumblrs, surgem as dificuldades. Não é difícil fazer um theme, é preciso gostar, querer aprender, e prestar bastante atenção.
Para essas pessoas, eu vou ensiná-las a fazer um theme do zero, explicando as tags necessárias e os recursos usados.
REPONHA TODAS AS ASPAS DESSE TUTORIAL PARA QUE OS CÓDIGOS FUNCIONEM!
Bom, em primeiro lugar, para fazer um theme, é necessário que você saiba as PRINCIPAIS TAGS que são
<html> <head>
<title>{title}</title>
</head>
<style> </style> <body> </body> </html>
Agora vamos para o significado delas, pois só assim irão entendê-las
HTML - HYPER TEXT MARKUP LANGUAGE
Essa tag é usado no início e no fim do seu documento. <html> e </html>
CSS - CASCADING STYLE SHEETS
O CSS fica entre as tags <style> e </style>. É ele que define o formato do seu conteúdo. Como será as cores, as colunas, as fontes, bordas enfim.
HEAD - CABEÇA
Essa tag é a cabeça do seu documento. Onde são inseridos os títulos, estilos CSS e Scripts. <head> e </head>
TITLE - TÍTULO
Como o nome já diz, essa é a tag que dá o nome do seu documento. <title> e </title>
BODY - CORPO
Essa tag define o corpo do seu documento, imagens, tabelas, textos. Enfim, tudo o que você decidiu colocar no CSS vai aparecer na tag body. <body> e </body>
TABLE - TABELA (essa não é uma tag muito usada, porém explicarei assim mesmo)
Tabela é uma estrutura para que seu conteúdo fique organizado em linhas e colunas. Para marcar as linhas é usado a tag <tb> e </tb>. Para demarcar as colunas é usado a tag <td> e </td>
Apresentadas e entendidas as tags principais de um theme, vamos para as tags usadas no "corpo" dele (entre <style> e </style>)
Body - corpo do theme (fundo)
Background - plano de fundo
Propriedades attachment:
scroll (background rola junto com a página)
fixed (background fica fixo)
ex: background-attachment: fixed; image:
url('url da imagem') (com imagem)
none (sem imagem)
ex: background-image: url('url da imagem') repeat:
repeat-x (background irá repetir na vertical)
repeat-y (irá repetir na horizontal)
repeat (irá repetir nas duas direções)
no-repeat (não irá repetir)
Width - Largura (medida em px)
Height - Altura (medida em px)
Float - Lado que algo irá ficar
Ex: .img {float: left;} a imagem ficará do lado esquerdo
a,link - Links
Hover - a cor que vai ficar quando você passar o mouse por cima.
Ex: a,hover: Cor do link quando o mouse passar em cima.
Line-height - Espaço entre as linhas. Uma frase e outra.
Border - Borda
Tipos de bordas:
solid (borda sólida)
dashed (borda tracejada)
dotted (borda pontilhada)
double (borda dupla)
Padding - Espaço entre a borda e o escrito
Letter-spacing - Espaço entre as letras
imgpost - Imagem do post
dividate - Informações sobre o post (data, notes e tals)
FONT - FONTE Essa tag é usada para definir os estilos de sua fonte.
Font-size - Tamanho da fonte
Ex: 9px, 12px (px é uma medida reconhecida pelo html assim como pt, em, etc)
Font-family - Tipo de letra.
Ex: Arial, Tahoma, Georgia, Consolas, etc.
Font-color - Cor do texto
Pode ser usado três formas
código hexadecimal: #FFFFFF
código rgb: rgb(255,235,0)
nome da cor: red, blue, green
Font-style - Se aplica um estilo à fonte.
Ex: italic, normal, none ...
b: negrito i: italico u: sublinhado s: riscado
Font-weight - Define uma expessura.
Ex: Bold.
TEXT - TEXTO Define a aparência e apresentação do conteúdo do texto.
Text-align
right; ( Texto alinhado à direita) center; (Texto alinhado no centro) justify; (Justificado)
Text-decoration
underline; (Linha embaixo) overline; (Linha em cima) line-through; (Linha no centro do texto)
Text-transform
uppercase; (Todas as letras maiúsculas) capitalize; ( A primeira letra fica maiúscula) lowercase; (Todas as letras minúsculas) none; ( Não aplica estilos)
Essas são as coisas mais básicas do css que você com certeza irá usar.
OBS: A tag <style>, em alguns themes se apresenta dessa forma: <style type=”text/css”>.
Agora vamos conhecer o que você irá usar no "corpo" do seu theme (entre <body> e </body>)
BR - QUEBRA
É uma tag usado toda vez que é preciso uma quebra de linha no documento (pular uma linha). <br>
IMG - IMAGEM
Essa tag é usada para mostrar um imagem no seu documento. A tag usada para isto é <img src="link da imagem">
DIV - DIVISÃO
Essa tag é usado para criar um bloco de conteúdo. (UMA PÁGINA) <div> e </div>
P - PARÁGRAFO
Cria um parágrafo em seu documento. <p> e </p>
SPAN
Tag usada para conter um grupo de texto sem criar divisão "DIV". Geralmente ela é usada para aplicar estilos. <span> e </span>
CLASS - CLASSES
É o comando para suas tags. O que você coloca no CSS, para que se aplique ao body, é preciso da CLASS. Ex: <div class="border">
Title - Títulos
Ex: <title> TÍTULO DO SEU BLOG </title> Obs: se você colocar o título entre as tags <head> e </head> ele irá aparecer na aba do seu navegador
CENTER - CENTRO
Ex: <center> descrição aqui </center> ou <center> contador de visitas </center>
Aí estão as coisas mais usadas no corpo do theme, há outras coisas mais avançadas, mas para quem está começando ou ainda não aperfeiçoou seus conhecimentos, essas explicadas bastam.
Com essas explicações acho eu que pelo menos um simples css vocês conseguirão montar, mas para quem ainda está com dificuldades de entender um css básico ficaria mais ou menos assim.
Não é muito difícil fazer themes mas como eu já disse é preciso querer e gostar. Modificar themes é o primeiro passo para o aperfeiçoamento.
Pensando em ajudar vocês, nós do britinpsds fizemos duas bases para que você possam modificar o quanto quiserem, vamos deixá-los usarem como base como theme para disponibilizarem também.
Base sem appearence
live preview | código (code)
Base com appearence
live preview | código (code)
São bases bem simples, para que vocês possam mexer o quanto quiserem e deixá-las do jeitinho de vocês. Qualquer dúvida sobre algum código, venha até nossa ask e pergunte.
JAMAIS disponibilize essa base como sua, ou retire os créditos dela. Peço que se pegar alguma delas, dê LIKE ou REBLOG esse post, pois é muito importante para sabermos se está ajudando vocês.
Esperamos que seja útil.
