Modificar a caixa de mensagens

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

Resolvido Modificar a caixa de mensagens

Mensagem por EyesInFire em 18/08/11, 11:36 pm

Qual é minha questão:
Queria deixar a caixa de resposta ou para criação de topicos assim : http://yourimg.in/m/16e17i4.PNG personalizada

Medidas que eu tomei para corrigir o problema:
----

Imagens do meu problema:
http://yourimg.in/m/16e17i4.PNG

Endereço do meu fórum:
www.reddesign.forumeiros.com

Versão do meu fórum:
INVISION
avatar

EyesInFire
Nível 9

Masculino
Inscrito dia : 14/03/2011
Mensagens : 212
Pontos Ativos : 336

Ver perfil do usuário http://reddesign.forumeiros.com

Resolvido Re: Modificar a caixa de mensagens

Mensagem por LucasChaotic em 18/08/11, 11:55 pm

Olá EyesInFire
Poderia Passar o Endereço do Fórum Aonde Viu Isso?


Até Mais.
avatar

LucasChaotic
Nível 6

Masculino
Inscrito dia : 13/03/2011
Mensagens : 79
Pontos Ativos : 114

Ver perfil do usuário http://narutostorm-online.forumeiros.com/forum

Resolvido Re: Modificar a caixa de mensagens

Mensagem por iTrade em 19/08/11, 06:54 am

Olá!
Esse código é dificil de fazer, poderia nos indicar onde viu isso ?

Até mais Piscada
iTrade
avatar

iTrade
Nível 9

Masculino
Inscrito dia : 23/07/2011
Mensagens : 171
Pontos Ativos : 271

Ver perfil do usuário http://maniac-forum.forumeiros.com/

Resolvido Re: Modificar a caixa de mensagens

Mensagem por seender em 19/08/11, 09:01 am

Olá!

Veja:
Spoiler:
Efeito Jquery

Ás vezes queremos modificar as imagens dos botões bbcodes presentes no fórum e não conseguimos por meio de css, agora por meio de jquery conseguimos a solução, veja como editar tais ícones bbcode nas caixas de resposta.


--> Tutoriais, dicas e Astúcia <--
Alterar ícone dos botões BBCode





- Criar uma página HTML para sustentar o código:
Para que possamos adicionar o código, teremos de criar uma página HTML, que será onde o script ficará. Para isso é necessário aceder à:
Painel de controle -> Módulos -> HTML -> Gestão das páginas HTML

(carregue na imagem para aumentar)
Seta Título - Pode colocar o título que quiser para a página, não irá afetar em nada.
Seta Você deseja utilizar o início e o final da página do seu fórum ? - Esta terá de ser obrigatóriamente não. Caso marque-a, o código não irá funcionar adequadamente.
Seta Usar esta página como página inicial? - esta também deverá estar marcada como não, apesar de que não influencia em nada o código.
Seta Código HTML - Coloque aqui o código que trabalhamos no item anterior.
Após criada a página, deverá salvar e carregar novamente em "Gestão das páginas HTML", onde iremos recuperar o endereço da página criada, para usarmos no próximo ponto.

(carregue na imagem para aumentar)

Terá de encontrar a página HTML que criou e copiar o endereço da mesma. Em vermelho na imagem abaixo está o que deve copiar da página que criou! Por padrão esta será a primeira da lista (isso se for a última a ser criada e se não alterou a ordem de exibição).

(carregue na imagem para aumentar)



- Inserir o código para reproduzir o texto no fórum definido:
Devemos colocá-lo em um campo que seja mostrado no fórum definido, como somente há um campo que se encaixe neste requisito, a descrição do seu fórum será comprometida com este código.

Para adicionar o código aceda a:
Painel de Controle -> Geral -> Fórum -> Configurações

Ele deverá ser adicionado ao campo "Descrição do site". Caso encontre códigos nesta área, deverá colá-lo primeiro, antes de tudo mais que possa existir neste campo.

(carregue na imagem para aumentar)

