Staffer Group BR™

Fórum interativo totalmente gratuito!

/* Widget *//* Resposta rápida bloqueada */
Cadastre-se
→ Crie a sua conta

 VisualizaçõesPermissão deste fórum:
Você não pode responder aos tópicos neste fórum


CurtirDiretório deste fórum:
Fóruns » Principal »  » Tutoriais » Tutoriais sobre programação

#1
 D'Leandro™

avatar
Fundador


[Tutorial] Alertas Descritivos


DescriçãoEste código gera uma serie de alertas ótimos para a moderação e alertas no fórum.



Funcionalidade: PunBB PhpBB2 PhpBB3 Invision

--> Código CSS <--
Código:
/*Alertas Descritivos*/
.info, .success, .warning, .error, .mes, .tips, .chat, .cnb {
            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://cdn1.iconfinder.com/data/icons/musthave/24/Information.png");
            color: #00529B;
            border: 1px solid #4d8fcb;
        }
        .success {
            background-color: #effeb9;
            background-image: url("http://cdn3.iconfinder.com/data/icons/fatcow/32x32_0020/accept.png");
            color: #4F8A10;
            border: 1px solid #9ac601;
        }
        .warning {
            background-color: #ffeaa9;
            background-image: url("http://cdn3.iconfinder.com/data/icons/fatcow/32x32_0400/error.png");
            color: #9F6000;
            border: 1px solid #f9b516;
        }
        .error {
            background-color: #fccac3;
            background-image: url("http://cdn1.iconfinder.com/data/icons/CrystalClear/32x32/actions/messagebox_critical.png");
            color: #D8000C;
            border: 1px solid #db3f23;
        }
        .mes {
            background-color: #F2F2F2;
            background-image: url("http://cdn2.iconfinder.com/data/icons/fugue/bonus/icons-32/mail.png");
            border: 1px solid #AAAAAA;
            color: #545454;
        }
        .tips {
            background-color: #FEEAC9;
            background-image: url("http://cdn5.iconfinder.com/data/icons/woocons1/Light%20Bulb%20On.png");
            border: 1px solid #D38E49;
            color: #bb640c;
        }
        .chat {
            background-color: #daecfb;
            background-image: url("http://cdn2.iconfinder.com/data/icons/drf/PNG/iChat.png");
            border: 1px solid #2078c9;
            color: #066ac4;
        }
/*---/ Creditos: 2012 ©️ Staffer Group BR™️ /---*/
/*---/  http://staffergroupbr.stuning.net /---*/

--> Codigo JavaScript <--
Código:
    jQuery(document).ready(function() {
    if(jQuery('.i_icon_ip').length){
        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">','</div>');selectWysiwyg(this,'other');return false}
        function success(){
        bbfontstyle('<div class="success">','</div>');selectWysiwyg(this,'other');return false}
        function warning(){
        bbfontstyle('<div class="warning">','</div>');selectWysiwyg(this,'other');return false}
        function error(){
        bbfontstyle('<div class="error">','</div>');selectWysiwyg(this,'other');return false}
        function mes(){
        bbfontstyle('<div class="mes">','</div>');selectWysiwyg(this,'other');return false}
        function tips(){
        bbfontstyle('<div class="tips">','</div>');selectWysiwyg(this,'other');return false}

--> Resultado Final<--

Clique na imagem para visualizar ▲


Desenvolvido por D'Leandro™ | clubteen9x
Editado e Postado por 2012 © Staffer Group BR™
[/center]
Ver perfil do usuário

#2
 Narutofake

avatar
Membro
zica obg parabens vc e otimo
Ver perfil do usuário

#3
 » ƒαѕт ϟ

avatar
Membro
Meus parabens sempre com codigos otimos ,
Ver perfil do usuário

#4
 azure

avatar
Membro
como voce colocou esse efeito tooltip nos comentarios ?
Ver perfil do usuário

#5
 D'Leandro™

avatar
Fundador
como voce colocou esse efeito tooltip nos comentarios ?

Desculpe, este é um código particular do nosso forum, acho que farei um tutorial daqui algum tempo, mas porinquanto não.
Ver perfil do usuário

#6
 Bookmarlucas654

avatar
Membro
Eba, esse era o que eu queria =D
Ver perfil do usuário

#7
 ~[B]art

avatar
Membro
Exelente! Smiley
Ver perfil do usuário

#8
 Narutofake

avatar
Membro
nossa zica nunca vi isso valeu ae -'
Ver perfil do usuário

#9
 Vic

avatar
Membro
Muito bom!
Ver perfil do usuário

#10
 Gmtp

avatar
Membro
Olá

Maneiro, quero usar, é muito quebra galho

Até mais
Ver perfil do usuário

#11
 Otaku Chan

avatar
Membro
Otimo Codigo, eu lembro que estes alertas eram utilizados aqui antes!
Obrigado irei usa-los agora.

Obs: Adorei o estilo do tutorial!
Ver perfil do usuário

#12
 fojogo

avatar
Membro
Otimo está de parabens
Ver perfil do usuário

#13
 Jose Hamizaki

avatar
Membro
Está otimo, parabens.
Ver perfil do usuário

#14
 gui8920

avatar
Membro
Muito bom.. será útil :)
Ver perfil do usuário

#15
 Gmtp

avatar
Membro
Olá

Maneiro, quero usar, é muito quebra galho

Até mais
Ver perfil do usuário

#16
 Stark'

avatar
Membro
cODIGO SIMPLES
Ver perfil do usuário

#17
 Chorão

avatar
Membro
Interessante vo Ver como fica!
Ver perfil do usuário

#18
 DaViD-DaViD

avatar
Membro
Obrigado Por Compartilhar!
Ver perfil do usuário

#19
 JQuery

avatar
Membro
oi
Ver perfil do usuário

#20
 JQuery

avatar
Membro
obrigado vlw
Ver perfil do usuário

#21
 Vyper

avatar
Novato
Gostei muito obrigado
Ver perfil do usuário

#22
 Master Publicitario

avatar
Membro
Muito bom!
Ver perfil do usuário

#23
 Conteúdo patrocinado