Publicidade na Web
Gostaria de reagir a esta mensagem? Crie uma conta em poucos cliques ou inicie sessão para continuar.

[TUTORIAL] Mensagens de Aviso

Publicidade na Web :: Publicidade na WEB :: Tutoriais, dicas e astúcias

Ir para baixo

Tutorial [TUTORIAL] Mensagens de Aviso

Mensagem por Michelangelo Sex Ago 09, 2013 7:41 am


[TUTORIAL] Mensagens de Aviso Alerte10
[TUTORIAL] Mensagens de Aviso

Nesse tutorial estarei ensinando como criar mensagens de aviso.

Funcional em PhpBB2, PhpBB3 e PUNBB



--> Tutoriais, dicas e astúcias <--
[TUTORIAL] Mensagens de Aviso



1º - Adicionar CSS
Painel de Controle [TUTORIAL] Mensagens de Aviso 633772Visualizações [TUTORIAL] Mensagens de Aviso 633772Imagens e Cores [TUTORIAL] Mensagens de Aviso 633772Cores [TUTORIAL] Mensagens de Aviso 633772Folha de Estilo CSS

Código:
   .info, .success, .warning, .error, .mes, .tips {
    margin: 10px 0px;
    padding: 10px 10px 15px 50px;
    background-repeat: no-repeat;
    background-position: 10px center;
    border-radius: 4px 4px 4px;
    }
    .info{
    background-color:#d1e4f3;
    background-image:url("http://i10.servimg.com/u/f10/17/41/76/40/inform10.png");
    color:#00529B;
    border:1px solid #4d8fcb;
    }
    .success{
    background-color:#effeb9;
    background-image:url("http://i10.servimg.com/u/f10/17/41/76/40/accept10.png");
    color:#4F8A10;
    border:1px solid #9ac601;
    }
    .warning{
    background-color:#ffeaa9;
    background-image:url("http://i10.servimg.com/u/f10/17/41/76/40/error10.png");
    color:#9F6000;
    border:1px solid #f9b516;
    }
    .error{
    background-color:#fccac3;
    background-image:url("http://i10.servimg.com/u/f10/17/41/76/40/critic10.png");
    color:#D8000C;
    border:1px solid #db3f23;
    }
    .mes{
    background-color:#F2F2F2;
    background-image:url("http://i10.servimg.com/u/f10/17/41/76/40/mail10.png");
    border:1px solid #AAAAAA;
    color:#545454;
    }
    .tips{
    background-color:#FEEAC9;
    background-image:url("http://i10.servimg.com/u/f10/17/41/76/40/light10.png");
    border:1px solid #D38E49;
    color:#bb640c;
    }
[TUTORIAL] Mensagens de Aviso 633772Valide


2º - Adicionar JavaScript
Painel de Controle [TUTORIAL] Mensagens de Aviso 633772Módulos [TUTORIAL] Mensagens de Aviso 633772HTML & JavaScript [TUTORIAL] Mensagens de Aviso 633772Novo Código JavaScript

Título: Escolha Livre
Investimento: Marque em "Todas as Páginas"
Código do JavaScript: Coloque o código abaixo

Código:
   jQuery(document).ready(function() {
    jQuery('#text_editor_select_controls #other button:eq(0)').after('<br><button onclick="info();return false" style="color:#4d8fcb"><img src="http://i10.servimg.com/u/f10/17/41/76/40/inform10.png" alt="" width="16" height="16" class="acende" /> INFORMAÇÃO</button>');
    jQuery('#text_editor_select_controls #other button:eq(1)').after('<br><button onclick="success();return false" style="color:#9ac601"><img src="http://i10.servimg.com/u/f10/17/41/76/40/accept10.png" alt="" width="16" height="16" class="acende" /> SUCESSO</button>');
    jQuery('#text_editor_select_controls #other button:eq(2)').after('<br><button onclick="warning();return false" style="color:#f9b516"><img src="http://i10.servimg.com/u/f10/17/41/76/40/error10.png" alt="" width="16" height="16" class="acende" /> ATENÇÃO</button>');
    jQuery('#text_editor_select_controls #other button:eq(3)').after('<br><button onclick="error();return false" style="color:#db3f23"><img src="http://i10.servimg.com/u/f10/17/41/76/40/critic10.png" alt="" width="16" height="16" class="acende" /> ERRO</button>');
    jQuery('#text_editor_select_controls #other button:eq(4)').after('<br><button onclick="mes();return false" style="color:#AAAAAA"><img src="http://i10.servimg.com/u/f10/17/41/76/40/mail10.png" alt="" width="16" height="16" class="acende" /> MENSAGEM</button>');
    jQuery('#text_editor_select_controls #other button:eq(5)').after('<br><button onclick="tips();return false" style="color:#D38E49"><img src="http://i10.servimg.com/u/f10/17/41/76/40/light10.png" alt="" width="16" height="16" class="acende" /> IDÉIA</button>');
    });
    function info(){
    bbfontstyle('<div class="info">Informação: ','</div>');selectWysiwyg(this,'other');return false}
    function success(){
    bbfontstyle('<div class="success">Sucesso: ','</div>');selectWysiwyg(this,'other');return false}
    function warning(){
    bbfontstyle('<div class="warning">Atenção: ','</div>');selectWysiwyg(this,'other');return false}
    function error(){
    bbfontstyle('<div class="error">Erro: ','</div>');selectWysiwyg(this,'other');return false}
    function mes(){
    bbfontstyle('<div class="mes">Mensagem: ','</div>');selectWysiwyg(this,'other');return false}
    function tips(){
    bbfontstyle('<div class="tips">Idéia: ','</div>');selectWysiwyg(this,'other');return false}
[TUTORIAL] Mensagens de Aviso 633772Salve!


3º - Resultado
[TUTORIAL] Mensagens de Aviso M3IteR9



  • Créditos?
    clubteen9x





© Publicidade na WEB


[TUTORIAL] Mensagens de Aviso Act_bottom Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
[TUTORIAL] Mensagens de Aviso
Michelangelo
Michelangelo
Admin

Masculino
Mensagens : 30
Reputação : 4

https://publicidadenaweb.forumeiros.com

Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

Publicidade na Web :: Publicidade na WEB :: Tutoriais, dicas e astúcias

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