#themetuto

(sem espaços){block:posts}

.caixas é onde você vai customizar as caixinhas e se quiser separar é só colocar margin-bottom, se você não estiver fazendo do jeito acima no HTML, não vai ficar caixinha, a não ser que você coloque de block por block, o que dá muito trabalho. E pra fechar a div no fim é:

O Id é um elemento do HTML que permite que você edite aquele elemento do HTML no CSS, assim como a Class,

No ultimo tutorial eu postei as tags dos posts, hoje eu vou dar um empurrãozinho na hora de editar tudo aquilo.

O que todo mundo sempre deseja na hora de ir customizar o block dos posts???? Isso mesmo! Deixa-los em boxes, ou seja, deixa-los dentro de caixinhas certinhas com um certo espaçamento embaixo, ou seja, margin-bottom.

Para fazer isso, tudo o que você precisará fazer é: criar uma div, class ou id, logo após {block:posts} meio que isso:

{block:posts} < div id ="boxes" > ... < /div > {/block:posts}

Sacou? Viu que antes do block posts feixar a gente vai ter que fechar aquela div inicial? Então… (se copiar retire os espaços)

Agora, a única coisa ruim é que você não pode posicionar o margin-top pela div da caixinha. Então, terá que criar uma outra div acima de {block:posts} só para poder posicionar, com quaisquer tipo de margin:

< div id ="posicionar" > {block:posts} < div > ... < /div > {/block:posts} < /div >

Sacou? Hihihi! Não viu nenhuma boxe, certo? É que a gente tem que ir no css, e colocar um padding (padding ele meio que deixa o elemento mais “gordinho” hahaha), vamos ter que definir uma width também. O height, você vai colocar em “auto”, vou dar uma base simples:

#boxes { /*** cor do fundo ***/ background: #fff; /*** #fff: branco ***/ /*** cor do texto ***/ color: #000; /*** #000: preto ***/ /*** deixando mais gordinho, k ***/ padding: 3px; /*** largura ***/ width: 500px; /*** altura, n mexa ***/ height: auto; /*** espaçamento da parte inferior (parte de baixo) ***/ margin-bottom: 2px; }

É só isso daí, agora, naquele “posicionamento”, você vai só usar o margin-left, ou margin-right, ou margin-top, hihi. Enfim.

Eu linda, achando que estava arrasando, fazia a sidebar e achava que os posts automaticamente já iam pra lá, palmas pra mim, eu arraso! Então, vou hoje explicar esses blocks de postagem, que para algumas pessoas é algo mega complexo. É tão, mas tão simples, vamos começar, certo?

Hoje eu não vou ensinar a customizar, isso vai da sua criatividade, é algo que eu não tenho controle sobre.

Precisamos, necessitamos de verdade, iniciar o nosso código com isso:

{block:posts} conteúdo {/block:posts}

Certo, ali em conteúdo você colocará as tags de texto, foto, photoset, quote, vídeo, chat, áudio e link. A ordem não importa! Ok, primeiro, explicarei: texto, foto, photoset e vídeo. Que na minha opinião para quem não sabe é mais simples, ok, vamos lá. Ali em conteúdo, você deverá ir acrescentando o que for aprendendo aqui. Certo?!

Bem, não sei se sabem, mas CADA conteúdo de cada coisa (link, foto, texto, quote etc) tem que ser iniciado com {block:NOME} em nome, colocaremos o nome do que iremos trabalhar, agora, vamos ir com o texto:

{block:text}{title}{body}{/block:text}

É isso. Super simples. Mas claro, quando terminar você poderá customizar o título ({title}) como preferir, o {body}, que é o conteúdo do texto, como preferir, enfim, fará o que quiser!

Agora, o block de foto:

{block:photo}<img src="{photoURL-500}">{block:caption}{caption}{/block:caption}{/block:photo}

Ok, em <img src=”{photoURL-500}”>, fica a foto que você postará aqui na dash. 500, é o tamanho da foto. Mas, não existem apenas esse tamanho: 500, 400, 250, são os tamanhos disponíveis, algo a mais, ou algo a menos, e a sua foto não aparece. {block:caption}{caption}{/block:caption}, é necessário isto para que apareça a descrição do que você irá colocar, há o block caption em fotos, photosets e vídeos, então, ao ver, já sabe o que é, né?

{block:photoset}{photoset-500}{block:caption}{caption}{/block:caption}{/block:photoset}

