Conectar-se

Esqueci minha senha

Top dos mais postadores
Gahh
 
Tenn
 
Roger
 
nathan_guerreiro
 
Jean00
 
gabriel nunes
 
aKuA
 
VG12
 

Últimos assuntos
» Folga?
Qua Abr 10, 2013 10:02 am por Gahh

» [Sugestão]Reduzir pontos?
Qua Abr 10, 2013 9:58 am por Gahh

» Erro no sistema de pontos
Qua Abr 10, 2013 9:55 am por Gahh

» [Sugestão]Recompensa por atingir certo nível
Qua Abr 10, 2013 9:55 am por Gahh

» Tutoriais, quando vão vir.
Qua Abr 10, 2013 9:54 am por Gahh

» Vagas para postador
Qua Abr 10, 2013 9:53 am por Gahh

» Mais áreas melhor
Qua Abr 10, 2013 9:52 am por Gahh

» trancar tópicos?
Qua Abr 10, 2013 9:51 am por Gahh

» [Sugestão]Lista de Tutoriais
Qua Abr 10, 2013 9:50 am por Gahh

Quem está conectado
1 usuário online :: Nenhum usuário registrado, Nenhum Invisível e 1 Visitante

Nenhum

O recorde de usuários online foi de 14 em Ter Jun 25, 2013 3:53 am
Buscar
 
 

Resultados por:
 


Rechercher Busca avançada


[Tutorial]Configurar template minima 3 colunas parte 1 e 2

Ir em baixo

[Tutorial]Configurar template minima 3 colunas parte 1 e 2

Mensagem  Gahh em Qua Mar 06, 2013 7:48 pm

-Nota: Neste tutorial iremos utilizar o código que se encontra no tópico [Tutorial]Código do Template Minima de 3 Colunas. Por isso faça o download deste arquivo.

Neste tópico iremos começar a criar e personalizar nosso template minima 3 colunas.

Abra o código do template;
Localize Body;
Iremos encontrar o seguinte código:
Código:
body {
  }
1º Passo: Definir o plano de fundo do site. Para isso coloque dentro do código acima o uma das seguinte opções:
1ª Opção:
background:#Código da sua Cor;
2ª Opção:
background:url(Link da sua Imagem);

2º Passo: Definir se irá ou não ter uma borda. Utilize o seguinte código:
1ª Opção (Sem margem)
border:0px;
2ª Opção (Com margem)
border:2px #000000 solid;

LEGENDA:
Cor Laranja: Define a largura da margem;
Cor Verde: Define a cor da margem;
Cor Azul: Define o estilo da margem;

Bom, do "1º Passo" eu escolhi a "1ª Opção" e do "2º Passo" eu escolhi a "1ª Opção". Então o código body ira ficar assim:
Código:
body {
  background:#ffffff;
  margin:0px;
  }


Agora vamos personalizar o Header.

Localize agora Header-Wrapper;
O código que encontramos foi:
Código:
#header-wrapper {
  }

1º Passo: Definir o plano de fundo do site. Para isso coloque dentro do código acima o uma das seguinte opções:
1ª Opção:
background:#Código da sua Cor;
2ª Opção:
background:url(Link da sua Imagem);

2º Passo: Definir largura e altura do nosso cabeçalho. Para isso faça:
width:1024px;
height:250px;

LEGENDA:
Cor Azul: Defina a largura do seu cabeçalho conforme queira.

3º Passo: Definir se irá ou não ter uma borda. Utilize o seguinte código:
1ª Opção (Sem margem)
border:0px;
2ª Opção (Com margem)
border:2px #000000 solid;

4º Passo: Coloque e personalize os seguintes campos:
margin-top:0px;
margin-bottom:0px;
margin-left:0px;
margin-right:0px;

LEGENDA:
Cor Vermelha: Define margem ao seu cabeçalho. Caso não saiba como usa-las leia o tutorial: Básico da Linguagem CSS & HTML - Parte 2 - Personalização - Posicionamento

Eu escolhi no "1º Passo" a "1ª Opção". "No 3º passo" a "2ª Opção" e no "4º Passo" deixei como esta.
Meu Código do header-wrapper vai ficar da seguinte maneira:
Código:
#header-wrapper {
  background:#fff000;
  width:1024px;
  height:250px;
  border: 2px #000000 solid;
  margin-top:0px;
  margin-bottom:0px;
  margin-left:0px;
  margin-right:0px;
  }


Última edição por Gahh em Ter Mar 26, 2013 3:13 pm, editado 1 vez(es)
avatar
Gahh
Administrador
Administrador

Mensagens : 108
Pontos : 33946
Reputação : 166
Data de inscrição : 30/01/2013
Idade : 19
Localização : Chavantes - São Paulo

http://playforumonline.forumeiros.com

Voltar ao Topo Ir em baixo

[Tutorial]Configurar template minima 3 colunas parte 2

Mensagem  Gahh em Ter Mar 26, 2013 3:10 pm

- Continuação do Tutorial parte 1

Localize agora o código abaixo:

Código:
#outer-wrapper {
}

Coloque o código abaixo depois de { e antes de }

background: url(Link da Imagem) repeat;
width: 982px;
border: 0px #000000 solid;
margin: 0 auto;

- As partes em vermelhas é que devem ser obrigatório a edição, e as partes em Azul apenas devem ser mudadas caso você queira.

- Se você já tem um conhecimento sobre códigos, poderá editar o código acima. Caso não tenha, por favor consulte os tutoriais abaixo para poder editar o código.

Tutoriais:
- Para personalizar o background e o margin consulte este tutorial.
- Para personalizar o width consulte este tutorial.


avatar
Gahh
Administrador
Administrador

Mensagens : 108
Pontos : 33946
Reputação : 166
Data de inscrição : 30/01/2013
Idade : 19
Localização : Chavantes - São Paulo

http://playforumonline.forumeiros.com

Voltar ao Topo Ir em baixo

Voltar ao Topo

- Tópicos similares

 
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum