Bem-Vindos

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam enim augue, tempor ut scelerisque a, dictum mattis velit. In nec nibh sagittis erat volutpat condimentum. Quisque convallis sit amet risus quis molestie. Mauris dignissim imperdiet mauris.

Links Rápidos







Recentes
Últimos assuntos
» Regras da equipe TPO
Design de Fóruns | Nivel 1 (Incompleto) EmptyTer Jan 22, 2019 10:29 am por Nanda

» Entrega dos avatares
Design de Fóruns | Nivel 1 (Incompleto) EmptySeg Jan 21, 2019 1:15 pm por Nanda

» Faça seu pedido aqui
Design de Fóruns | Nivel 1 (Incompleto) EmptySeg Jan 21, 2019 1:12 pm por Nanda

» código padrão para as descrições dos tópicos
Design de Fóruns | Nivel 1 (Incompleto) EmptySeg Jan 21, 2019 1:12 pm por Nanda

» código padrão para as MP's
Design de Fóruns | Nivel 1 (Incompleto) EmptySeg Jan 21, 2019 1:10 pm por Nanda

» Informações e discussão de ideias
Design de Fóruns | Nivel 1 (Incompleto) EmptySeg Jan 21, 2019 1:04 pm por Nanda

» Suas funções [LEIAM]
Design de Fóruns | Nivel 1 (Incompleto) EmptySeg Jan 21, 2019 12:55 pm por Nanda

» Dúvidas e sugestões
Design de Fóruns | Nivel 1 (Incompleto) EmptySeg Jan 21, 2019 12:53 pm por Nanda

» Regras e ficha para parceria [ LEIA ]
Design de Fóruns | Nivel 1 (Incompleto) EmptySeg Jan 21, 2019 12:48 pm por Nanda

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

Nenhum

[ Ver toda a lista ]


O recorde de usuários online foi de 7 em Sab Out 17, 2015 1:20 pm
Quem sou eu?
Conectar-se

Esqueci minha senha

Staff


Restante Equipe

Panda

Secret

Liiz

the Frankie

William

Glutamine

Aliados





Créditos

Skin por: D'art;
Imagens por: Carozzi;
Agradecimentos a:
TheSourceCode; Glintz; Savage Themes;



xxxx Teste xxxx Uptown funk you up xxx

Design de Fóruns | Nivel 1 (Incompleto)

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Design de Fóruns | Nivel 1 (Incompleto) Empty Design de Fóruns | Nivel 1 (Incompleto)

Mensagem por D'art em Sab Fev 28, 2015 9:40 am

 photo t1_zpse114090e.png





Passo zero: Ideias

Pois sim precisam inicialmente de uma ideia do que vão a fazer! Pelo menos eu preciso o.o Se tiverem a sorte de conseguirem fazer tudo por graça divina eu serei vossa fã. Mas acreditem, fazer tudo ás cegas nem sempre dá resultado.
Então antes de meterem a mão na massa, como se custuma dizer, pensem nestas coisas:
  1. Cor: Que cores vamos usar...? Em que cores queremos o Rpg? Bem para isso eu normalmente faço o logo (ou banner ou seja lá o que queiram chama-lo), e depois trabalho com a cor mais usada no logo.

  2. Fonte Principal: Procurem uma fonte no vosso computador (ou na internet e façam download dela), que vão usar para o nome das categorias, e de títulos importantes. Mais á frente eu irei ensinar como se instala uma fonte num forum.

  3. Widghets: Sim, meus caros. É preciso já decidir se querem usar widghets ou não, pois isso irá influenciar a largura do fórum, o que é importante.

  4. Logo: (Opcional) Antes de eu começar um design eu gosto sempre de já ter o logo feito - quando eu falo de logo é a imagem principal do fórum, há quem chame banner, no entanto, quando se modifica a zona deste com css, na forumeiros, o código fala de logos. - Não só para se basear na cor mas tambem para ver se esteticamente fica melhor coisas mais simples, mais trabalhadas, tudo reto ou com arredondamentos.


E um aviso que vos faço já, não editem logo no vosso RPG, editem num forum criado a parte só para testes.
A versão com que vamos trabalhar é a chamada phpBB3, porque sinceramente é a única que eu sei fazer alguma coisa de jeito (se podemos chamar isso o.o), e é a que deixa mais trabalhar o Css.

E já agora, tem de fazer umas coisas, logo no inicio, para que não exista erros nenhums enquanto editam:

  1. Apagar qualquer css que tenham na folha de css.

  2. Apagar algumas cores, sendo essas todas as que estão no contorno e cores de fundo (ficará algo como assim:LINK - Só deixam a primeira com a cor desejada para o fundo)