O código será:
<script src="ENDERECO-DA-PAGINA-HTML"></script>
Por exemplo, no FdF:
<script src="http://ajuda.forumeiros.com/h5-regras"></script>



- Código à utilizar:
Código:
    jQuery(document).ready(function() {
        jQuery('button img').each(function() {
            if(jQuery(this).attr('src') == 'Imagem-Texto-Negrito') jQuery(this).attr('src', 'Imagem-Texto-negrito');

    if(jQuery(this).attr('src') == 'Imagem-Texto-Italico') jQuery(this).attr('src', 'Imagem-Texto-Italico');

    if(jQuery(this).attr('src') == 'Imagem-Texto-sublinhado') jQuery(this).attr('src', 'Imagem-Texto-sublinhado');

    if(jQuery(this).attr('src') == 'Imagem-Texto-riscado') jQuery(this).attr('src', 'Imagem-Texto-riscado');

    if(jQuery(this).attr('src') == 'Imagem-Texto-no-centro') jQuery(this).attr('src', 'Imagem-Texto-no-centro');

    if(jQuery(this).attr('src') == 'Imagem-Texto-na-esquerda') jQuery(this).attr('src', 'Imagem-Texto-na-esquerda');

    if(jQuery(this).attr('src') == 'Imagem-Texto-na-direita') jQuery(this).attr('src', 'Imagem-Texto-na-direita');

    if(jQuery(this).attr('src') == 'Imagem-Adicionar-novo-código-no-post') jQuery(this).attr('src', 'Imagem-Adicionar-novo-código-no-post');

    if(jQuery(this).attr('src') == 'Imagem-adicionar-um-novo-emoticon') jQuery(this).attr('src', 'Imagem-adicionar-um-novo-emoticon');

    if(jQuery(this).attr('src') == 'Imagem-Seleção-de-cor') jQuery(this).attr('src', 'Imagem-Seleção-de-cor');

    if(jQuery(this).attr('src') == 'Imagem-Ajuda') jQuery(this).attr('src', 'Imagem-Ajuda');

    if(jQuery(this).attr('src') == 'Imagem-Adicionar-um-novo-link-no-post') jQuery(this).attr('src', 'Imagem-Adicionar-um-novo-link-no-post');

    if(jQuery(this).attr('src') == 'Imagem-Adicionar-novo-vídeo') jQuery(this).attr('src', 'Imagem-Adicionar-novo-vídeo');

    if(jQuery(this).attr('src') == 'Imagem-Texto-em-lista-de-números') jQuery(this).attr('src', 'http://i26.servimg.com/u/f26/12/56/56/12/ordere10.png');

    if(jQuery(this).attr('src') == 'Imagem-adicionar-imagem-no-post') jQuery(this).attr('src', 'Imagem-adicionar-imagem-no-post');

    if(jQuery(this).attr('src') == 'Imagem-Adicionar-quote') jQuery(this).attr('src', 'Imagem-Adicionar-quote');

    if(jQuery(this).attr('src') == 'Imagem-Editor-Wysiwyg') jQuery(this).attr('src', 'Imagem-Editor-Wysiwyg');

    if(jQuery(this).attr('src') == 'Imagem-Texto-em-lista') jQuery(this).attr('src', 'Imagem-Texto-em-lista');

    if(jQuery(this).attr('src') == 'Imagem-Texto-Justificado') jQuery(this).attr('src', 'http://i26.servimg.com/u/f26/12/56/56/12/align_13.png');

    if(jQuery(this).attr('src') == 'Imagem-Texto-na-Horizontal') jQuery(this).attr('src', 'Imagem-Texto-na-Horizontal');

    if(jQuery(this).attr('src') == 'Imagem-Inserir-Nova-Tabela') jQuery(this).attr('src', 'Imagem-Inserir-Nova-Tabela');

    if(jQuery(this).attr('src') == 'Imagem-enviar-nova-imagem') jQuery(this).attr('src', 'Imagem-enviar-nova-imagem');

    if(jQuery(this).attr('src') == 'Imagem-Adicionar-arquivo-flash') jQuery(this).attr('src', 'Imagem-Adicionar-arquivo-flash');

    if(jQuery(this).attr('src') == 'Imagem-Tamanho-da-fonte') jQuery(this).attr('src', 'Imagem-Tamanho-da-fonte');

    if(jQuery(this).attr('src') == 'Imagem-Selecionar-Fonte') jQuery(this).attr('src', 'Imagem-Selecionar-Fonte');

    if(jQuery(this).attr('src') == 'http://illiweb.com/fa/wysiwyg/separator.png') jQuery(this).attr('src', 'http://i26.servimg.com/u/f26/12/56/56/12/separa10.png');
        });
    })
