[TUTORIAL] Mensagens de aviso na caixa de resposta rápida

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

[TUTORIAL] Mensagens de aviso na caixa de resposta rápida Empty [TUTORIAL] Mensagens de aviso na caixa de resposta rápida

Mensagem por Shek 11.07.14 21:02


[TUTORIAL] Mensagens de aviso na caixa de resposta rápida Newsletter

Tópicos & Mensagens


Facilite o trabalho de sua equipe de moderação adicionando mensagens pré-definidas de alertas no SCeditor, o editor de mensagens.


--> Tutoriais, dicas e astúcias <--
Mensagens de aviso na caixa de resposta rápida



- Gerenciar as páginas JavaScript:
Precisamos definir um código JavaScript que mudará o link do botão Novo tópico em um determinado subfórum. Por isso, vamos acessar as páginas JavaScript do fórum.

Painel de Controle ->> Módulos ->> HTML & JAVASCRIPT ->> Gestão dos códigos JavaScript
[TUTORIAL] Mensagens de aviso na caixa de resposta rápida Painel13

[TUTORIAL] Mensagens de aviso na caixa de resposta rápida 110111[TUTORIAL] Mensagens de aviso na caixa de resposta rápida 398853 Título Correspondente ao nome da página JavaScript/jQuery que será criada.
[TUTORIAL] Mensagens de aviso na caixa de resposta rápida 110210[TUTORIAL] Mensagens de aviso na caixa de resposta rápida 398853 Localização São destinados os devidos locais para onde você aplicará os efeitos do JavaScript nos fóruns. No nosso caso, aplicaremos nos tópicos.
[TUTORIAL] Mensagens de aviso na caixa de resposta rápida 110310[TUTORIAL] Mensagens de aviso na caixa de resposta rápida 398853 Código JavaScript Campo destinado para receber o código JavaScript criado anteriormente.
[TUTORIAL] Mensagens de aviso na caixa de resposta rápida 110410[TUTORIAL] Mensagens de aviso na caixa de resposta rápida 398853 Habilitar o gerenciamento dos códigos JavaScript Ao selecionar a opção sim, estará ativando a função páginas Javascript no seu fórum. Se selecionar não, as páginas serão desabilitadas no fórum.


- Código JS a ser utilizado:
Você poderá aplicar o seguinte código:
Código:
jQuery(function(){
      jQuery(function(){
        jQuery('<a class="sceditor-button sceditor-button-sucesso" unselectable="on" title="Sucesso"><div unselectable="on" style="background-image:url(http://i.imgur.com/EISZPwN.png)">Sucesso</div></a>').insertBefore('.sceditor-button-size').click(function(){
                jQuery('#text_editor_textarea').sceditor("instance").insertText("[table class=sucesso][tr][td]","[/td][/tr][/table]");
        });
        jQuery('<a class="sceditor-button sceditor-button-alerta" unselectable="on" title="Alerta"><div unselectable="on" style="background-image:url(http://i.imgur.com/lMsD0nE.png)">Alerta</div></a>').insertAfter('.sceditor-button-sucesso').click(function(){
                jQuery('#text_editor_textarea').sceditor("instance").insertText("[table class=alerta][tr][td]","[/td][/tr][/table]");
        });
        jQuery('<a class="sceditor-button sceditor-button-aviso" unselectable="on" title="Aviso"><div unselectable="on" style="background-image:url(http://i.imgur.com/cI8SnOI.png)">Aviso</div></a>').insertAfter('.sceditor-button-alerta').click(function(){
                jQuery('#text_editor_textarea').sceditor("instance").insertText("[table class=aviso][tr][td]","[/td][/tr][/table]");
        });
        jQuery('<a class="sceditor-button sceditor-button-info" unselectable="on" title="Informação"><div unselectable="on" style="background-image:url(http://i.imgur.com/40zM1qS.png)">Informação</div></a>').insertAfter('.sceditor-button-aviso').click(function(){
                jQuery('#text_editor_textarea').sceditor("instance").insertText("[table class=infos][tr][td]","[/td][/tr][/table]");
        });
        });
      });

Caso queira modificar o código, use o Ctrl + F e busque pelos nomes de cada caixa:
Informação
Aviso
Alerta


- Adicionar o CSS:
Em seguida, acesse Painel de Controle > Visualização > Imagens e Cores > Cores > Folha de estilos CSS > e adicione este código CSS:
Código:
.sucesso, .alerta, .aviso, .infos {
padding: 8px 8px 8px 40px;
width: 99%;
text-shadow: 0 1px 0 #FFFAF1;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2) inset;
font-weight: bold;
border-radius: 3px 3px 3px 3px;
}
.sucesso {
background: url('http://cdn3.iconfinder.com/data/icons/fatcow/32x32_0020/accept.png') no-repeat 6px #effeb9;
border: 1px solid #9ac601;
color: #4F8A10;
}
.alerta {
background: url('http://cdn1.iconfinder.com/data/icons/nuvola2/32x32/actions/messagebox_warning.png') no-repeat 6px #fccac3;
border: 1px solid #db3f23;
color: #D8000C;
}
.aviso {
background: url('http://cdn3.iconfinder.com/data/icons/fatcow/32x32_0400/error.png') no-repeat 6px #ffeaa9;
border: 1px solid #f9b516;
color: #9F6000;
}
.infos {
background: url('http://cdn1.iconfinder.com/data/icons/musthave/24/Information.png') no-repeat 6px #d1e4f3;
border: 1px solid #4d8fcb;
color: #00529B;
}


  • Resultado:
    [TUTORIAL] Mensagens de aviso na caixa de resposta rápida Result54





© Fórum dos Fóruns


[TUTORIAL] Mensagens de aviso na caixa de resposta rápida Act_bottom Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
[Dúvida] Mensagens de aviso na caixa de resposta rápida
Shek

Shek
Membro profissional
Membro profissional

Masculino
Inscrito dia : 11/04/2009
Mensagens : 18517
Pontos ativos : 22294

https://shiftactive.blogspot.com https://www.facebook.com/ShiftActif https://twitter.com/ShiftActif

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


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