Bom, eu irei explicar como fazer um theme do zero, sem appearence, depois eu faço um tutorial de como fazer um theme em appeareance do zero. Então vamos ao que interessa. Você deve começar o theme sempre abrindo a tag html, e consequente será a ultima coisa que você irá fechar. Assim que abrir a tag html, você irá abrir o head. Ficará mais ou menos assim:
<HTML>
<HEAD>
<HTML>
<HEAD>
<TITLE>SEU TÍTULO AQUI OU PODE SER USADO {TITLE}(ISSO FARÁ COM QUE O TÍTULO MUDE SOZINHO)</TITLE>
<LINK REL=”SHORTCUT ICON” HREF=”LINK DE UM FAVICON OU A TAG {FAVICON}(ESSA TAG FAZ COM QUE A SUA FOTO DA DASH APAREÇA COMO FAVICON.)“>
Agora vamos para a parte do CSS que é uma das partes mais complexas do theme. Essa é a famosa parte do <style>, lembrando que você não terá de fechar nada (POR ENQUANTO) após o código do favicon você coloca assim:
<STYLE>
AQUI VIRÁ SEU CSS, CÓDIGOS DE BOX, PERSONALIZAÇÃO DE FONTES ETC.. OS MAIS BÁSICOS (QUE DEVEM CONTER EM TODOS OS THEMES) EU IREI PASSAR.
/***FORMATAÇÃO DO CORPO DO THEME, BG, CORES DA FONTE PRINCIPAL, FONTE PRINCIPAL ETC. ***/
BODY{BACKGROUND: #COR DO BG URL(‘URL DO BG **OPCIONAL** ‘); FONT-FAMILY:’FONTE PRINCIPAL’; FONT-SIZE:TAMANHO DA FONTEPX; COLOR:#COR DA FONTE; BACKGROUND-ATTACHMENT:FIXED; BACKGROUND-REPEAT: REPEAT;}
/***FONTE DOS TÍTULOS***/
H1 {COLOR: #COR DA FONTE; FONT-FAMILY:’FONTE DOS TÍTULOS’; FONT-SIZE:TAMANHO DA FONTEPX; LINE-HEIGHT:25PX; FONT-WEIGHT:NORMAL; MARGIN:0PX; PADDING:10PX; MARGIN-BOTTOM:-0PX; TEXT-ALIGN:JUSTIFY; LETTER-SPACING:1PX; TEXT-TRANSFORM:NONE; }
/***CAIXA DOS POSTS***/
.BOX { MARGIN-BOTTOM: DISTÂNCIA DE UMA BOX PARA OUTRAPX; PADDING: 5PX; TEXT-ALIGN: JUSTIFY; BACKGROUND: #COR DO BG DA CAIXA;}
/***NEGRINTO, ITÁLICO, SUBLINHADO, ETC ***/
S, STRIKE {COLOR: #COR DO RISCADO;}
I, EM {COLOR: #COR DO ITÁLICO;}
B, STRONG {COLOR: #COR DO NEGRITO; }
U, SPAN.SUBLINHA {COLOR:#COR DA FONTE DO SUBLINHADO;CURSOR: NW-RESIZE; TEXT-DECORATION: NONE; BORDER-BOTTOM: 1PX DASHED #COR DO SUBLINHADO;}
/*** LINKS ***/
A:LINK, A:ACTIVE, A:VISITED { COLOR:#COR DO LINK; TEXT-DECORATION: NONE; -WEBKIT-TRANSITION-DURATION: .90S; }
A:HOVER { COLOR: #COR DO LINK QUANDO PASSA O MOUSE; TEXT-DECORATION: NONE; CURSOR: CROSSHAIR ; }
</STYLE>
Esses códigos passados a cima são os básicos, dependendo dos tutoriais que você for usando e que peçam para por algo no CSS, você já sabe que deverá colocar entre o <style> e </style> ;)
Agora sim, nós fechamos uma tag, lembra da <head> que nós abrimos? Está na hora de fechá-la e abrir outra, abrir a <body>. Seu theme ficará mais ou menos assim:
É agora que nós iremos começar a fazer o theme. Como assim, nós já não tínhamos começado? Sim, porém é agora que nós vamos começar a aplicar tudo o que fizemos.
Primeiramente vamos já começar fazendo um theme centralizado. No seu CSS você deverá colocar isso:
.TUDO {WIDTH:LARGURA DA JUNÇÃO DE POSTS+SIDEBAR + X(UM NÚMERO QUE QUEIRA PARA SEPARAR POSTS E SIDEBAR **OPCIONAL**)PX;}
.SIDEBAR{WIDTH:LARGURA DA SIDEPX; FLOAT:COLOQUE AQUI RIGHT(DIREITA) OU LEFT(ESQUERDA);}
.POSTS {WIDTH:LARGURA DOS POSTSPX; FLOAT: COLOQUE AQUI RIGHT(DIREITA) OU LEFT(ESQUERDA) *ESSE DEPENDE DA SIDE, SEMPRE COLOQUE O CONTRÁRIO DO QUE VOCÊ COLOCOU NA SIDE*;}
CASO QUEIRA UMA PAGINAÇÃO ABAIXO DOS POSTS COLOQUE-A EXATAMENTE AQUI.
</DIV> (ESSA DIV IRÁ FECHAR A PARTE EM QUE FICAM OS POSTS)
SE VOCÊ QUISER COLOCAR I-FRAME LEMBRE-SE DE QUE ANTES DE FAZER A BOX DO IFRAME COLOQUE <DIV CLASS=”POSTS”> PARA QUE FIQUE CADA QUAL EM SEU LUGAR. O IFRAME DEVERÁ VIR AQUI.
Depois de fazer o i-frame (se quiser) termine seu theme com:
</DIV>(PARA FECHAR A DIV TUDO QUE DEIXA O THEME CENTRALIZADO)
</BODY>
</HTML>
Tendo essa noção, você poderá usar inúmeros tutoriais para personalizar seu theme. Caso tenham alguma dúvida venham perguntar na ask. Como eu credito à vocês pelo tutorial? No seus créditos você pode colocar Desenvolvimento do theme - Seu nome / Tutorial de theme do zero - Caroline Ramona e creditar todos aqueles que te ajudarem.
