Relembrando a primeira mensagem :
TUTORIALNíveis de alerta v2
Depois da atualização que o código original parou de funcionar corretamente eu decidi atualizar o sistema o design e o funcionamento para isso eu fiz o up grade para a versão 2.
Funcionalidade: PunBB, PhpBB2, PhpBB3 e Invision
Vamos começar instalando o código CSS para dar um design legal para o efeito.
Basta colocar este código na folha de estilos CSS.
Pronto? Então clique em "Validar"
Agora vamos colocar o novo JavaScript.
Para encurtar o código e evitar problemas você pode adicionar este pequeno código no seu gestor de JavaScript.
Título * : Níveis de alerta v2 ( SGBR™ )
Investimento : Em todas as páginas
Código JavaScript * : Cole o código abaixo.
Ver os alertas em funcionamento: Demonstração.
Depois da atualização que o código original parou de funcionar corretamente eu decidi atualizar o sistema o design e o funcionamento para isso eu fiz o up grade para a versão 2.
Funcionalidade: PunBB, PhpBB2, PhpBB3 e Invision
Vamos começar instalando o código CSS para dar um design legal para o efeito.
Basta colocar este código na folha de estilos CSS.
- Código:
/*Níveis de Alerta*/
.alert{border:2px solid #000;margin:10px 0px;padding:15px 10px 15px 60px;color:#00529B;
background-repeat:no-repeat;background-position:10px center;background-color:#BDE5F8;
background-image:url('http://i42.servimg.com/u/f42/17/32/13/00/40px-i10.png');
-webkit-border-radius: 8px;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius: 8px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomright: 20px;
border-radius: 8px;
border-top-left-radius: 20px;
border-bottom-right-radius: 20px;
}
.alert2{border:2px solid #000;margin:10px 0px;padding:15px 10px 15px 60px;color:#00529B;
background-repeat:no-repeat;background-position:10px center;background-color:#ffcc00;
background-image:url('http://i42.servimg.com/u/f42/17/32/13/00/40px-a10.png');
-webkit-border-radius: 8px;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius: 8px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomright: 20px;
border-radius: 8px;
border-top-left-radius: 20px;
border-bottom-right-radius: 20px;
}
.alert3{border:2px solid #000;margin:10px 0px;padding:15px 10px 15px 60px;color:#00529B;
background-repeat:no-repeat;background-position:10px center;background-color:#ff5c5c;
background-image:url('http://i42.servimg.com/u/f42/17/32/13/00/120px-10.png');
-webkit-border-radius: 8px;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius: 8px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomright: 20px;
border-radius: 8px;
border-top-left-radius: 20px;
border-bottom-right-radius: 20px;
}
/*---/ Creditos: 2012 © Staffer Group BR™ /---*/
/*---/ http://staffergroupbr.stuning.net /---*/
Pronto? Então clique em "Validar"
Agora vamos colocar o novo JavaScript.
Para encurtar o código e evitar problemas você pode adicionar este pequeno código no seu gestor de JavaScript.
Título * : Níveis de alerta v2 ( SGBR™ )
Investimento : Em todas as páginas
Código JavaScript * : Cole o código abaixo.
- Código:
//Alerta 1
$(function(){
$(function(){
$('<a class="sceditor-button" unselectable="on"><div unselectable="on" style="background-image:url(http://i42.servimg.com/u/f42/17/32/13/00/40px-i10.png)">a</div></a>').insertBefore('.sceditor-button-size').click(function(){
$('#text_editor_textarea').sceditor("instance").insertText("<div class=\'alert\'>Alerta 1</div>");
});
});
});
//Alerta 2
$(function(){
$(function(){
$('<a class="sceditor-button" unselectable="on"><div unselectable="on" style="background-image:url(http://i42.servimg.com/u/f42/17/32/13/00/40px-a10.png)">a</div></a>').insertBefore('.sceditor-button-size').click(function(){
$('#text_editor_textarea').sceditor("instance").insertText("<div class=\'alert2\'>Alerta 2</div>");
});
});
});
//Alerta 3
$(function(){
$(function(){
$('<a class="sceditor-button" unselectable="on"><div unselectable="on" style="background-image:url(http://i42.servimg.com/u/f42/17/32/13/00/120px-10.png)">a</div></a>').insertBefore('.sceditor-button-size').click(function(){
$('#text_editor_textarea').sceditor("instance").insertText("<div class=\'alert3\'>Alerta 3</div>");
});
});
});
- Resultado: (botões)
Ver os alertas em funcionamento: Demonstração.