Bem mais simples que o da imagem, porém os dois são fáceis de decorar. Ok, viram ali que não há: img src? Sabem por quê? Porque photosets são álbuns de fotos, não apenas uma foto, se você resolver bancar o inteligente e resolver revolucionar colocando o img src naquele código, vai se decepcionar, e ali está, o caption, como dito, aparecerá em vídeos, imagens e sets :3

Vamos para o vídeo:

{block:video}{Video-500}{block:caption}{caption}{/block:caption}{/block:video}

Viram como é mega simples?? Acho que entenderam como é que funciona mais ou menos :B

Agora, vamos para o block audio.

{block:Audio}{AudioPlayerBlack}{block:Caption}{Caption}{/block:Caption}{/block:Audio}

É isso. em {AudioPlayerBlack} fica o seu player. “Black” é a corzinha que terá, mas, você pode colocar outras cores etc.

{block:quote}❝{quote}❞ {block:source}— {source}{/block:source}{/block:quote}

Eu passei o quote todo editadinho pra vocês, e na hora de colocar lá vão entender o que é que esses caracteres que estão aí fazem :3

{block:Chat}{block:Title}{title}

{/block:Title}{block:Lines}{block:Label}{/block:lines}{/block:chat}

Bem, basta você editar como preferir, do seu jeitinho, bem, creio que agora só falta o block de links.

{block:Link}<a href="{URL}" {Target} {Name}{block:Description}{Description}{/block:Description}{/block:Link}

