Mega Rl
Olá Convidado, seja bem-vindo ao Mega Rl .

Aqui você poderá discutir sobre diversos temas, compartilhar idéias e aprender com todos os outros membros.

Somente membros podem visualizar alguns assuntos, portanto, não perca tempo e cadastre-se já no Mega Rl!

Participe do fórum, é rápido e fácil

Mega Rl
Olá Convidado, seja bem-vindo ao Mega Rl .

Aqui você poderá discutir sobre diversos temas, compartilhar idéias e aprender com todos os outros membros.

Somente membros podem visualizar alguns assuntos, portanto, não perca tempo e cadastre-se já no Mega Rl!
Mega Rl
Gostaria de reagir a esta mensagem? Crie uma conta em poucos cliques ou inicie sessão para continuar.
Mega Rl

Os melhores downloads só aqui


Você não está conectado. Conecte-se ou registre-se

[TUTORIAL] Personalizar as caixas de mensagem

Ir para baixo  Mensagem [Página 1 de 1]

MrMegaludo

MrMegaludo
Administrador
 Administrador


As caixas de texto (escrita de uma mensagem) do Fórum, são o ponto de passagem de todos os participantes, desta feita, este tutorial, irá ajudar a tornar as caixas de texto do teu Fórum, mais personalizadas, ao estilo do teu Fórum, tornando-as mais atractivas!


--> Tutoriais, Dicas e Astúcias <--
Personalizar as caixas de mensagem



1º - Teremos de aceder à "Folha de estilo CSS":
Para que possamos personalizar as caixas de texto do Fórum, é necessário adicionar códigos CSS para criarmos o efeito desejado, sendo assim, teremos de aceder a:
Painel de Controle -> Visualização -> Imagens e cores -> Cores -> Folha de estilo CSS

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]




Segue a tua versão, pois cada versão tem um código diferente. referimos-nos ás versões: PhpBB 2, PhpBB 3, PunBB e Invision.




2º - Ter uma noção de CSS me relação ás imagens:
Antes de adicionarmos o código, temos de saber o que estamos a personalizar, pois não basta adicionar o link da imagem, melhor dizendo, temos de saber trabalhar a aparência.
O que podemos utilizar para personalizar a nossa caixa de texto:

background-color:
Nesta propriedade apenas teremos de adicionar o código hexadecimal de uma cor, existe outros tipos, mas para não complicar, analisaremos desta forma.
EXEMPLO escreveu:
background-color: #FF0000;

background-image:
Esta propriedade, é das principais, pois ela permitirá adicionar a imagem pretendida para que se possa ter uma imagem de fundo.
EXEMPLO escreveu:
background-image: url(https://2img.net/i/bl/logo.png);

background-repeat:
Definirá se haverá repetição da imagem ou não (no-repeat), podendo esta repetição fazer-se somente na horizontal (repeat-x), na vertical (repeat-y) ou também nos dois planos (repeat).
EXEMPLO escreveu:
background-repeat: no-repeat;

background-attachment:
Permitirá definir se a imagem toma uma posição de rolagem (scroll), sendo que estará sempre na mesma posição, independentemente do tamanho da caixa de texto, ou de fixagem (fixed), que fará com que a imagem fique na posição definida, mesmo que a caixa de texto aumente.
EXEMPLO escreveu:
background-attachment: scroll;

background-position:
Para definir a posição da imagem, se no topo (top), em baixo (bottom), à esquerda (left), à direita (right) ao centro (center), ou então por definição de valores em percentagem (%) ou em píxeis (px).
EXEMPLO escreveu:
background-position: bottom right;
background-position: 2px 10px;
Atenção pois quando é utilizado palavras deve a primeiras variar entre top/center/bottom e a segunda entre left/center/right.

color:
Poderá definir a cor da letra do campo de texto. Nesta propriedade apenas teremos de adicionar o código hexadecimal de uma cor,
EXEMPLO escreveu:
color: #FF0000;

font-size:
Caso queira um tamanho de letra diferente. Nesta propriedade apenas teremos de adicionar o tamanho da letra, podendo ser em várias medias,
EXEMPLO escreveu:
color: 10pt;

font-family:
Se pretender uma diferente. Nesta propriedade apenas teremos de adicionar o o nome das fontes, podendo serem separados por vérgulas caso tenha uma ordem de prioridade,
EXEMPLO escreveu:
font-family Verdana, Geneva, sans-serif;




3º - Agora deverão copiar o código correspondere à versão:
Tendo em conta a versão, e como as classes variam consoante estas, deverse-à escolher a que se adequa ao Fórum onde será aplicada:

PhpBB 2
Resposta rápida
Código:
form#quick_reply textarea#text_editor_textarea {
propriedades
}

Resposta normal
Código:
textarea#text_editor_textarea {
propriedades
}

form#quick_reply textarea#text_editor_textarea {
background-image: none;
}[/code]
Utiliza-se também o código da "Resposta rápida", pois não é possível personalizar somente o caixa de resposta avançada, sendo que assim, anula-se a exibição da imagem na "Resposta rápida".
Qualquer dúvida, abra um tópico em "Administrar a aparência do fórum".


PhpBB 3
Código:
Resposta rápida
form#quick_reply #textarea_content textarea#text_editor_textarea {
propriedades
}

Resposta normal
Código:
#message-box textarea {
propriedades
}



PunBB
Resposta rápida
Código:
#text_editor_textarea.quick_reply_textarea {
propriedades
}
Resposta normal
Código:
dd.frm-textarea #text_editor_textarea {
propriedades
}


Invision
Resposta rápida
Código:
#text_editor_textarea.quick_reply_textarea {
propriedades
}

Resposta normal
Código:
.posting-block #text_editor_textarea {
propriedades
}

Estes códigos não têm efeito, quando está activa a função WYSIWIG, nas caixas de texto:


4º - Vejamos um exemplo:
Neste exemplo, iremos personalizar a caixa de resposta rápida num Fórum com versão PhpBB 3.


Código:
Código:
form#quick_reply #textarea_content textarea#text_editor_textarea {
background-image: url(http://i86.servimg.com/u/f86/11/66/91/15/create11.png);
background-repeat: no-repeat;
background-position: bottom right;
}
Resultado:
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

5º - Algumas dicas:
Quando utilizar imagens de fundo, opte sempre por uma imagem que tenha o máximo de transparência, pois caso contrário poderá prejudicar o visionamente da mensagem quando esta é construída;



Modo WYSIWYG activo


1º - Códigos para todas as versões:
Código:
.wysiwyg {
propriedades
}
Este é o código para todas as versões: PhpBB 2, PhpBB 3, PunBB e Invision. Mas é importante referir que em alguns navegadores não é possível personalizar, sendo que a cor de fundo é a que está definida como "Cor de fundo 2", no painel das cores.
Importante dizer também, que não é muito aconselhável utilizar imagens de fundo para esta situação, pois não terá o mesmo efeito que na situação de WYSIWYG desactivado.

https://megarl.forumeiros.com

MrMegaludo

MrMegaludo
Administrador
 Administrador

pessoal quem gostou comenta por favor blz a mão não vai cair, e tambem se for copiar o topico aqui coloca os creditos do site blz xd Razz

https://megarl.forumeiros.com

MrMegaludo

MrMegaludo
Administrador
 Administrador

Galera eu fiz esse tópico e esqueci completamente como fazer aqui no meu fórum kkkk.

https://megarl.forumeiros.com

Conteúdo patrocinado



Ir para o topo  Mensagem [Página 1 de 1]

Permissões neste sub-fórum
Não podes responder a tópicos