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

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

Principal Contribuidor

TUTORIAL - [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 - [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 - [TUTORIAL] Mensagens de aviso na caixa de resposta rápida Painel13

TUTORIAL - [TUTORIAL] Mensagens de aviso na caixa de resposta rápida 110111TUTORIAL - [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 - [TUTORIAL] Mensagens de aviso na caixa de resposta rápida 110210TUTORIAL - [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 - [TUTORIAL] Mensagens de aviso na caixa de resposta rápida 110310TUTORIAL - [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 - [TUTORIAL] Mensagens de aviso na caixa de resposta rápida 110410TUTORIAL - [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 - [TUTORIAL] Mensagens de aviso na caixa de resposta rápida Result54





© Fórum dos Fóruns


TUTORIAL - [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
Principal Contribuidor
Principal Contribuidor

Membro desde : 11/04/2009
Mensagens : 18896
Pontos : 22793

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

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo


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