Então, né não tem o {target}? Eu tirei o “>” do final, então, acrescente logo depois do “}”, sabe por quê? Porque senão não ia dar pra por no <code> :( mas ok. É isso, e em {name} fica o título, em {description} o que você coloca pra descrever o link e blá blá.

~clique no canto superior direito do post se estiver na dashboard, e vá até o post do tutorial em nosso tumblr, pois aqui alguns  códigos podem ser cortados :( ~

Ok, o QUE É DIV? Div é um elemento que é criado lá no HTML e que é dada a customização no CSS :O olha que legal, haha, é através de divs que você vai dar aquele up no theme, deixá-lo lindo, fazer uma sidebar, deixar os posts bem fodinhas, enfim. Vamos aprender a criar e a editar, é MEGA SIMPLES!!

Quando se trata de divs, há duas formas: class e id.

Class, no HTML: <div class=”nome”></div> Class, no CSS: .nome

ID, no HTML: <div id=”nome”></div> ID, no CSS: #nome

Viu a diferença? Então, todos tem meio que, a mesma função, que é, deixar um elemento editável do HTML no CSS. xP

Mas, tá, o que eu faço dentro de um id ou uma class?!! Bem, você pode pôr links, imagem, texto, enfim, é MEGA simples. #rçrç

Vamos supor que eu vou adicionar uma imagem dentro de um id:

<div id="nomedoid"><img src="urldaimagem"></div>

Agora, vamos adicionar um texto:

<div id="nomedoid">conteúdo</div>

Certo, pode adicionar o que quiser, okay?! (<a href=”link”>nome</a>) Essa é a propriedade do link xP

Bemmmmm, agora, você pode editar o id do jeito que quiser no CSS (gente, lembrem que: com class é a MEEESMA coisa só que ao invés da cerquilha ponha o ponto.) okay, no CSS o meu id vai ficar assim:

#nomedoid {conteúdo}

Fim. Ali você pode customizar como quiser, criar uma caixinha pra deixar o elemento dentro, enfim, fazer algo legal, vai da tua criatividade.

Para editar a imagem é só pôr:

#nomedoid img {conteúdo}

Fim. Haha, ali você define tamanho em altura, largura, borda O QUE QUISER. Para ajustar os links é só fazer o seguinte:

#nomedoid a {conteúdo}

Paramos naquela estrutura básica, do primeiro tutorial, ainda não é agora que daremos aquele visual incrível ao nosso theme. Temos de nos preparar primeiramente com um CSS base.

CSS básico? Pra quê?

Definiremos praticamente tudo: cor de link, imagem/cor do background, customizaremos o negrito, itálico, sublinhado, blockquote, seleção etc…

Ok, primeiramente, vá até o seu CSS (tudo entre <style> e </style>). Vamos por passos.

Primeiro: adicione o código abaixo em seu CSS.

body {}

Adicionou? Certo, primeiro, vamos definir a cor do texto, hum, vejamos, quero um preto, colocarei o seguinte código entre as chaves: color:#000000;

Vamos entender esse código de cor? Certo, toda vez que você colocar ‘color’, em tal elemento e definir uma cor, (que é por código, a cor que utilizei foi preta: #000000.) aquele elemento ficará com aquela exata cor sempre. Mas nesse caso TUDO terá a cor preta, já que o código foi aplicado em ‘body’

Mas e se depois eu criar algo preto e quiser colocar branco?

É só adicionar a cor branca no elemento, não há problema!

Agora, vou adicionar um background. Basta colocar o código: background:#COR;

E, para colocar imagem é só acrescentar: url(‘imagem’)

Ok, quero deixar desde já uma coisa clara: depois de colocar tal código você deve finalizá-lo com ponto e virgula: “;”, certo?

Bem. Já está definido o seu background e a cor do texto, agora, vamos adicionar o tipo de fonte. Basta acrescentar: font-family:NOME; agora, podemos definir a size, ou seja, tamanho da fonte, basta colocar: font-size:11px; aumente o quanto quiser, assim, aumentará o tamanho da fonte. Ok, já coloquei fonte, tamanho de fonte, cor, cor de background, acho que está bom, certo? Vamos arrumar o link *O*

nosso código agora ficará assim:

body {color:#000000;background:#ffffff url('');font-family:tahoma;font-size:11px;} a {color:#000000;text-decoration:none;} a:hover {color:#ffffff;}

Vamos entender, no “a”, que é o link, eu coloquei a cor, como vocês sabem e utilizando o código: text-decoration:none; eu retirei aquele sublinhado feio que costuma ficar nos links normais :O

Ok, com o a:hover, eu defini o que acontecerá com o link quando passarmos o mouse sobre ele *_*, certo, o :hover logo após o elemento define mesmo o que vai acontecer com ele quando o mouse for passado por cima. Você pode fazer o que quiser!

Certo, defini como o meu link vai ficar, e agora? Hm, acho que irei arrumar as formatações, olhe esse tutorial, é super simples!

Como arrumar o blockquote? É só fazer o seguinte:

blockquote {conteúdo}

Onde está escrito ‘conteúdo’, você pode fazer o que quiser, colocar uma borda: border-left:4px solid #cor; ou border-right: 4px solid #cor; ou border-top:4px solid #cor; ou border-bottom:4px solid #cor; ou border:4px solid #cor; enfim, essa é a propriedade border xP pode colocar um background, pode mudar a cor, fonte, acrescentar estilos, como: negrito (font-weight:bold;), itálico (font-style:italic;) ou sublinhado (text-decoration:underline;), enfim, é simples!

Agora, a nossa seleção colorida:

::-moz-selection {background:#ffffff; /***Cor do fundo***/ color:#999999; /***Cor da fonte*/} ::selection {background:#ffffff; /***cor fundo***/ color:#999999; /***cor fonte***/}

Nem queira ver os perfeitos resultados de primeira. Vou ser precisa nesse tutorial. O primeiro de tudo é: montar a estrutura do código.

O  que é a estrutura do código?

Onde você poderá colocar o código inicial de HTML, que fará com que a página reconheça o código, colocará a ‘cabeça’ do theme, o CSS do theme, o ‘corpo’ do theme, enfim. A estrutura é essa:

<html> <head> </head> <style> </style> <body> </body> </html>

Pra que essa barra antes do nome?

Isso é para definir quando tal tag termina.

Por que é colocada duas vezes?

Como dito, uma tag é o ínicio, a outra, o término.

Você não vai ver diferença nenhuma quando montar isso. Experimente colocar um texto em algumas destas tags. Colocou? Viu a mágica?

Agora, experimente colocar um texto antes de </style> — não aparece, certo?

Por que isto acontece?

Então, o CSS é TUDO o que está entre <style> e </style>, sacas? 

E esse ‘tal’ CSS? O que diabos é isso?!

Bem, CSS é um tipo de folha em estilo, isto é, dá forma a um elemento do próprio HTML. Por isto é invisível xP

Ok, vamos começar a montar! Ponha o seguinte código após <head> 

<link rel="shortcut icon" href="FAVICON">

Bem, o código acima fará com que a sua favicon apareça. Caso queira a imagem da dash como favicon, apenas troque: FAVICON por: {favicon}

Certo, COLOCANDO O TÍTULO. Acha que tudo é de mão beijada? Claro que não, você precisa acrescentar o título, dãã. Basta colar o código abaixo após <head>:

<title>TÍTULO</title>

Certo, o seu título já aparecerá normalmente. Mas não o próprio título, sim o que definir diretamente no código. Para aparecer o título que você define no próprio tumblr é só trocar: TÍTULO por {title}

A sua estrutura está assim agora, certo?:

<html> <head> <link rel=”shortcut icon” href=”{favicon}”> <title>{title}</title> </head> <style> </style> <body> </body> </html>