#themetuto | Explore Tumblr Posts and Blogs

Visit Blog

Explore Tumblr blogs with no restrictions, modern design and the best experience.

Fun Fact

Tumblr was the first site to host the blog for President Barack Obama in 2011.

prettyhelp-blog · 11 years

Note

Olá!! Eu estou fazendo um theme, mas os posts ficam grudados, o que eu posso fazer para separar? Obrigada?

(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 é:

{/block:posts}

#themetuto

0 notes

html-and-materials-blog · 12 years

Text

Theme do zero #03 — Criando divs e editando-as —

~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:

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}

Certo, é isso, é bem simples mesmo, viram como é completamente fácil? É só usar a criatividade e pesquisar tutoriais bem legais que possam te ajudar com o que necessita criar! Aguarde o próximo tutorial e aprenda a criar suas próprias tags dos posts. xoxo! :*

#themetuto #vivi #vivs #vi #theme do zero #parte 3

1 note · View note

html-mylove · 12 years

Text

Como fazer um theme do zero.

Antes de tudo: Se você estiver vendo este post na Dash, entre no HML para ver os códigos pois há momentos que na dash, não aparece. E também, peço que ignorem qualquer erro na escrita ou algo do tipo porque tive preguiça de ler tudo de novo UHASUAHSUAHSAH

Comece apagando tudo que está no seu customize e colocando as tags necessárias para qualquer theme:

Entre<head> e </head> não tem segredo, é onde fica por exemplo, o título e a favicon da aba do navegador:

<title>{title}</title> <link rel="shortcut icon" href="{favicon}" />

E também onde fica os javascripts, fontes google, etc, mas isso não é importante no momento.

Agora, vamos para o css (<style> e </style>). Aqui, fica a posição, a cor, a largura, a altura, etc de tal objeto. Ou seja, definimos tudo. E tudo o que colocamos aqui não aparece no theme, então quando acabarmos a parte entre <style> e </style> e irmos para a parte de <body>, você finalmente irá começar a montar o theme literalmente.Mão que o css não seja importante porque sem ele, não tem theme. Peço que tenham paciência. Primeiro, vou ensinar como "escrevemos" o css, usamos divs, pode ser tanto:

Div class: .nomedadiv

ou,

Div id: #nomedadiv

E >>aqui<< tem uma explicação rápida da diferença de cada uma porém eu sinceramente não sigo esse "padrão", só uso quase sempre a div class (.) mesmo u_u Agora, vou explicar o que colocamos "dentro" dessas divs. Vamos começar com um exemplo:

.nomedadiv { nome:resposta; nome:resposta;}

