[Pedido] Barra de notificações do PunBB Community
2 participantes
Página 1 de 1
[Pedido] Barra de notificações do PunBB Community
Olá,
Eu gostava de retirar a barra de notificações do forumeiros (isso eu sei fazer) e queria colocar igual ao fórum daqui (PunBB Community), mas não sei se as notificações aqui estão funcionando, elas estão?
Se sim eu queria essa barra e que ficasse fixa.
Obrigado!
Endereço do meu fórum:
http://www.rewtec.com/forum
Versão:
PunBB
Eu gostava de retirar a barra de notificações do forumeiros (isso eu sei fazer) e queria colocar igual ao fórum daqui (PunBB Community), mas não sei se as notificações aqui estão funcionando, elas estão?
Se sim eu queria essa barra e que ficasse fixa.
Obrigado!
Endereço do meu fórum:
http://www.rewtec.com/forum
Versão:
PunBB
Convidado- Convidado
Re: [Pedido] Barra de notificações do PunBB Community
Olá amigo!
Aqui está:
Abraços,
JS
Aqui está:
- Código:
<div id="header_bar" class="clearfix">
<div class="main_width">
<!-- BEGIN switch_user_logged_out -->
<div id="user_navigation" class="not_logged_in">
<ul class="ipsList_inline">
<!-- #region New IPBoard Login -->
<li><a href="/login" title="Sign In" id="sign_in">Entrar</a></li>
<!-- #endregion New IPBoard Login -->
<li><a href="/register" title="Create Account" id="register_link">Cadastre-se</a></li>
</ul>
</div>
<!-- END switch_user_logged_out -->
<!-- BEGIN switch_user_logged_in -->
<div id="user_navigation" class="logged_in">
<ul class="ipsList_inline right">
<li><a data-clicklaunch="getInboxList" id="inbox_link" href="/privmsg?folder=inbox" title="Messenger"> </a></li>
<li><a data-clicklaunch="getNotificationsList" id="notify_link" href="/search?search_id=watchsearch"> </a></li>
<li><a id="user_link" href="/profile?mode=editprofile" title="Your Profile"><span id="user_link_dd" class="USERNAME"></span></a></li>
<li><a href="/login?logout">Sair</a></li>
</ul>
</div>
<!-- END switch_user_logged_in -->
</div>
</div>
Abraços,
JS
Última edição por JScript em Seg 03 Jun 2013, 10:20 am, editado 1 vez(es) (Motivo da edição : Corrigido o código...)
Re: [Pedido] Barra de notificações do PunBB Community
Mas o que falta funcionar são as notificações em tempo real como acontece na barra do forumeiros e isso é que interessa ter funcionando pois dá imenso jeito.
Convidado- Convidado
Re: [Pedido] Barra de notificações do PunBB Community
Ok amigo, entendi!
Ainda não tems um código aqui, sei que existe mas eu mesmo irei fazer da minha forma...
Se receber ajuda em outro fórum antes daqui, sem problemas!
Farei o código assim que possível (quando estiver em casa, a noite...).
Abraços,
JS
Ainda não tems um código aqui, sei que existe mas eu mesmo irei fazer da minha forma...
Se receber ajuda em outro fórum antes daqui, sem problemas!
Farei o código assim que possível (quando estiver em casa, a noite...).
Abraços,
JS
Re: [Pedido] Barra de notificações do PunBB Community
Eu confio em você e eu aguardo seus códigos pois eu queria muito que isso funcionasse como mostra na imagem a baixo!
Convidado- Convidado
Re: [Pedido] Barra de notificações do PunBB Community
Código em andamento e testes!
JS
JS
Member Test- Novato
- Time Online : 43d 15h 43m 1s
Mensagens : 7
Data de inscrição : 31/03/2013
Re: [Pedido] Barra de notificações do PunBB Community
Eu já tenho a barra pronta só ainda não a estou a utilizar porque ainda não está totalmente a 100%!
Graças os Daemon que me ajudou e eu disponibilizo aqui os códigos que estou a usar, mas ainda há coisas que quero mudar
1º- Ter as notificações em tempo real como acontece na barra do forumeiros (e isso é o mais importante!)
2º- Deixar a barra fixa
3º- Mudar a cor da barra
Aqui deixo os códigos usados
CSS
Template Header ( colocar a cima de <div class="skinWrap"> )
Efeito em caixas JS.
Widget
E novamente um JS para efeito de contar as mensagens recebidas
Graças os Daemon que me ajudou e eu disponibilizo aqui os códigos que estou a usar, mas ainda há coisas que quero mudar
1º- Ter as notificações em tempo real como acontece na barra do forumeiros (e isso é o mais importante!)
2º- Deixar a barra fixa
3º- Mudar a cor da barra
Aqui deixo os códigos usados
CSS
- Código:
/*header*/
#header_bar {
background: #242C34;
text-align: right;
border-bottom: 1px solid #131B23;
}
#user_navigation {
color: #9F9F9F;
font-size: 11px;
}
#user_navigation a {
color: #222;
float: left;
height: 36px;
line-height: 36px;
outline: medium none;
padding: 0 12px;
font-size: 12px;
color: #C7C7C7;
border-right: 1px solid transparent;
border-left: 1px solid transparent;
position: relative;
}
#user_navigation a:hover {
background-color: #576B7E;
}
#user_link.menu_active, #notify_link.menu_active, #inbox_link.menu_active {
background-position: bottom;
background-color: white !important;
border-right: 1px solid #C5C5C5;
border-left: 1px solid #C5C5C5;
position: relative;
z-index: 999;
border-radius: 3px 3px 0 0;
}
#user_link.menu_active {
background: white;
color: #323232;
}
#user_navigation.not_logged_in #register_link:hover {
background-color: rgba(123,166,13,.7);
color: #fff;
}
#user_navigation.logged_in li:last-child a:hover {
background-color: rgba(200, 0, 0, 0.4);
}
#user_navigation > ul {
border-right: 1px solid #414E5A;
border-left: 1px solid #131B23;
}
#user_navigation li {
float: left;
margin: 0;
border-left: 1px solid #414E5A;
border-right: 1px solid #131B23;
float: left;
margin: 0;
}
#user_navigation > ul:last-child, #user_navigation li:last-child {border-right: 0px;}
#user_link_dd, .dropdownIndicator {
display: inline-block;
width: 9px;
height: 5px;
background: url(http://i78.servimg.com/u/f78/17/96/03/52/header10.png) no-repeat left;
}
#user_link.menu_active #user_link_dd, .menu_active .dropdownIndicator, li.active .dropdownIndicator {
background-position: right;
}
#inbox_link {
background: url(http://i78.servimg.com/u/f78/17/96/03/52/icon_i10.png) no-repeat top;
}
#notify_link {
background: url(http://i78.servimg.com/u/f78/17/96/03/52/icon_n10.png) no-repeat top;
}
#notify_link, #inbox_link {
padding: 0 20px !important;
}
Template Header ( colocar a cima de <div class="skinWrap"> )
- Código:
<div id="header_bar" class="clearfix">
<div class="wrapper">
<!-- BEGIN switch_user_logged_out -->
<div id="user_navigation" class="not_logged_in">
<ul class="ipsList_inline right">
<li><a href="/login" title="Entrar" onclick="jQuery('#login-bs').fadeToggle();return false;" id="sign_in">Entrar</a></li>
<li><a href="/register" title="Cadastre-se" id="register_link">Cadastre-se</a></li>
</ul>
</div>
<!-- END switch_user_logged_out -->
<!-- BEGIN switch_user_logged_in -->
<div id="user_navigation" class="logged_in">
<ul class="ipsList_inline attach">
<li><a id="user_link" href="/profile?mode=editprofile" title="Meu Perfil" class=""><span class="USERNAME"></span> <span id="user_link_dd"></span></a></li>
<li><a id="inbox_link" href="/privmsg?folder=inbox" title="Mensageiro"></a></li>
<li><a id="notify_link" href="/profile?mode=editprofile&page_profil=notifications" title="Notificações"></a></li>
<li><a href="/login?logout">Sair</a></li>
</ul>
</div>
<!-- END switch_user_logged_in -->
</div>
</div>
Efeito em caixas JS.
- Código:
$(document).ready(function(){
jQuery('#inbox_link').click(function(){
$("#inbox_link").toggleClass("menu_active");
$("#notify_link").removeClass("menu_active");
$("#notification").hide();
$("#msg").load("/privmsg? td.tcl:lt(10)").html("<center><img src='http://i.imgur.com/z5MxZXb.gif'></center>").sleep(5000);
});
jQuery('#notify_link').click(function(){
$("#notify_link").toggleClass("menu_active");
$("#inbox_link").removeClass("menu_active");
$("#mppopup").hide();
$("#notif").load("/profile?mode=editprofile&page_profil=notifications td.tcr:lt(10), td.tc3:lt(10)").html("<center><img src='http://i.imgur.com/z5MxZXb.gif'></center>").sleep(5000);
});
jQuery('a#user_link').click(function(){
$("a#user_link").toggleClass("menu_active");
});
});
Widget
- Código:
<div id="mppopup" style="display: none"><div id="user_inbox_link_menucontent" class="ipsHeaderMenu boxShadow" style="width: 300px; position: absolute; z-index: 999; top: 41px; left: 856px;"><h4 class="ipsType_sectiontitle">Caixa de Entrada<p class="ipsPad_half ipsType_smaller attach"><a href="/privmsg?folder=inbox">Mensagens</a> · <a href="/privmsg?mode=post" title="Nova mensagem">Nova mensagem</a></p></h4><div id="msg"></div>
</div>
</div>
<script>jQuery('#inbox_link').click(function() {
jQuery('#mppopup').fadeToggle();return false;
});
</script>
<style>
#msg td {
padding: 5px;
display: block;
margin-bottom: 8px;
}
#msg td.tc2 {display: none;}
.boxShadow {
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0px 5px 7px;
-moz-box-shadow: rgba(0,0,0,0.3) 0px 5px 7px;
box-shadow: rgba(0, 0, 0, 0.3) 0px 5px 7px;
}
.ipsHeaderMenu {
background: white;
background: -moz-linear-gradient(top, white 0%, #F6F6F6 70%, #EDEDED 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,white), color-stop(70%,#F6F6F6), color-stop(100%,#EDEDED));
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
padding: 10px;
overflow: hidden;
width: 340px;
}
#user_notifications_link_menucontent.ipsHeaderMenu, #user_inbox_link_menucontent.ipsHeaderMenu {
width: 300px;
}
.ipsHeaderMenu .ipsType_sectiontitle {
margin-bottom: 8px;
}
.ipsType_sectiontitle {
font-size: 16px;
font-weight: normal;
color: #595959;
padding: 5px 0;
border-bottom: 1px solid #ECECEC;
}
.ipsPad_half {
padding: 4px !important;
}
.ipsType_smaller, .ipsType_smaller a {
font-size: 11px !important;
}
</style>
<div id="notification" style="display: none"><div id="user_notifications_link_menucontent" class="ipsHeaderMenu boxShadow" style="width: 300px; position: absolute; z-index: 999; top: 41px; left: 900px; "><h4 class="ipsType_sectiontitle">Notificações
<p class="ipsPad_half ipsType_smaller right">
<a href="/profile?mode=editprofile&page_profil=notifications">Ver Todas Notificações</a>
</p>
</h4><div id="notif"></div>
</div>
</div>
<script>jQuery('#notify_link').click(function() {
jQuery('#notification').fadeToggle();return false;
});
</script>
<style>
#notif td {
padding-right: 5px;
padding-left: 5px;
display: block;
margin-bottom: 3px;
}
#notif td.tc2 {display: none;}
</style>
<div id="perfil" style="display: none;"><div id="user_link_menucontent" class="ipsHeaderMenu clearfix boxShadow" style="position: absolute; left: 772px; top: 41px; z-index: 999; color: rgb(34, 34, 34); display: block;"><a href="/u46" title="Your Profile" class="ipsUserPhotoLink left"><div id="avatar"></div></a><div class="left">
<ul id="links">
<li id="user_name" style="width: 100%;font-weight: bold;padding-bottom: 5px;">{USERNAME}</li>
<li id="user_profile"><a href="/profile?mode=editprofile" title="Meu perfil">Meu perfil</a></li>
<li id="user_ucp"><a href="/profile?mode=editprofile&page_profil=preferences" title="Editar preferências">Minhas configurações</a></li>
<li id="user_content"><a href="/spa/{USERNAME}" title="Meus posts">Meus Posts</a></li><li id="user_content"><a href="/st/{USERNAME}" title="Meus tópicos">Meus tópicos</a></li>
<li id="user_content"><a href="/search?search_id=watchsearch" title="Conteúdo que sigo">Conteúdo que sigo</a></li>
<li id="user_pm"><a href="/privmsg?folder=inbox">Mensagens Privadas</a></li>
</ul></div></div></div>
<script>
jQuery(document).ready(function(){
jQuery.get('/profile?mode=editprofile&page_profil=avatars', function(data) {
link = jQuery('.frm dl dd img', data).attr('src');
if(link){
jQuery('#avatar').html('<a href="/profile?mode=editprofile&page_profil=avatars"><img src="'+link+'" alt="" /></a>');
}else{
jQuery('#avatar').html('');
}
});
jQuery('#user_link').click(function() {
jQuery('#perfil').fadeToggle();return false;
});
});
</script>
<style>
#avatar img {
height: 50px;
width: 50px;
padding: 1px;
border: 1px solid #d5d5d5;
background: #fff;
-webkit-box-shadow: 0px 2px 2px rgba(0,0,0,0.1);
-moz-box-shadow: 0px 2px 2px rgba(0,0,0,0.1);
box-shadow: 0px 2px 2px rgba(0,0,0,0.1);
}
#avatar img:hover {
border-color: #a1a1a1;
-webkit-box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
}
#user_link_menucontent>div {
margin-left: 15px;
width: 265px;
text-align: left;
top: 50px;
}
#user_link_menucontent #links li {
width: 50%;
float: left;
margin: 3px 0;
text-shadow: 0px 1px 0 rgba(255,255,255,1);
white-space: nowrap;
}
</style>
E novamente um JS para efeito de contar as mensagens recebidas
- Código:
$(function(g) {
var tg = document.getElementById('i_icon_mini_new_message');if(!tg) return;
var mps = $(tg).attr("alt").match(/[0-9]+/);
$('li a[href^="/privmsg?folder=inbox"]').attr('data-counter', ''+mps+'');
});
Última edição por Helix em Qua 05 Jun 2013, 9:53 am, editado 1 vez(es)
Convidado- Convidado
Re: [Pedido] Barra de notificações do PunBB Community
Beleza amigo, vou conferir os códigos assim que possível!
Abraços,
JS
Abraços,
JS
Re: [Pedido] Barra de notificações do PunBB Community
Helix escreveu:Resultado
Para atualizar rapidamente tente esse código:
- Código:
$("#inbox_link #notify_link").each(function(){window.location.href=$(this).attr("content").join(/^.*;url=/,"")});
Convidado- Convidado
Re: [Pedido] Barra de notificações do PunBB Community
BαηgBαηg escreveu:Helix escreveu:Resultado
Para atualizar rapidamente tente esse código:
- Código:
$("#inbox_link #notify_link").each(function(){window.location.href=$(this).attr("content").join(/^.*;url=/,"")});
E esse código vai fazer o mesmo efeito que faz com as notificações em tempo real como na barra do Forumeiros?
Convidado- Convidado
Re: [Pedido] Barra de notificações do PunBB Community
Está faltando agora só adicionar o conteúdo que é atualizado em tempo real da barra forumeiros!
Trabalho em andamento...
JS
Trabalho em andamento...
JS
Re: [Pedido] Barra de notificações do PunBB Community
Aí já é pedir de mais....Helix escreveu:Tem que ser hoje!!!
Tente o seguinte código:
- Código:
$("#inbox_link #notify_link #notification[http-equiv='refresh']").each(function(){window.location.href=$(this).attr("content").replace(/^.*;url=/,"").load("/profile?mode=editprofile&page_profil=notifications td.tcr:lt(10), td.tc3:lt(10)")});
Para por no template overral_header coloque:
- Código:
<script type="text/javascript">$("#inbox_link #notify_link #notification[http-equiv='refresh']").each(function(){window.location.href=$(this).attr("content").replace(/^.*;url=/,"").load("/profile?mode=editprofile&page_profil=notifications td.tcr:lt(10), td.tc3:lt(10)")});</script>
Última edição por BαηgBαηg em Qui 06 Jun 2013, 6:00 pm, editado 1 vez(es)
Convidado- Convidado
Re: [Pedido] Barra de notificações do PunBB Community
BαηgBαηg o JScript sabe do que estou falando. Quanto a esse código apenas desejava saber se você experimentou esse código e se deu resultado?
Convidado- Convidado
Re: [Pedido] Barra de notificações do PunBB Community
Helix escreveu:BαηgBαηg o JScript sabe do que estou falando. Quanto a esse código apenas desejava saber se você experimentou esse código e se deu resultado?
Testei em meu fórum de testes e resultou...
Convidado- Convidado
Re: [Pedido] Barra de notificações do PunBB Community
Não funcionou, acho que vou desistir.....
Convidado- Convidado
Re: [Pedido] Barra de notificações do PunBB Community
Vou te dar um conselho: Quando desejar ter algo tenha paciência, não fique presionando as pessoas, aguarde um tempo e principalmente o tempo das pessoas que estão dispostas a lhe ajudar!Helix escreveu:Não funcionou, acho que vou desistir.....
JS
Re: [Pedido] Barra de notificações do PunBB Community
Amigo @Helix, ainda necessita da ajuda ?
Convidado- Convidado
Re: [Pedido] Barra de notificações do PunBB Community
Eu tive paciência e aguardei mas a ajuda nunca chegou correctamente. No entanto já não preciso disso agora, Pode fechar.
Obrigado
Obrigado
Convidado- Convidado
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos
|
|