Personalização das caixas de textos

[Virginia]

Detalhes da dúvida

Versão do fórum : phpBB2
Nível de acesso : Fundador
Navegador usado : Mozilla Firefox
Membros afetados : Somente comigo
Endereço do fórum : http://heroes.justboard.net

Descrição do problema

Minha dúvida é: como editar essas classes dos códigos de templates do fórum?

Por exemplo, a classe "post" em campos de entrada de texto, ou a "genmed", como editar os códigos delas?

[EuficoLoko]

Olá!

É só criar um novo js com esse código:

Código:

$(function(){$('.postbody').attr('class', 'test');});

No código procure por '.postbody' troque pelo nome da classe que irá ser alterada.
Procure por 'test', adicione o nome da nova classe.
Poderá multiplicar a parte do meio do código, para fazer várias vezes:

Código:

$('.postbody').attr('class', 'test');

[Virginia]

Olá, muito obrigado. Mas, por exemplo, meu objetivo com a modificação da classe post, seria mudar o visual das caixas de texto. Como deveria criar a nova classe que irá substituir?

[Sennior]

Saudações,

Porque JavaScript se no caso CSS daria?
CSS é simples e eficaz e pelo que notei o senhor deseja mudar no caso é aparência? Ou o nome mesmo da classe?

Até mais.

[Virginia]

A aparência, apenas. De componentes como por exemplo a caixa de texto, mudar a font do texto inserido nela, o tamanho vertical, e essas outras modificações mais expecíficas.

[Sennior]

Oh! Isso nós fazemos para o senhor.
Mande-me uma Print Screen do local que deseja a personalização e me especifique como deseja a personalização, digo cor da fonte, tamanho, cor...

Até mais.

[Virginia]

Então, gostaria de modificar todas as textbox do fórum. Por isso pensava em editar algo como uma classe ou algo assim.

Desejo mudar a font delas, testar algumas que tenho em mente. Mas, pode por a Roboto Condensed, tamanho 12 (pra eu editar futuramente) e algum tamanho vertical, apenas para eu editar também.

Basicamente, o código com as variáveis para eu editar. haha E procura nos templates do fórum cada textbox que deverá ser editada, se necessário.

[Sennior]

Senhor, mas essa classe não tem nos Fóruns Forumeiros.
TextBox? Não é #search-box? Textarea?

Faça assim, mande-me um print screen do local onde o senhor achou essa Classe.
Até mais.

[Virginia]

Ah, não achei esta classe. Apenas me referi as caixas de entrada de texto. haha

[Sennior]

No caso então, seria isso? Font Size é o tamanho que ficara nas caixas de texto.

Vá em: Painel de controle   Visualização   Cores "Aba" Folha CSS.

Adicione no conteúdo:

Código:

textarea {
font-size: 4pc!important;
font-family: Roboto Condesed!important;
}

Salve e Visualize seu fórum.
Melhores cumprimentos,
Sennior.

[Virginia]

Olá, não modificou nada nas caixas que eu queria, como as de login, assunto de mensagem, buscar, e etc.

Apenas modificou nestes campos:

(que eu não quero que modifique). haha

[Sennior]

No caso então, seria isso? Font Size é o tamanho que ficara nas caixas de texto.

Vá em: Painel de controle   Visualização   Cores "Aba" Folha CSS.

Adicione no conteúdo:

Código:

input.inputbox {
font-size: 2pc;
font-family: arial;
}

Salve e Visualize seu fórum.
Melhores cumprimentos,
Sennior.

[Virginia]

Olá, arrumou a font gigante lá, mas nenhum resultado nas caixas de texto...

Já aproveitando, as três coisas que quero editar, primeiro essas duas (quero modificar font e tamanho vertical/altura):



E depois, modificar o tamanho do ícone do avatar de um membro da página Membros, como sugere a imagem:

[Daemon]

Olá,

em primeiro lugar, o senhor deverá ficar ciente de que apenas aceitamos uma dúvida por tópico, assim, organizando melhor as buscas do fórum.
Bom... para realizarmos modificações nestas áreas específicas, devemos ficar cientes de como funciona cada elemento utilizado.

Para botões, são geralmente utilizados inputs dos tipos button e submit
Para textos, são geralmente utilizados inputs do tipo "text", ou textarea.

Veja os exemplos abaixo:

Botão:

Código:

<input type="button" value="Click me">
ou
<input type="submit" value="Enviar">

Campo de texto:

Código:

<input type="text" value="Insira aqui o texto">
ou
<textarea placeholder="Insira aqui o texto"></textarea>

Assim, podemos modificá-los no css da seguinte maneira:

Para botões:

Código:

input[type="button"], input[type="submit"] {
attr css aqui...
}

[b]Para campo de texto:[/code]

Código:

input[type="text"], textarea {
attr css aqui...
}

Você também pode focar apenas no id ou classe de cada elemento, assim você pode adicionar um efeito diferente para cada elemento.


Até mais!

[Virginia]

Olá Daemon, então, funcionou perfeitamente, mas nos elementos que você me passou o código. Poderia me passar o css de outros elementos, no caso o da caixa de texto que recebe a senha, e, deste botão que deve ser algum tipo diferente, o que fica na tela de edição de perfil:


O "reiniciar"

[Sennior]

Saudações!

Vá em: Painel de controle   Visualização   Cores "Aba" Folha CSS.

Adicione no conteúdo:

Código:

input#password_reg {
font-family: 'Roboto Condensed';
font-size: 12px;
height: 25px;
heigth: 30px;
letter-spacing: 2px;
text-align: left;
}

Salve e Visualize seu fórum.
Melhores cumprimentos,
Sennior.

[Virginia]

Infelizmente este último código, o da senha, não resultou...

[Sennior]

Saudações!

Coloque no INICIO DE TEU CSS:

Vá em: Painel de controle   Visualização   Cores "Aba" Folha CSS.

Adicione no conteúdo:

Código:

input#password_reg {font-family: 'Roboto Condensed'!important;font-size:12px!important;height:25px!important;heigth: 30px!important;letter-spacing: 2px!important;text-align: left!important;}

Salve e Visualize seu fórum.
Melhores cumprimentos,
Sennior.

[Virginia]

Código colocado na primeira linha da folha CSS, mas nao resulta, como segue a imagem:

[Sennior]

Saudações!

Vá em: Painel de controle   Visualização   Cores "Aba" Folha CSS.

Adicione no conteúdo:

Código:

#text_editor_iframe, input.post, select, textarea.inputbox, textarea.post {
font-family: 'Roboto Condensed'!important;
font-size: 12px!important;
height: 25px!important;
heigth: 30px!important;
letter-spacing: 2px!important;
text-align: left!important;
}

Salve e Visualize seu fórum.
Melhores cumprimentos,
Sennior.

[Virginia]

Olá!

Agora sim, funcionou perfeitamente. Só falta esse último botão, o tal do "Reiniciar"...

[Daemon]

No código que passei ao senhor, localize:

Código:

input[type="button"], input[type="submit"]

E adicione o tipo reset, assim:

Código:

input[type="button"], input[type="submit"], input[type="reset"]

Até mais!

[Virginia]

Olá, por fim, resolvido as questões!

Muito obrigado pelo serviço!

[EuficoLoko]

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada. Tópico marcado como Resolvido e movido para Questões resolvidas.