O ponto no começo significa que é uma div class (.), mas como disse, pode ser uma div id (#), se quiser. Em nomedadiv é como diz o próprio nome, o nome dessa div. Por exemplo, se você estiver fazendo uma sidebar, você usa .sidebar ou .side ou o que você quiser. Logo depois disso, vem os parênteses {}, nada pode ficar fora dele, apenas dentro pois define as características daquela div. E sempre depois do último "nome:resposta" usa-se ; .

Agora vamos para a explicação de nome:resposta, vou dar um exemplo:

nome:resposta >> background:#ff0000

Se você perceber, nome foi substituído por background e resposta pelo código da cor (#ff0000). Podemos perceber que nome é a propriedade e resposta é a característica. Para entender melhor, outros exemplos:

font-family:arial

color:#000000

width:220px

padding:10px

Possui muito mais porém ao longo do tuto vou explicando alguns e outros você acaba aprendendo ao longo do tempo. Esse px (pixel) significa o tamanho (50px, 75px, o que quiser), há outras unidades de medida porém a grande maioria usa pixels. Voltando ao primeiro exemplo lá em cima, podemos ver o uso de ponto e vírgula (;), porque sempre temos que separar o "nome:resposta" com ; sem exceções.

Agora vamos colocar em prática, começando pelo background, lembrando que colocamos entre <style> e </style>:

body {background:#000; background-attachment:fixed; background-repeat:repeat;}

Em background sempre vai ser a cor do fundo, mudeo o #000 para a cor que quiser, >>aqui<< possui uma tabela com cores hexa (#). Em background-attachment vai definir se o bg vai ser:

Fixo: fixed

Rolando com o theme/tela: scroll

E em background-repeat define se o seu bg vai repetir ou não:

Repete por todo o theme/tela: repeat

Não repete: no-repeat

Repete verticalmente: repeat-y

Repete horizontalmente: repeat-x

Se você quiser uma imagem como bg, acrescente ao seu código:

background-image:url('URL DA SUA IMAGEM');

Ou seja, o código final do seu background irá ficar:

body {background:#000; background-attachment:fixed; background-repeat:repeat; background-image:url('URL DA SUA IMAGEM');}

Continuando, agora embaixo do código do background, coloque esse código:

.title {color:#cb4a7e; font-family:arial; font-size:20px; text-align:center; letter-spacing:1px; text-transform:uppercase; padding:5px; text-decoration:none;}

Esse código vai definir o titulo dos posts. Em color é a cor da fonte/letra, em font-family você irá colocar o nome da fonte que queira (no caso, coloquei arial) e em font-size é o tamanho dessa fonte/letra. Agora, em text-align você irá definir se quer seu titulo ou qualquer coisa que estiver fazendo envolvendo textos, no centro, à esquerda, etc.. Veja as opções para colocar em text-align:

Centralizado: center

À esquerda: left

À direita: right

Justificado: justify

Em letter-spacing é a distância entre uma letra ou outra, em text-transform define se seu texto vai ser em letra maiúscula, minúscula, etc. Você pode colocar:

Todas as letras maiúsculas: uppercase

Todas as letras minúsculas: lowercase

Nada, ficará de acordo com o que você escrever: none

Em cada palavra, a primeira letra ficará em letra maiúscula: capitalize

Depois, em padding (um dos elementos que mais uso por ser muito útil) você irá definir: "Um valor para os espaçamentos entre o conteúdo e as bordas dos elementos HTML". Por exemplo, no caso dos titulos dos posts, ele vai estar definindo a distância entre a caixa dos posts e ele.. Ele pode ser executado das seguintes maneiras, porém dessa vez você não vai mudar a "resposta" e sim, o "nome":

Define a distância dos quatro lados em apenas 1 valor para todos: padding:VALORpx;

Apenas a distância de cima: padding-top:VALORpx;

Apenas a distância de baixo: padding-bottom:VALORpx;

Apenas a distância do lado direito: padding-right:VALORpx;

Apenas a distância do lado esquerdo: padding-left:VALORpx;

Por fim, em text-decoration é como se fosse mesmo uma decoração ao seu texto, vamos as opções:

Nada, vai ficar sem nenhuma "decoração" seu texto: none

Sublinhado: underline

Riscado: line-through

Uma linha acima do seu texto: overline

Prontinho, agora vamos para o próximo código:

a {color:#75BEC2; text-decoration:underline; text-transform:none;} a:hover {color:#3C3C5C; text-decoration: none; text-transform:uppercase;}

Isto serve para definir como vai ser os links do seu theme. Já expliquei todas as propriedades que se encontram no código então não vou precisar explicar. Mas, nesse código poderei explicar 2 coisas muito úteis. Primeiro, aquele hover ali. Esse hover serve para definir o que acontecerá quando passar o mouse no elemento. No caso, coloquei que os links do meu irão mudar de cor, etc, quando passar o mouse. E é muito comum o uso dele. Segundo, vamos começar com um exemplo:

.sidebar {}

.sidebar a {}

Está vendo esse ".sidebar a" ? Também muito usado, serve para definir como vai ser os links de um elemento único, no caso, a sidebar. Acho que não precisa de mais explicações pois dentro dele você pode colocar os elementos relacionado a textos que expliquei anteriormente. Próximo código do css:

#pagina {margin-top:20px; margin-left:auto; margin-right:auto; width:920px;}

Isso serve para a centralização do theme, todo o conteúdo ficará dentro dessa "pagina; conteúdo". Vamos começar: em todos esse "margins" define as distâncias. "Mas então padding e margin são a mesma coisa?" Não. Para simplificar, digamos que margin é externo e padding interno, resumindo. Porém, são parecidos no modo de escrever, lembra daquele código que mostrei que podem ser usados no padding? O margin é igual, apenas substitua padding por margin.

Voltando ao código, em margin-top é a distância superior do seu conteúdo, acho que ficar grudado em cima fica um pouco estranho, então coloquei uns 20px. Em margin-left e margin-right não está com um valor e sim com auto pois faz com que em qualquer computador, fique centralizado. Enfim, em width determinamos a largura desse theme. Agora, coloque:

#posts {margin-top:0px; width:550px; position:relative; margin-right:0px; float:right;}

Esse código é onde posicionamos os posts. Já expliquei alguns, em width define a largura e tals.. Bom, em position podemos usar: relative, absolute e fixed. No caso, usei relative para com que faça que de acordo que abaixo a tela, podemos ver os posts seguintes. Mas eu realmente aconselho que deixe relative mesmo porque se for entrar em detalhes, irá ficar confuso, aos poucos, você irá percebendo como usamos.. Agora, está vendo o float? define se os seus posts vão ficar do lado direito ou esquerdo.

Direito: right

Esquerdo: left.

Então, se você mudou para left, mude também aquele margin-right para margin-left porém o valor em px pode continuar o mesmo (Não é necessário mudar de right para left mas eu particularmente prefiro).

Agora, vamos "enfeitar" esses posts:

.box {background:#fff; padding:13px; font-family:arial; font-size:12px; color: #696969; text-align:justify; margin-bottom:17px;}

Já expliquei tudo o que está escrito mas quero esclarecer algo, naquele margin-bottom eu uso para definir a distancia entre cada post. Pronto, agora temos que fazer a sidebar, coloque:

#pside {width:320px; margin-top:100px; margin-left:15px; position:fixed; float:left;} .sidebar {padding:5px; color:#696969; font-size:10px; text-align:center; background: #fff; font-family:arial;}

No width, coloquei 320 por uma lógica, pois em #pagina (a largura total do theme) tinha colocado o width de 920 e em #posts coloquei em 550. Então, 920-550=370, para ficar um espaço entre os posts e side, deixei a sidebar com o width de 320, entendeu? O resto dos códigos são muito parecidos com os códigos dos posts e como no começo já expliquei tudo isso, próximo passo..

Por fim, vamos customizar o negrito, itálico, riscado e sublinhado:

/** negrito **/ b {color:#3C3C5C;} /** riscado **/ s {color:#3C3C5C;} /** itálico **/ i {color:#3C3C5C;} /** sublinhado **/ u {color: #696969; border-bottom: 1px solid #3C3C5C;}

Aproveitando, está vendo aqueles /** blá blá **/ ? Eles servem para escrever algo que não afetará no theme.. E para usar os códigos acima no próprio theme usamos

<b>palavra</b>

No caso, a apalavra ficará em negrito, mas pode usar u, s, o que quiser.. Agora, esse código é tudo o que ensinei, o código final do que fica entre <style> e </style>:

Já temos o essencial e FINALMENTE todos rebolam kk vamos passar para a parte que colocamos todos esses códigos na parte de <body> significando que agora vai começar a ter seu theme. Lembrando, tudo o que falarei aqui não é mais entre <style> e </style, é entre <boyd> e </body>, o "corpo" do theme.

Você irá primeiramente colocar:

Lembra desse "pagina" que colocamos no css anteriormente? Eu falei que ele centralizava o theme e tudo mais, pois bem. Tudo do theme, a sidebar, os posts, ficará dentro de div. Agora, vamos nos focar na forma que escrevi. Lá no css, tinha feito uma div id (#) nomeada pagina, por isso possui o nome de <div id="pagina">, se fosse uma class (.) eu teria escrito da seguinte forma: <div class="pagina">. E SEMPRE temos que fechar com uma </div>, se não seu theme ficará desconfigurado. Como é apenas uma div de posição, não colocamos nada dentro dela.

Vamos colocar a sidebar, coloque esse código entre o código anterior:

<div id="pside"> <div class="sidebar"> CONTEUDO DA SUA SIDEBAR </div></div>

Ou, caso querer mais de uma sidebar:

<div id="pside"> <div class="sidebar"> CONTEUDO DA SUA SIDEBAR 1 </div> <div class="sidebar"> CONTEUDO DA SUA SIDEBAR 2 </div></div>

Viu? como no css usei uma class (.), usei <div class="pside"> e tals.. O código final ficou:

<div id="pagina"> <div id="pside"> <div class="sidebar"> CONTEUDO DA SUA SIDEBAR </div></div> </div>

Não tem segredo, dá pra ver que eu fechei todas as divs com </div> e também, que as divs de posicionamento vem primeiro. Por exemplo, primeiro coloquei a div da pagina que define a posição de todo o theme. Logo, coloquei a div de posição da sidebar e por último, a div das características da sidebar. Percebeu que uma "ordem"?

Agora, para podermos finalizar esse tuto, vamos para os posts. Ao contrário da sidebar, não é apenas colocar as divs, você tem que colocar junto com as divs dos posts, os códigos chamados Blocks. Possui um block para cada tipo de post, para photos, photosets, etc. E você pode customizar cada um. Comece colocando o seguinte código abaixo do código da sidebar mas antes da </div> de pagina:

<div id="posts"><div id="liuc"> {block:Posts} {block:Text}<div class="box"><div class="post"><div class="title">{block:Title}{Title}{/block:Title}</div><center>{Body}</center>{/block:Text} {block:Answer}<div class="box"><div class="post">{Asker} perguntou: {Question}<center>{Answer}</center>{/block:Answer} {block:Link}<div class="box"><div class="post"><a href="{URL}" class="title">{Name}</a><br />{block:Description}{Description}{/block:Description}{/block:Link} {block:Photoset}<div class="box"><div class="post"><center>{Photoset-500}</center>{block:Caption}{Caption}{/block:Caption}{/block:Photoset} {block:Photo}<div class="box"><div class="post"><center><img src="{PhotoURL-500}"></center>{block:Caption}{Caption}{/block:Caption}{/block:Photo} {block:Quote}<div class="box"><div class="post"><big><big><big>"</big></big></big>{Quote}<big><big><big>"</big></big></big><div style="text-align: right; padding: 5px;"><i>- {source}</i></div>{/block:Quote} {block:Chat}<div class="box"><div class="post"><div class="title">{block:Title}{Title}{/block:Title}</div><ul>{block:Lines}<li class="person{UserNumber}">{block:Label}<span class="label">{Label}</span>{/block:Label} {Line}</li>{/block:Lines}</ul>{/block:Chat} {block:Audio}<div class="box"><div class="post">{AudioPlayerBlack}</div>{block:Caption}{Caption}{/block:Caption}{/block:Audio} {block:Video}<div class="box"><div class="post"><center><div class="video">{Video-500}</div></center>{block:Caption}{Caption}{/block:Caption}{/block:Video}</div></div> {/block:Posts}

"Nossa, que código nada haver!" É verdade, está ridículo mas eu sou do tipo, que só entendo meus códigos, da minha maneira então não liguem uahsuahsuahsash Enfim, se você perceber, cada block é para um tipo de post específico, como disse anteriormente. Para customizar, apenas crie uma div e coloque onde quiser que fique customizado do jeito que você determinou.. Mas existem muitos tutos mostrando como customizar o chat, ask, etc e com eles, voc~e vai aprendendo mais e mais.. E também, falta bastante coisa ainda, como a paginação, header, entre outros. Mas possui vários tutos pararelos sobre isso também. No final, entre <body> e </body> ficará:

<body> <div id="pagina"> <div id="pside"> <div class="sidebar"> CONTEUDO DA SUA SIDEBAR </div></div> <div id="posts"><div id="liuc"> {block:Posts} {block:Text}<div class="box"><div class="post"><div class="title">{block:Title}{Title}{/block:Title}</div><center>{Body}</center>{/block:Text} {block:Answer}<div class="box"><div class="post">{Asker} perguntou: {Question}<center>{Answer}</center>{/block:Answer} {block:Link}<div class="box"><div class="post"><a href="{URL}" class="title">{Name}</a><br />{block:Description}{Description}{/block:Description}{/block:Link} {block:Photoset}<div class="box"><div class="post"><center>{Photoset-500}</center>{block:Caption}{Caption}{/block:Caption}{/block:Photoset} {block:Photo}<div class="box"><div class="post"><center><img src="{PhotoURL-500}"></center>{block:Caption}{Caption}{/block:Caption}{/block:Photo} {block:Quote}<div class="box"><div class="post"><big><big><big>"</big></big></big>{Quote}<big><big><big>"</big></big></big><div style="text-align: right; padding: 5px;"><i>- {source}</i></div>{/block:Quote} {block:Chat}<div class="box"><div class="post"><div class="title">{block:Title}{Title}{/block:Title}</div><ul>{block:Lines}<li class="person{UserNumber}">{block:Label}<span class="label">{Label}</span>{/block:Label} {Line}</li>{/block:Lines}</ul>{/block:Chat} {block:Audio}<div class="box"><div class="post">{AudioPlayerBlack}</div>{block:Caption}{Caption}{/block:Caption}{/block:Audio} {block:Video}<div class="box"><div class="post"><center><div class="video">{Video-500}</div></center>{block:Caption}{Caption}{/block:Caption}{/block:Video}</div></div> {/block:Posts} </div> </body>

E agora, ficou assim, o código final. Tudo o que ensinei:

<html> <head> <title>{title}</title> <link rel="shortcut icon" href="link da favicon" /> </head> <style> body {background:#000; background-attachment:fixed; background-repeat:repeat; background-image:url('URL DA SUA IMAGEM');} .title {color:#cb4a7e; font-family:arial; font-size:20px; text-align:center; letter-spacing:1px; text-transform:uppercase; padding:5px; text-decoration:none;} a {color:#75BEC2; text-decoration:underline; text-transform:none;} a:hover {color:#3C3C5C; text-decoration: none; text-transform:uppercase;} #pagina {margin-top:20px; margin-left:auto; margin-right:auto; width:920px;} #posts {margin-top:0px; width:550px; position:relative; margin-right:0px; float:right;} .box {background:#fff; padding:13px; font-family:arial; font-size:12px; color: #696969; text-align:justify; margin-bottom:17px;} #pside {width:320px; margin-top:100px; margin-left:15px; position:fixed; float:left;} .sidebar {padding:5px; color:#696969; font-size:10px; text-align:center; background: #fff; font-family:arial;} /** negrito **/ b {color:#3C3C5C;} /** riscado **/ s {color:#3C3C5C;} /** itálico **/ i {color:#3C3C5C;} /** sublinhado **/ u {color: #696969; border-bottom: 1px solid #3C3C5C;} </style> <body> <div id="pagina"> <div id="pside"> <div class="sidebar"> CONTEUDO DA SUA SIDEBAR </div></div> <div id="posts"><div id="liuc"> {block:Posts} {block:Text}<div class="box"><div class="post"><div class="title">{block:Title}{Title}{/block:Title}</div><center>{Body}</center>{/block:Text} {block:Answer}<div class="box"><div class="post">{Asker} perguntou: {Question}<center>{Answer}</center>{/block:Answer} {block:Link}<div class="box"><div class="post"><a href="{URL}" class="title">{Name}</a><br />{block:Description}{Description}{/block:Description}{/block:Link} {block:Photoset}<div class="box"><div class="post"><center>{Photoset-500}</center>{block:Caption}{Caption}{/block:Caption}{/block:Photoset} {block:Photo}<div class="box"><div class="post"><center><img src="{PhotoURL-500}"></center>{block:Caption}{Caption}{/block:Caption}{/block:Photo} {block:Quote}<div class="box"><div class="post"><big><big><big>"</big></big></big>{Quote}<big><big><big>"</big></big></big><div style="text-align: right; padding: 5px;"><i>- {source}</i></div>{/block:Quote} {block:Chat}<div class="box"><div class="post"><div class="title">{block:Title}{Title}{/block:Title}</div><ul>{block:Lines}<li class="person{UserNumber}">{block:Label}<span class="label">{Label}</span>{/block:Label} {Line}</li>{/block:Lines}</ul>{/block:Chat} {block:Audio}<div class="box"><div class="post">{AudioPlayerBlack}</div>{block:Caption}{Caption}{/block:Caption}{/block:Audio} {block:Video}<div class="box"><div class="post"><center><div class="video">{Video-500}</div></center>{block:Caption}{Caption}{/block:Caption}{/block:Video}</div></div> {/block:Posts} </div> </body> </html>

ALELUIA! ACABOU! Eu realmente espero, de verdade, que vocês entendam e por favor, creditem! Porque poderia ter sido um tuto de 2 linhas mas mesmo assim, merece os devidos créditos e queria agradecer ao TTHY também. Então é isso, espero que gostem, realmente. E lembre-se, qualquer dúvida: Ask! *--*

#como fazer um theme #themetuto #tutotheme #themetutorial #tutorialtheme #theme #themes #jessica #tuto #tutos #tutorial #tutoriais #como fazer themes do zero

77 notes · View notes

leben-tutos · 12 years

Text

Como fazer themes pt 4

Para terminar esta maratona vamos colocar a paginação...

Temos também de criar uma sidebar onde fique esta paginação, vocês ja devem saber como se criar uma sidebar, mas só para lembrar vou colocar uma base aqui:

#sidepaginacao{ position: fixed; margin-left: valorpx; margin-top: valorpx; width: valorpx; height: valorpx; }

Edite os valores para onde vocês querem colocar a paginação. Agora vamos pegar a div da paginação, creditos no código:

/*** Paginação by madlyluv.com ***/ #paginacaoml {font-size: 9px; font-family: FONTE; line-height: 21px;} #paginacaoml a {font-size: 9px; font-family: FONTE; background: #CORDOBG; margin: 0 1px 0 0; padding: 2px 3px; color: #CORDOTEXTO; text-decoration: none;} #paginacaoml a:hover {font-size: 9px; font-family: FONTE; background: #CORDOBG; border: none;}

#paginacaoml span.pagina_atual {background: #CORDOBG; margin: 0 1px 0 0; padding: 2px 3px; color: #CORDOTEXTO; text-decoration: none; font-weight: bold;}

#paginacaoml span.info {background: #CORDOBG; margin: 0 1px 0 0; padding: 2px 4px; color: #CORDAFONTE; text-decoration: none;}

Edite o que está em negrito, agora coloque os códigos abaixo entre <body> e </body>

<div id="sidepaginacao"><div id="paginacaoml"> {block:Pagination}{block:PreviousPage}<a href="{PreviousPage}">«</a>{/block:PreviousPage}{/block:Pagination} {block:JumpPagination length="3"} {block:CurrentPage}<span class="pagina_atual">{PageNumber}</span>{/block:CurrentPage} {block:JumpPage}<a class="jump_page" href="{URL}">{PageNumber}</a>{/block:JumpPage} {/block:JumpPagination} {block:Pagination}{block:NextPage}<a href="{NextPage}">»</a>{/block:NextPage}{/block:Pagination} </div></div>

Pronto, o seu theme agora está completo, pode estar até feio, sem decorações mas ja é o primeiro passo não é? Já aprendeu a criar um theme e já tem a base, e as manhas olhe neste link abaixo como ficou o meu theme com este tutorial:

Antes que vocês digam, "aaaa mais você sabe fazer themes juu por isso saiu assim", não não e não, eu não usei nenhuma base minha daqui, eu utilizei este tutorial, eu fazia ele, depois lia e ia fazendo este theme como se eu nunca tivesse feito e olhe eu aprendi ainda mais. Criei somente duas sidebares e nada mais, ta super simples, é tanto que a caixa dos posts não tem nem notes nem reblogues, está muito simples, a sidebar é simples, os links estão simples.

MARATONA FINALIZADA !!! Se utilizou recursos/materiais deste tutorial credite, por favor credite é simples creditar no código do theme assim: "Tutorial de como fazer themes por Lebe-n" depois que você souber fazer tudinho com uma base só tua tu põe os créditos somente seus, mas como ainda não sabe ajude-me a ter reconhecimento pelo meu trabalho e credite "tutorial de como fazer themes por lebe-n" ficarei muito feliz.

Se você fez algum theme com este tutorial manda uma ask para mim me amostrando poderei te ajudar ainda mais :D

Se não entendeu alguma coisa do tutorial vem para a ask se for dúvida pequena, se for grande SUBMIT :D beijoos...

NÃO REBLOGUE

APENAS DE LIKE

:D JULLY (LEBE-N)

SE USAR CREDITE

#themetuto #tutos

2 notes · View notes

prettyhelp-blog · 11 years

Note

Sim, mas esses códigos que ficam dentro das {} definem o quê? O que eu posso colocar e tals? Obrigada ai ein, rs. O melhor tumblr que eu visitei ensinado essas coisas...

Awn

#Anonymous #ajuda #themetuto

0 notes

prettyhelp-blog · 11 years

Note

Me explica certinho o que é id? Aquela parada do div e tal, ainda n entendi pra que serve e como edito...

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

equivale a: #talcoisa no css, existem vários códigos do CSS que servem pra você customizar e deixar algo do jeito que quiser, os códigos ficam entre as chaves { CÓDIGO } e as chaves vem logo depois do id/class no CSS: #talcoisa {CHAVES AQUI}, os códigos básicos você pode ver em vários tutoriais daqui, no de fazer theme também tem.

#Anonymous #themetuto #ajuda

0 notes

prettyhelp-blog · 12 years

Text

Theme do zero #05 -- customização dos posts --

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.

Se quiser modificar um elemento do chat, ou do quote, coisa do tipo, sabe? É só modificar do jeito que quiser criando div e editando tudo direitinho, com base, claro, no tutorial quatro, que descreve cada tag direitinho! Beijocas.

#themetuto #vi #tutoriais #customização dos posts

0 notes

prettyhelp-blog · 12 years

Text

Theme do zero #04 -- Blocks dos posts --

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á.

É isso gente, nesse tutorial fizemos os posts crus, as mais utilizadas também, então, espero que seja útil. Espere o quinto *u*

#themetuto #vi #tutoriais #css

0 notes

prettyhelp-blog · 12 years

Text

Theme do zero #03 -- Criando divs e editando-as --

~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 :( ~

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:

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

#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}

#themetuto #vi #tutoriais #css

1 note · View note

prettyhelp-blog · 12 years

Text

Theme do zero #02 -- CSS Básico --

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***/}

Fim. É esse o CSS básico, para facilitar a sua vida, vou passar o código do CSS básico, cole entre o <style> e o </style>

#themetuto #vi #tutoriais #css

1 note · View note

prettyhelp-blog · 12 years

Text

Theme do zero #01 — O básico —

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:

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>

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>

Certo, esse é o BASICÃO mesmo, então, já é um começo, aguarde o próprio tutorial e aprenda mais :*

#themetuto #vi #tutoriais #css

1 note · View note

html-and-materials-blog · 12 years

Text

Theme do zero #02 — CSS básico —

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;

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?

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

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

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

blockquote {conteúdo}

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***/}

Fim. É esse o CSS básico, para facilitar a sua vida, vou passar o código do CSS básico, cole entre o <style> e o </style>

#themetuto #vivi #vivs #vi #theme do zero #parte 2

2 notes · View notes

html-and-materials-blog · 12 years

Text

Theme do zero #01 -- O básico --

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?

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>

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>

A sua estrutura está assim agora, certo?:

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

Certo, esse é o BASICÃO mesmo, então, já é um começo, aguarde o próprio tutorial e aprenda mais :*

#themetuto #vivi #vivs #vi #tutos #theme do zero #parte 1

0 notes

leben-tutos · 12 years

Text

Como fazer themes pt 3

Vamos agora criar as divs para as nossas sidebares, para editarmos o layout do nosso theme, colocar fotos, títulos e outras coisinhas mais…

Vamos criar uma div id onde ficará a nossa sidebar da imagem, uma div id para posiciona-la:

#sidebar{ position: fixed; margin-left: valorpx; margin-top: valorpx; width: valorpx; height: valorpx; }

O que é preciso entender:

Position: fixed; é a posição a sidebar vai rolar de acordo com a movimentação da página.

Width: é a largura da sidebar que você quer;

Height: é a altura;

margin-top: é a margem do topo até o final da página;

margin-left: é a margem da esquerda para a direita;

Edite os códigos e os coloque dentre a tag <style> e </style>

Agora iremos criar uma div class, onde ela ficará dentro da div id, colocaremos a nossa imagem ou um texto qualquer, fica a sua escolha.

.sidebar { position: relative; background: #COR DO BG; width: VALORpx; height: VALORpx; text-align: center; font-family: FONTE; color: #COR DA FONTE; font-size: tamanhodafontepx; overflow: hidden; }

Entendendo os códigos:

position: relative; a posição dela vai estar de acordo com a div id;

font-size: o tamanho da fonte em px; prefiro 10 ou 9px;

overflow:hidden; tudo que estiver lá dentro não vai sair para fora, é uma barra de rolagem.

Edite e depois coloque entre <body> e </body> esses códigos:

</div> </div>

Entre no site do leben-tutoriais e copie esse código a dash comeu o nome!!

Onde tem “o que ficará na sidebar” é o que escolheremos o que vai estar dentro daquela sidebar se quiser uma imagem é só colocar dentro do código onde tem escrito este código:

Se você quiser escrever um texto, ou uma frase é só escrever na boa, mas respeitando o tamanho dela para que nada caia para fora…

Agora você pode criar muitas outras sidebares lembrando que sempre tem que mudar o nome da div id e da div class para outro ex: nos primeiros coloquei o nome de sidebar, no segundo vocês podem por sidebar2 tudo junto e assim por diante, e modificar também o margin-top para que não fique uma por cima da outra, é só ir fazendo isso e ir criando quantas sidebares vocês quiserem e ir editando colocando o que quiser…

Após criadas as sidebares vamos colocar uma com os links, vamos ver como pode ficar um link…

Na div class da sua nova sidebar criada, a sidebar específica para os links você colocará esses códigos:

É só ir colocando, adicionando mais códigos desses para ir criando seu menu de links simples. Para ficarem um do lado do outro é só adicionando mais códigos desses, se você quiser que eles fiquem um embaixo do outro adicione<br> na frente de cada <a href=” “>.

Lembrando que este é apenas um tutorial clássico, com nada suuuuuper editável, com aqueles posts super lindos, com varias divs, o menu com div, é apenas o básico após terminar essa maratona de tutoriais haverá o outro onde terá como editar os posts e os links e mais algumas coisinhas…

NÃO REBLOGUE

APENAS DE LIKE

:D JULLY (LEBE-N)

SE USAR CREDITE

#themetuto #tutos

1 note · View note

leben-tutos · 12 years

Text

Como fazer themes pt 2

Vamos continuar a maratona de tutoriais de como fazer themes…

Aprenderemos agora sobre os blocks de post que são os blocks colocados no body para os posts aparecerem. Como assim? Quando estamos no tumblr e vemos algum post legal as vezes damos like ou reblogamos não é? Mais o exemplo que quero é reblogar (kk), então nós reblogamos para ele ir para o nosso blog a nossa pagina do tumblr, então como eles aparecem? Com os blocks de post, se os blocks de post não estiverem colocados no theme os posts nunca apareceram, um exemplo de nunca aparecer é ne theme para disponibilizar themes, algumas pessoas não botam os blocks de posts, pois eles só querem uma sidebar com os themes e links dos códigos, mas como nós vamos fazer um theme que tenha os blocks de post nós vamos usa-los.

Entendendo os blocks:

{block:Posts} É o block onde estará todos os outros blocks, como assim? Ele é o comando, tipo o <html>, o block:Posts é a entrada, sem ele os outros blocks não funcionarão. E como sempre uma tag aberta é uma tag fechada o bloc:Posts termina assim: {/block:Posts} para determinar que a tag dos posts terminam ali.

{block:Text} É o block de texto, quando escrevemos algum texto naquele “Aa” no tumblr, é ele que determina como vai ficar esse block de texto, sempre lembrando uma tag aberta é uma tag fechada e ela é fechada assim:{/block:Text}.

{block:Photo} e {block:Photoset} É o block de fotos, quando postamos alguma foto e é um block de photoset quando postamos mais de uma imagem de uma vez ou quando postamos varis gifs de uma vez vira um photoset, eles são fechados assim: {/block:Photo} e {/block:Photoset}

Não existem só esses, e os blocks existentes são os mesmos que tem no menu do tumblr, text, link, quote, video… O único que pode ser desconhecido para voces é o block:answer que é o block onde nós editamos as asks.

Vamos criar as divs id e class (recomendado ler este tutorial abaixo sobre div id e class)

DIV ID E DIV CLASS

Elas são usadas para posições, definir cor de sidebar, para caixa de post, para efeitos e muitas outras coisas. Qual a diferença entre as duas?

A div id vem sempre com um # na frente serve melhor para posições, para posicionar coisas.

A div class é colocada dentro da div id vem sempre com um . (ponto), lá definiremos as cores, a cor do Bg a fonte, e muito mais.

exemplo:

#sidebar { /*esta é uma div id*/}

.sidebar {/*esta é uma div class*/}

E no body elas ficam assim:

Lembrando que a class é com o ponto e a id com uma hashtag (ou jogo da velha se preferir).

Vamos agora criar uma div id para posicionar os posts.

#content{ width: valorpx; margin-left: valorpx; margin-top: valorpx; }

Mas Ju, como assim margin-left, width? É assim o width é o tamanho, qual o tamanho que eu quero? 500 então esse vai ser o width, sempre com um “px” no final então 500px; margin-left é o valor da distância do cantos para a esquerda, eu quero que ele se distâncie do canto 300 px , então é só colocar 300px no código;margin-top é a distância do topo até a parte de baixo, eu quero que ele se distâncie 20 px do topo, então é só colocar no código 2opx; observe o código editado.

#content{ width: 500px; margin-left: 300px; margin-top: 20px; }

Lembrando que estes são valores dados por mim, então você pode colocar qualquer valor que você quiser, ja que aqui nao vai ter um theme base, você ja vai criar o seu primeiro a partir da qui, então você pode dar qualquer valor da distância, do topo e da width.

No body coloque assim :

<div id="content"> {block:Posts}  {/block:Posts} </div>

Pronto, agora vamos editar a outra div class que ficará dentro da id contendo todos os posts para aparecer:

.entry { width: valorpx; background-color: #CORDOBACKGROUND; padding: 9px; margin-bottom: valorpx; text-align: justify; font-family: FONTE; font-size: TAMANHO DA FONTE; position: relative; }

O código que vocês não devem saber é o margin-bottom, é a distância dos posts eu gosto de colocar 2px, ou 5px, mas fica a escolha de vocês.

Edite tudo que está em negrito depois é só adicionar o código do entry abaixo do block:posts assim:

<div id="content"> {block:Posts} <div class="entry">

</div> {/block:Posts} </div>

Perceberam que abriu uns quadradinhos? É ali que vai ficar os posts, tem todos os espaços para post ali… Vamos continuar.

Aqui em baixo tem todo o código para os posts aparecerem, os blocks que devem ser colocados entre a tag <body> e </body> apague o de cima e cole este:

Clica xx

Pronto, agora tem todas as tags dos posts prontinhas os posts ja aparecem :D

Depois em outro tutorial (Como fazer themes códigos adicionais) ensinarei a editar todas as tags dos posts para ficarem perfeitas, do jeito que você quer, mas por enquanto é só isso, mais uma maratona completa, aguardem até o proximo passo…

NÃO REBLOGUE

APENAS DE LIKE

:D JULLY (LEBE-N)

SE USAR CREDITE

#themetuto #tutos

1 note · View note

leben-tutos · 12 years

Text

Div id e div class

DIV ID E DIV CLASS

Elas são usadas para posições, definir cor de sidebar, para caixa de post, para efeitos e muitas outras coisas. Qual a diferença entre as duas?

A div id vem sempre com um # na frente serve melhor para posições, para posicionar coisas.