Informações:
Autor: Premotheus
Funcionalidade: PunBB

---

Trago mais um tutorial para vocês. Desta vez, é sobre um box ao receber uma nova mensagem.
Lembrando que está é apenas uma demo, na próxima versão virá já com o autor do tópico e o nome do mesmo.

Acesse:

Painel de Controle ☛ Modulos ☛ HTML e Javascript ☛ Gestão dos codigos Javascript

E crie um novo Javascript com investimento em todas as paginas com esse codigo:

Código:


// Box to receive private messages
// Created by: Premotheus ( Target )
// All rights reserved - Copyright
// Update: 12/09/2014 - 11:30
//

$(document).ready(function(){

$.get('/privmsg?folder=inbox', function ( bs ) {
var bestskins = $('.pun .main .main-content table.table tbody.statused td.tcl.tdtopics:eq(0)', bs).html();
    if($('body #i_icon_mini_new_message').length && $('body #i_icon_mini_new_message') != null){
var mp_new = $('#i_icon_mini_new_message').attr("alt").match(/[0-9]+/);

$('body').prepend('
<div class="mpnew_targetcode" id="boxe_targetcode">
 <div class="headermpnew" id="textotarget">
<span id="msg_header"> <span>Você </span>   <span>recebeu </span>           uma nova mensagem</span> </div><a href="#cls" id="close_window" class="closein"> X </a> <div class="infomp">  Você tem '+ mp_new +' mensagem(ns) não lida(s)</div><br /><div class="newmp_bs">  '+ bestskins +' </div><br /><br /> <a href="/privmsg?folder=" class="restantemp"> Ver mais!</a></div><div class="forabg"></div>  ');

$('.newmp_bs a.topictitle').after('<br />');

$('div.infomp').css('cssText', 'color: #fff !important');

$('.closein, .forabg').click(function(){
$('.mpnew_targetcode, .forabg').hide();
});

    }

});

    });

Feito isto acesse:

Painel de Controle ☛ Visualização ☛ Imagens e Cores ☛ Cores ☛ Folha de Estilo

E adicione o seguinte codigo na sua folha de estilo:

Código:


/*************
[UPDATE] - Receive private messages
Date update: 12/9/14
Creator: Premotheus (Target)
Name: Box ao receber nova mensagem privada (Atualização)
CopyRight - BestSkins - Premotheus(C)
Don't remove the copyright!
**************/

/*****
New mp
******/
.newmp_bs span.status {
    display: none;
}

.newmp_bs a.topictitle {
    color: #fff;
    font-size: 12px;
}

.newmp_bs {
    color: #fff;
  display: inline-block;
}

.newmp_bs a {
    font-size: 11px;
    color: #F0F0F0;
}

/*****
Receive private messages
*****/
span#msg_header {
    font-size  : 12px;
    text-transform : uppercase;
    color : #F1F1F1;
}

.mpnew_targetcode {
    position : fixed;
    left : 40%;
    top : 33%;
    background : rgba(0, 0, 0, 0.8);
    border : 5px solid #000;
    padding : 20px;
    z-index : 999;
    border-radius : 5px;
    width : 280px;
    height : 110px
}

.headermpnew {
    font-size : 16px;
    padding : 2px;
   margin-top : -11px;
   margin-bottom : 12px;
}

a#close_window {
    float : right;
   width : 5px;
    height : 5px;
    color : red;
    font-size : 15px;
    font-family : serif;
}

a.restantemp {
    color : #ECECEC;
    text-transform : uppercase;
    font-size : 10px;
    margin-top : 15px;
    padding : 2px;
    float : left;
    margin-left : -1px;
}

.infomp {
    padding : 2px;
    font-size : 12px;
    float : left;
}

.forabg {
    position : fixed;
    background : rgba(0, 0, 0, 0.4);
    width : 100%;
    height : 100%;
    top : 0px;
    z-index : 1;
}

Salve e estará pegando.

Resultado: