[TUTORIAL] Mensagens de aviso na caixa de resposta rápida
Página 1 de 1 • Compartilhe
[TUTORIAL] Mensagens de aviso na caixa de resposta rápida
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
Mensagens de aviso na caixa de resposta rápida
1º - 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
Título Correspondente ao nome da página JavaScript/jQuery que será criada. |
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. |
Código JavaScript Campo destinado para receber o código JavaScript criado anteriormente. |
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. |
2º - 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
3º - 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:
© 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] Mensagens de aviso na caixa de resposta rápida |
Tópicos semelhantes
» Aviso na caixa de resposta rápida
» [TUTORIAL] Aviso nas caixas de resposta rápida
» Ícones de mensagens na caixa de resposta rápida
» Ícones de mensagens sobre a caixa de resposta rápida
» [TUTORIAL] Definir ícone da mensagem na caixa de resposta rápida
» [TUTORIAL] Aviso nas caixas de resposta rápida
» Ícones de mensagens na caixa de resposta rápida
» Ícones de mensagens sobre a caixa de resposta rápida
» [TUTORIAL] Definir ícone da mensagem na caixa de resposta rápida
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos