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

Olá amigo!

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">&nbsp;</a></li>
                        <li><a data-clicklaunch="getNotificationsList" id="notify_link" href="/search?search_id=watchsearch">&nbsp;</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>


Adicione no template Overall_header dentro da <div class="container_IE"> !

Abraços,

JS

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.

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

Eu confio em você e eu aguardo seus códigos pois eu queria muito que isso funcionasse como mostra na imagem a baixo!

Código em andamento e testes!

JS

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

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+'');
});

Beleza amigo, vou conferir os códigos assim que possível!

Abraços,

JS

Resultado

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=/,"")});

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?

Está faltando agora só adicionar o conteúdo que é atualizado em tempo real da barra forumeiros!

Trabalho em andamento...

JS

Tem que ser hoje!!!

Helix escreveu:Tem que ser hoje!!!

Aí já é pedir de mais....
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>

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?

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...

Não funcionou, acho que vou desistir.....

Helix escreveu:Não funcionou, acho que vou desistir.....

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!

JS

Amigo @Helix, ainda necessita da ajuda ?

Eu tive paciência e aguardei mas a ajuda nunca chegou correctamente. No entanto já não preciso disso agora, Pode fechar.

Obrigado