Passo um: Wrap


A primeira coisa que tem de fazer é o wrap. E o que é isso? Bem, o Wrap é o corpo do forum, que muitas vezes quando estou a explicar a alguem digo que é a moldura que fica a volta do fórum.
Façam o favor de clicar aqui para verem o que é: LINK
Agora que ja sabem o que é o wrap, tem de decidir se querem o fundo escuro ou claro.
Eu vou utilizar fundo escuro porque o meu cerebro não gosta muito de tons claros enquanto não houver contraste.

O Código




[code]
#wrap {
background-color: #050505;
border-left: 52px solid #ffffff;
border-right: 60px solid #ffffff;
border-top: 2px solid #ffffff;
left: 260px;
position: relative;
width: 929px
}



-----------------------------------------------------------------------------

Bem esse é um código base, que se vocês ainda não souberem as balizas, poderá ser util, e assim só necessitam de modificar cada parametro.

Background:

Se por alguma razão alguém se esqueceu do significado de background, ou simplesmente não o sabe, já que não é crime nenhum, background significa fundo.
E esse fundo pode ser usado de duas maneiras:
• Background-color: #000;
• Background-image: url("URL da imagem");

O background-color é um fundo com cor. Qualquer cor que queiram. E basta colocar um nome da cor (black - todas serão em inglês), uma cor hexagonal (#000000;) ou uma cor rgb ( rgb (0, 0, 0); );
O background-image é um fundo com imagem. No entanto deve ser uma imagem que pode ser repetida, os normalmente chamados "padrões" ou "patterns". E cuidado, pois existe muitos na internet que não são qualificados como fundos. Aconselho usarem este site: Subtle Patterns;
Para agarrarem num dos padrões de lá carregem no botão onde diz "preview" e irão ver que o fundo do site ficou com esse padrão, de seguida no lado direto ou esquerdo do fundo, carregem no botão direito do mouse, e depois cliquem em ver imagem, e devem ser levados para uma pagina assim: IMAGEM.



-----------------------------------------------------------------------------


Border:


Border, significa borda, que basicamente podemos dizer que é tipo, o contorno.

As border dividem-se em quatro:
• border-left --- Ou seja, contorno da esquerda.
• border-right --- Ou seja, contorno da direita.
• border-top --- Ou seja, contorno do topo.
• border-bottom --- Ou seja, contorno de baixo.

E em cada borda é necessário colocar-se três propriedades, sendo elas: tamanho, tipo e cor. Ou seja, se quiserem colocar uma borda no lado direito devem colocar: border-right: XXpx solid #cor;

Muito bem, agora como eu disse em cima, existem vários tipos de bordas, que são:
• dotted --- borda pontilhada
• dashed --- borda tracejada
• solid --- borda solida
• double --- borda dupla
• groove --- borda que faz tipo duas cores, no entanto só colocamos uma cor, e depois o proprio codigo coloca a cor que nos escolhemos e de seguida a cor mais clara
• ridge --- faz o mesmo que a de cima mas ao contrario, primeiro aparece a cor mais clara e depois a que nos escolhemos
• inset --- borda em baixo relevo
• outset --- borda em alto relevo

Muito bem, isso é o basico, se querem aprender mais sobre as bordas podem o fazer aqui: LINK ESPETACULAR SOBRE TUDO O QUE HÁ PARA SABER SOBRE BORDAS


Left + Width:

Como virão no código que eu postei em cima, existe três balizas que eu ainda não expliquei, o left, o position e o width.
Isso porque esta parte tem a ver com vocês quererem ou não widghets. Se quiserem, então usem o código como está nessa parte.
O position: relative serve para nos deixar movimentar o codigo para onde quereremos, e o left, significa que essa zona que estamos a editar vai estar 260px para a esquerda, o que nos deixam até 260px de largura para o tamanho dos widghets. O width que eu coloquei ali foi o que eu achei melhor, no entanto podem ainda variar um pouco esse width, experimentem, não há problema.

No entanto, se não quiserem usar widghets, retirem o position e o left.
e utilizem o width que quiserem, no entendo aconselho a que não seja menor que 900px e maior que 1200px.

-----------------------------------------------------------------------------

Muito bem, meus jovens aprendizes, isto é o que devem saber sobre o wrap. Agora vou passar para o menu. E não vou explicar novamente como funciona o background, e o border, então esta parte será um bocadito mais rápida.






Passo zero: Ideias



bla bla





D'art
D'art
Mensagens :
3

Data de inscrição :
19/01/2014

Idade :
22

Localização :
Portugal

http://protegohorribilis-hp.forumeiros.com/
Administrador

Voltar ao Topo Ir em baixo

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

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