Nos locais aonde estão 'Imagem-Selecionar-fonte' ou algo do tipo, imagem-... terá de modificar este texto pelo link da imagem representativa de cada um dos botões.



Veja um exemplo de código:
Código:
    jQuery(document).ready(function() {
        jQuery('button img').each(function() {
            if(jQuery(this).attr('src') == 'http://illiweb.com/fa/wysiwyg/text_bold.png') jQuery(this).attr('src', 'http://i26.servimg.com/u/f26/12/56/56/12/bold10.png');

    if(jQuery(this).attr('src') == 'http://illiweb.com/fa/wysiwyg/text_italic.png') jQuery(this).attr('src', 'http://i26.servimg.com/u/f26/12/56/56/12/italic10.png');

    if(jQuery(this).attr('src') == 'http://illiweb.com/fa/wysiwyg/text_underline.png') jQuery(this).attr('src', 'http://i26.servimg.com/u/f26/12/56/56/12/underl10.png');

    if(jQuery(this).attr('src') == 'http://illiweb.com/fa/wysiwyg/text_strikethrough.png') jQuery(this).attr('src', 'http://i26.servimg.com/u/f26/12/56/56/12/strike10.png');

    if(jQuery(this).attr('src') == 'http://illiweb.com/fa/wysiwyg/text_align_center.png') jQuery(this).attr('src', 'http://i26.servimg.com/u/f26/12/56/56/12/align_10.png');

    if(jQuery(this).attr('src') == 'http://illiweb.com/fa/wysiwyg/text_align_left.png') jQuery(this).attr('src', 'http://i26.servimg.com/u/f26/12/56/56/12/align_11.png');

    if(jQuery(this).attr('src') == 'http://illiweb.com/fa/wysiwyg/text_align_right.png') jQuery(this).attr('src', 'http://i26.servimg.com/u/f26/12/56/56/12/align_12.png');

    if(jQuery(this).attr('src') == 'http://illiweb.com/fa/wysiwyg/page_white_code.png') jQuery(this).attr('src', 'http://i26.servimg.com/u/f26/12/56/56/12/code10.png');

    if(jQuery(this).attr('src') == 'http://illiweb.com/fa/i/smiles/icon_smile.gif') jQuery(this).attr('src', 'http://i26.servimg.com/u/f26/12/56/56/12/emotic10.png');

    if(jQuery(this).attr('src') == 'http://illiweb.com/fa/wysiwyg/color_swatch.png') jQuery(this).attr('src', 'http://i26.servimg.com/u/f26/12/56/56/12/font_c11.png');

    if(jQuery(this).attr('src') == 'http://illiweb.com/fa/wysiwyg/help.png') jQuery(this).attr('src', 'http://i26.servimg.com/u/f26/12/56/56/12/help10.png');

    if(jQuery(this).attr('src') == 'http://illiweb.com/fa/wysiwyg/link.png') jQuery(this).attr('src', 'http://i26.servimg.com/u/f26/12/56/56/12/link10.png');

    if(jQuery(this).attr('src') == 'http://illiweb.com/fa/wysiwyg/film.png') jQuery(this).attr('src', 'http://i26.servimg.com/u/f26/12/56/56/12/media10.png');

    if(jQuery(this).attr('src') == 'http://illiweb.com/fa/wysiwyg/text_list_numbers.png') jQuery(this).attr('src', 'http://i26.servimg.com/u/f26/12/56/56/12/ordere10.png');

    if(jQuery(this).attr('src') == 'http://illiweb.com/fa/wysiwyg/picture.png') jQuery(this).attr('src', 'http://i26.servimg.com/u/f26/12/56/56/12/pictur10.png');

    if(jQuery(this).attr('src') == 'http://illiweb.com/fa/wysiwyg/comments.png') jQuery(this).attr('src', 'http://i26.servimg.com/u/f26/12/56/56/12/quote10.png');

    if(jQuery(this).attr('src') == 'http://illiweb.com/fa/i/switch_wysiwyg.gif') jQuery(this).attr('src', 'http://i26.servimg.com/u/f26/12/56/56/12/remove12.png');

    if(jQuery(this).attr('src') == 'http://illiweb.com/fa/wysiwyg/text_list_bullets.png') jQuery(this).attr('src', 'http://i26.servimg.com/u/f26/12/56/56/12/unorde10.png');

    if(jQuery(this).attr('src') == 'http://illiweb.com/fa/wysiwyg/text_align_justify.png') jQuery(this).attr('src', 'http://i26.servimg.com/u/f26/12/56/56/12/align_13.png');

    if(jQuery(this).attr('src') == 'http://illiweb.com/fa/wysiwyg/text_horizontalrule.png') jQuery(this).attr('src', 'http://i26.servimg.com/u/f26/12/56/56/12/text_h10.png');

    if(jQuery(this).attr('src') == 'http://illiweb.com/fa/wysiwyg/table.png') jQuery(this).attr('src', 'http://i26.servimg.com/u/f26/12/56/56/12/table10.png');

    if(jQuery(this).attr('src') == 'http://illiweb.com/fa/wysiwyg/picture_save.png') jQuery(this).attr('src', 'http://i26.servimg.com/u/f26/12/56/56/12/pictur11.png');

    if(jQuery(this).attr('src') == 'http://illiweb.com/fa/wysiwyg/page_white_flash.png') jQuery(this).attr('src', 'http://i26.servimg.com/u/f26/12/56/56/12/page_w10.png');

    if(jQuery(this).attr('src') == 'http://illiweb.com/fa/wysiwyg/style.png') jQuery(this).attr('src', 'http://i26.servimg.com/u/f26/12/56/56/12/size10.png');

    if(jQuery(this).attr('src') == 'http://illiweb.com/fa/wysiwyg/font.png') jQuery(this).attr('src', 'http://i26.servimg.com/u/f26/12/56/56/12/fon10.png');

    if(jQuery(this).attr('src') == 'http://illiweb.com/fa/wysiwyg/separator.png') jQuery(this).attr('src', 'http://i26.servimg.com/u/f26/12/56/56/12/separa10.png');
        });
    })






