Programando Skins

 Fala aí gente, aqui é o Anon e hoje venho trazer mais um tutorial para vocês! O tutorial de hoje trata-se de como programar uma skin de download. Bom, neste tutorial estarei disponibilizando a PSD de uma skin de demonstração para o tutorial, POR FAVOR, siga o tutorial tentando programar a mesma, só tente programar sua própria skin após entender bem.

LINKS ÚTEIS

Para esse tutorial é muito importante que você saiba usar a propriedade margin



CLIQUE AQUI









PSD

Analizando-a

Podemos observar que essa skin tem 7 áreas, sendo elas:
1 - Área total
2 - Área de screenshot (imagem demonstrativa)
3 - Área do número do episódio (é considerada como uma área por apresentar fonte diferente)
4 - Área dedicada às informações gerais
5 - Área de links do formato "FukingHD"
6 - Área de links do formato "PlatinumHD"
7 - Área de links do formato "UltraHD"

Pois bem, o que significam essas áreas? Cada área representa uma nova classe que iremos criar no que chamo de "esqueleto" da skin, sendo assim, acima da tag  ]]></b:skin> :

.skin {} /---Classe geral da kin
.skin img{} /---O que define o tamanho e posicionamento de toda e qualquer imagem localizada dentro da skin
.numero {} /---Classe dedicada ao número do episódio
.infos {} /---Classe dedicada as informações gerais
.fhd {} /---Classe dedicada aos links da opção FuckingHD
.phd {} /---Classe dedicada aos links da opção PlatinumHD
.uhd {} /---Classe dedicada aos links da opção UltraHD

NOTA

Os nomes das classes são apenas demonstrativos.

Preenchendo as classes

.skin {
background:url(LINK DA IMAGEM DA SKIN)no-repeat;
width:0px; /--largura--/
height:0px; /--altura--/
}
.skin img{
width:0px;/--largura--/
height:0px;/--altura--/
margin-left:0px; /--margem esquerda--/
margin-top:0px;  /--margem de cima--/
}
.numero {
font-family:Arial; /--defina a fonte--/
font-size:21px; /--tamanho da fonte--/
font-weight:bold; /--negrito--/
color:#FF5900; /--cor da fonte--/
margin-top:0px; /--margem de cima--/
margin-left:0px; /--margem esquerda--/
text-shadow:#000 1px 1px; /--sombra da fonte--/
}
.infos {
font-family:Arial; /--fonte--/
font-size:13px; /--tamanho da fonte--/
color:#333; /--cor da fonte--/
text-shadow:#000 1px 1px; /--sombra da fonte--/
margin-top:0px; /--margem de cima--/
margin-left:0px; /--margem esquerda--/
}
.fhd {
font-family:Arial; /--fonte--/
font-size:13px; /--tamanho da fonte--/
color:#333 !important; /--cor da fonte--/
text-shadow:#000 1px 1px; /--cor da sombra da fonte--/
margin-top:0px; /--margem de cima--/
margin-left:0px; /--margem esquerda--/
}
.phd {
font-family:Arial; /--fonte--/
font-size:13px; /--tamanho da fonte--/
color:#333 !important; /--cor da fonte--/
text-shadow:#000 1px 1px; /--cor da sombra da fonte--/
margin-top:0px; /--margem de cima--/
margin-left:0px; /--margem esquerda--/
}
.uhd {
font-family:Arial; /--fonte--/
font-size:13px; /--tamanho da fonte--/
color:#333 !important; /--cor da fonte--/
text-shadow:#000 1px 1px; /--cor da sombra da fonte--/
margin-top:0px; /--margem de cima--/
margin-left:0px; /--margem esquerda--/
}

É importante que sejam removidos os trechos explicativos (/--fonte--/, etc)

Divs a serem usadas nas postagens

Aí vai o código que deverá ser usado nas postagens:

<div class='skin'>
<img src='IMAGEM DEMONSTRATIVA'/>
<div class='numero'>
001</div>
<div class='infos'>
Título: Garugay. A tora Maldita Penetra novamente
Fansub: GarugSubs
Uploader: Anon
Codecs: RealGarugPlayer G.24
</div>
<div class='fhd'>
Servidor 1
Servidor 2
Servidor 3
</div>
<div class='phd'>
Servidor 1
Servidor 2
Servidor 3
</div>
<div class='uhd'>
Servidor 1
Servidor 2
Servidor 3
</div>
</div>

Sem alterar os margins, ela fica assim Assim. Lembrando que o dever de vocês é deixá-la Dessa forma.

Pronto, já temos a skin 90% programada, agora basta alterar os margins. Sigam a seguinte ordem para posicionar tudo em seu devido lugar com margin:
.skin img>>.numero>>.infos>>.fhd>>.phd>>.uhd

É isso aí, a aula de hoje foi dada, o restante é tarefa. Poste nos comentários como ficou sua skin! Amanhã passarei para deixar o código completo dessa skin para os que não conseguiram.


 Visualize a postagem com o código aqui