Olá meus amigos. Bem, eu, desde que me entendo por fóruns, sempre tive dúvida em como criar um template. Tive de tomar conhecimento sobre outros templates que eu encontrava, e assim, tentar entender ao menos como fazer uma coisa um pouco organizada. Através desse post, quero auxiliar as pessoas a criarem o seu próprio template. Bom, vamos começar:
Passo 1O primeiro passo é ter uma base para o seu template, isto é, como você quer que ele fique. O título, imagem, texto, créditos, etc. Seguiremos esse modelo:
Passo 2O segundo passo é criar as divisões, com base no modelo mostrado acima. Dessa forma:
- Código:
<center><div style="fundo">
<div style="Título"></div>
<div style="Imagem"></div>
<div style="Status"></div>
<div style="Texto - Considerações"></div>
<div style="Créditos"></div>
</div></center>
Passo 3
Bem, agora, é a hora de vocês modelarem o template. Isto é, dar cor, estilo, imagens, etc. Novamente, sigam os exemplos. Lembrem-se de que, a parte entre os hífens é a explicação dos códigos, e deve ser apagada.Fundo escreveu:width: 500px; - Essa é a largura do fundo. -
padding: 10px; - O espaço que separa o fundo do resto do conteúdo. -
margin: 0 auto; - Com isso, o fundo aparecerá centralizado. -
background-color: #797979; - Com esse código, iremos escolher a cor do fundo. Você pode optar por colocar uma imagem no fundo, mas isso veremos mais na frente. -
border: double 6px #000000; - Esse code serve pra colocar uma borda no fundo. O double serve para deixar uma borda dupla, mas você pode alterar para solid, por exemplo, deixando somente uma borda. O 6px é a espessura da borda. Você pode alterar para o número que preferir. -Título escreveu:text-align: center; - Isso deixará o título centralizado. -
font-size: 20px; - Isso designará o tamanho da letra do título. -
font-family: Calibri; - Esse é o nome da fonte escolhida para o texto. Você pode alterar para a fonte que preferir. -
color: #840000; - Cor do título. -
text-transform: lowercase; - Isso serve para deixar todas as letras minúsculas. Caso você queira todas maiúsculas, altere para: uppercase; caso não queira nenhuma modificação, altere para: none; -
letter-spacing: 2px; - Espaço entre as letras. -
border: 3px solid #001019; - Borda que ficará entorno do título. -
padding-bottom:1px; - Espaço entre as linhas. -Imagem escreveu:width: 394px; - Largura da imagem. -
height: 200px; - Altura da imagem. -
border: 3px solid #001019; - Borda que envolverá a imagem. -
background-image:url(link aqui); - Local onde colocará o link da imagem. -Status escreveu:background: #000000; - Fundo do retângulo do Status. -
color: #FFFFFF; - Cor das letras. -
font-size: 10px; - Tamanho da letra. -
text-align: center; - Texto centralizado. -
letter-spacing: 2px; - Espaço entre as letras. -
font-family: Calibri; - Fonte da letra. -
text-transform: uppercase; - Todas as letras maiúsculas. -
padding: 2px; - Espaço entre as linhas. -Texto - Considerações escreveu:width: 400px; - Espaço para o texto. -
max-height: 300px; - Altura máxima do espaço para o texto. Com isso, faremos uma "scrollbar" ao lado do espaço do texto. -
padding: 5px; - Espaço entre as linhas. -
border: 3px solid #001019; - Borba para envolver o espaço do texto. -
overflow: auto; - Código para a scrollbar aparecer. -
font-family: Georgia; - Fonte do texto. -
font-size: 12px; - Tamanho da fonte do texto. -
color: #000000; - Cor da fonte. -Créditos escreveu:background: #000000; - Fundo do retângulo dos créditos. -
color: #FFFFFF; - Cor das letras. -
font-size: 10px; - Tamanho da letra. -
text-align: center; - Texto centralizado. -
letter-spacing: 2px; - Espaço entre as letras. -
font-family: Calibri; - Fonte da letra. -
text-transform: uppercase; - Todas as letras maiúsculas. -
padding: 2px; - Espaço entre as linhas. -
Resultado: TítuloStatusBlá blá blá blá blá blá blá blá blá Blá blá blá blá blá blá blá blá blá Blá blá blá blá blá blá blá blá blá Blá blá blá blá blá blá blá blá blá Blá blá blá blá blá blá blá blá blá Blá blá blá blá blá blá blá blá blá Blá blá blá blá blá blá blá blá blá Blá blá blá blá blá blá blá blá blá Blá blá blá blá blá blá blá blá blá Blá blá blá blá blá blá blá blá blá Blá blá blá blá blá blá blá blá blá Blá blá blá blá blá blá blá blá blá Blá blá blá blá blá blá blá blá blá Blá blá blá blá blá blá blá blá blá Blá blá blá blá blá blá blá blá blá Blá blá blá blá blá blá blá blá blá Blá blá blá blá blá blá blá blá blá Blá blá blá blá blá blá blá blá blá Blá blá blá blá blá blá blá blá blá Blá blá blá blá blá blá blá blá blá Blá blá blá blá blá blá blá blá blá Blá blá blá blá blá blá blá blá blá Blá blá blá blá blá blá blá blá blá Blá blá blá blá blá blá blá blá blá Blá blá blá blá blá blá blá blá blá Blá blá blá blá blá blá blá blá blá Blá blá blá blá blá blá blá blá blá Blá blá blá blá blá blá blá blá blá Blá blá blá blá blá blá blá blá blá Blá blá blá blá blá blá blá blá blá. Blá blá blá blá blá blá blá blá blá Blá blá blá blá blá blá blá blá blá Blá blá blá blá blá blá blá blá blá Blá blá blá blá blá blá blá blá blá Blá blá blá blá blá blá blá blá blá Blá blá blá blá blá blá blá blá blá Blá blá blá blá blá blá blá blá blá Blá blá blá blá blá blá blá blá blá Blá blá blá blá blá blá blá blá blá Blá blá blá blá blá blá blá blá blá Blá blá blá blá blá blá blá blá blá Blá blá blá blá blá blá blá blá blá Blá blá blá blá blá blá blá blá blá Blá blá blá blá blá blá blá blá blá Blá blá blá blá blá blá blá blá blá Blá blá blá blá blá blá blá blá blá Blá blá blá blá blá blá blá blá blá Blá blá blá blá blá blá blá blá blá Blá blá blá blá blá blá blá blá blá Blá blá blá blá blá blá blá blá blá Blá blá blá blá blá blá blá blá blá Blá blá blá blá blá blá blá blá blá Blá blá blá blá blá blá blá blá blá Blá blá blá blá blá blá blá blá blá Blá blá blá blá blá blá blá blá blá Blá blá blá blá blá blá blá blá blá Blá blá blá blá blá blá blá blá blá Blá blá blá blá blá blá blá blá blá Blá blá blá blá blá blá blá blá blá Blá blá blá blá blá blá blá blá blá. Blá blá blá blá blá blá blá blá blá Blá blá blá blá blá blá blá blá blá Blá blá blá blá blá blá blá blá blá Blá blá blá blá blá blá blá blá blá Blá blá blá blá blá blá blá blá blá Blá blá blá blá blá blá blá blá blá Blá blá blá blá blá blá blá blá blá Blá blá blá blá blá blá blá blá blá Blá blá blá blá blá blá blá blá blá Blá blá blá blá blá blá blá blá blá Blá blá blá blá blá blá blá blá blá Blá blá blá blá blá blá blá blá blá Blá blá blá blá blá blá blá blá blá Blá blá blá blá blá blá blá blá blá Blá blá blá blá blá blá blá blá blá Blá blá blá blá blá blá blá blá blá Blá blá blá blá blá blá blá blá blá Blá blá blá blá blá blá blá blá blá Blá blá blá blá blá blá blá blá blá Blá blá blá blá blá blá blá blá blá Blá blá blá blá blá blá blá blá blá Blá blá blá blá blá blá blá blá blá Blá blá blá blá blá blá blá blá blá Blá blá blá blá blá blá blá blá blá Blá blá blá blá blá blá blá blá blá Blá blá blá blá blá blá blá blá blá Blá blá blá blá blá blá blá blá blá Blá blá blá blá blá blá blá blá blá Blá blá blá blá blá blá blá blá blá Blá blá blá blá blá blá blá blá blá.Créditos
Passo 4
Testar o template. Veja se não há nenhum bug. Normalmente, os bugs ocorrem por códigos digitados de forma incorreta ou "div's" que não foram fechadas ou fechadas incorretamente. Caso você não consiga localizar o motivo do bug de seu template, poste-o aqui ou me contate através de PM.
Você também pode postar o seu template aqui. Enfim, espero de verdade que eu tenha te ajudado. :)
Naruto Player RPG | sua experiência no mundo de Naruto