© Fórum dos Fóruns



Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
[Dúvida] Alterar ícone dos botões BBCode
Até mais!

Tópico movido para 'Questões sobre códigos'
avatar

seender
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 07/04/2009
Mensagens : 9450
Pontos Ativos : 12457

Ver perfil do usuário http://www.divulgamaisweb.com https://www.facebook.com/Divulga-Mais-Web-874814432638426/

Resolvido Re: Modificar a caixa de mensagens

Mensagem por EyesInFire em 19/08/11, 12:11 pm

Obrigado Seender.
Vou utilizar este, gostei, o forum que vi é Vbulletin.
Podem fechar muito obrigado.
avatar

EyesInFire
Nível 9

Masculino
Inscrito dia : 14/03/2011
Mensagens : 212
Pontos Ativos : 336

Ver perfil do usuário http://reddesign.forumeiros.com

Resolvido Re: Modificar a caixa de mensagens

Mensagem por LucasChaotic em 19/08/11, 12:41 pm

Realmente Esse Tutorial É Muito Bom Para Personalizar Fóruns Ainda Mais !

Obrigado Seender
avatar

LucasChaotic
Nível 6

Masculino
Inscrito dia : 13/03/2011
Mensagens : 79
Pontos Ativos : 114

Ver perfil do usuário http://narutostorm-online.forumeiros.com/forum

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