Listagem de notificações

Detalhes da questão

Endereço do fórum: http://rikudourpg.forumeiros.com/
Versão do fórum: ModernBB

Descrição

Olá! Gostaria de colocar a barra de notificações em um botão do meu Menu. Usei esse tutorial como base: https://ajuda.forumeiros.com/t99196-tutorial-notificacoes-ao-estilo-do-facebook?highlight=notifica%C3%A7%C3%B5es

Obrigado desde já, boa noite!

Olá @zênite,
Não compreendi a sua questão, poderia ser mais explícito?
Leia o seguinte tópico: [TUTORIAL] Personalizar a listagem de notificações .


Aguardo uma resposta sua,
pedxz.

Olá! Perdão pela falta de explicação.

A ideia é a seguinte: criar um botão novo no menu e que, ao clicar nele, as notificações dos usuários aparecerão em uma lista, como no tutorial que mostrei.

O botão ficaria no menu, dessa forma (o sino branco): https://i.imgur.com/PYxwzTz.jpg

A intenção é que ao clicar nele, apareça isso: https://i.imgur.com/2l6sahV.png

Obrigado desde já, espero ter sido claro

Olá!

Crie um novo JavaScript com investimento em todas as páginas:

Código:


/**
 *! Modificação nas notificações.
 *
 *  @author Luiz~
 *  @see <a href="http://ajuda.forumeiros.com">Fórum dos Fóruns</a>
 *  @licence MIT
 */
(function ($) {
  'use strict';
 
  var config = {
    max: 7,
    error: [
      'Houve um erro ao tentar carregar as notificações.',
      'Caso o problema continue, contate o suporte técnico.'
    ].join('\n')
  };
 
  $(window).on('load', function () {
  var $faNotifyTrigger = $('<a>', {
      href: 'javascript:void(0)',
      id: 'fa-custom-notification-trigger',
      html: '<span class="pmlist-qtt">0</span>',
      class: 'fa fa-bell'
    })
      .appendTo('.navbar.navlinks')
        .on('click', function (event) {
          event.stopPropagation();
          $faNotifyContent.toggleClass('hidden');
        })
    ;
 
    $(document).on('click', function () {
      if ($('.fa-notify-wrapper').is('.hidden')) {
        return;
      }
 
      $('.fa-notify-wrapper').toggleClass('hidden');
    });
 
    var $faNotifyContent = $([
      '<div class="fa-notify-wrapper hidden">',
      '  <header class="fa-notify-header">',
      '    <h4>Notificações</h4>',
      '    <a href="/profile?mode=editprofile&page_profil=notifications">Ver Todas & Configurações</a>',
      '  </header>',
      '  <div class="fa-notify-inner">',
      '    <div class="fa-notify-list">',
      '      <span class="fa-notify-loading">Carregando...</span>',
      '    </div>',
      '    <div class="fa-notify-date">',
      '    </div>',
      '  </div>',
      '</div>',
    ].join('\n'))
      .appendTo('body')
        .on('click', function (event) {
          event.stopPropagation();
        })
    ;
 
    var cookiedPmlistCount = my_getcookie('fa_mplist_count');
    if (cookiedPmlistCount) {
      $faNotifyTrigger
        .find('span')
          .text(cookiedPmlistCount)
      ;
    }
 
    $.get('/profile', {
      mode: 'editprofile',
      page_profil: 'notifications'
    })
      .done(function (context) {
 
        var $wrap = $('[name="notif_list"]', context);
        var $item = $wrap.find('table tr td:first-child');
 
        $item.each(function () {
 
          var $this = $(this);
          var $row = $(this).parent('tr');
 
          var text = $this.html();
 
          $('.fa-notify-loading').hide();
 
          if ($row.index() < config.max) {
            $faNotifyContent
              .find('.fa-notify-list')
                .append([
                  '<div class="notify-item">',
                  '  ' + text,
                  '</div>'
                ].join('\n'))
            ;
          }
 
          var notifyCount = $faNotifyContent
            .find('.fa-notify-list .notify-item')
              .length
          ;
 
          my_setcookie('fa_mplist_count', notifyCount);
          var cookiedPmlistCount = my_getcookie('fa_mplist_count');
 
          $faNotifyTrigger
            .find('span')
              .text(cookiedPmlistCount)
          ;
 
        });
 
      })
      .fail(function () {
        console.warn(config.error);
      })
    ;
 
    var styles = [
      '@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);',
      '',
      '.hidden,',
      'html body div #fa_notifications {',
      '  opacity: 0!important;',
      '  pointer-events: none!important;',
      '}',
      'a#fa_welcome {',
      '  margin-right: 25px;',
      '}',
      '',
      'div#fa_toolbar {',
      '  position: relative;',
      '}',
      '',
      'a#fa-custom-notification-trigger {',
      ' color: #666!important;',
      '  background-color: #fff;',
      '  font-size: 17px;',
      '  border-radius: 3px;',
      '  padding: 2px;',
      '}',
      '',
      'a#fa-custom-notification-trigger span {',
      '  position: absolute;',
      '  background-color: #e54732;',
      '  color: #fff;',
      '  font-size: 10px;',
      '  font-family: Arial, sans-serif;',
      '  padding: 1px 3.5px;',
      '  line-height: 11px;',
      '  border-radius: 999px;',
      '}',
      '',
      'a#fa-custom-notification-trigger:hover {',
      '  text-decoration: none;',
      '  background-color: #39c;',
      '  color: #fff!important;',
      '}',
      '',
      '.fa-notify-wrapper {',
      '  position: fixed;',
      '  top: 12em;',
      '  z-index: 9999;',
      '  right: 41em;',
      '  background-color: #fff;',
      '  border: solid 1px #ddd;',
      '  border-radius: 3px;',
      '  padding: 20px 13px;',
      '  width: 465px;',
      '  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";',
      '  font-size: 13px;',
      '  box-shadow: inset 0px -15px #ddd;',
      '}',
      '',
      '.fa-notify-wrapper,',
      '.fa-notify-wrapper * {',
      '  box-sizing: border-box;',
      '}',
      '',
      '.fa-notify-wrapper::before {',
      '  content: "";',
      '  position: absolute;',
      '  top: -11px;',
      '  right: 13px;',
      '  width: 20px;',
      '  height: 20px;',
      '  background-color: #ffffff;',
      '  z-index: 9999;',
      '  transform: rotate(45deg);',
      '  border-radius: 0 0 99px 0;',
      '  border: solid 1px #ddd;',
      '  border-bottom: none;',
      '  border-right: none;',
      '}',
      '',
      '.fa-notify-wrapper header h4 {',
      '  color: #666;',
      '  font-weight: 600;',
      '  font-size: 21px;',
      '  margin-top: 0px;',
      '  margin-bottom: 5px;',
      '  display: table;',
      '}',
      '',
      '.fa-notify-wrapper header a {',
      '  position: absolute;',
      '  bottom: 5px;',
      '  right: 5px;',
      '}',
      '',
      '.fa-notify-wrapper header {',
      '  display: block;',
      '  position: relative;',
      '  border-bottom: solid 1px #ddd;',
      '  margin-bottom: 8px;',
      '}',
      '',
      '.fa-notify-list {',
      '  counter-reset: section;',
      '}',
      '',
      '.notify-item {',
      '  margin-bottom: 15px;',
      '}',
      '',
      '.notify-item::before {',
      '  counter-increment: section;',
      '  content: counter(section);',
      '  background-color: #ddd;',
      '  border-radius: 10px;',
      '  padding: 1.5px 7px;',
      '  color: #666666;',
      '  margin-right: 4px;',
      '}'
    ].join('\n');
 
    $(['<style type="text/css">', styles, '</style>'].join('\n')).appendTo('head');
});
}(jQuery));

Até mais.

Olá! O código funcionou, mas a lista apareceu lááá no alto, veja: https://i.imgur.com/zPkslmi.jpg

Tem como jogar pra ela "sair" do sino?

Olá,

Adiciona esse código na sua Folha de estilo CSS

Código:

.fa-notify-wrapper {
    position: absolute!important;
    top: 50em!important;
    right: 16em!important;
{

att,

Boa tarde! Eu tive que retirar o código porque ele estava fazendo a caixa de "spoiler" de todos os tópicos ficar em branco. Existe uma forma de retirar esse bug?

Até!

Zênite escreveu:Boa tarde! Eu tive que retirar o código porque ele estava fazendo a caixa de "spoiler" de todos os tópicos ficar em branco. Existe uma forma de retirar esse bug?

Até!

Qual bug? Teria como tirar um printscreen?
O Senhor usa algum script para dar algum tipo de efeito ao spoiler?

Olá! O que ocorre é exatamente isso: https://i.imgur.com/tGVMCtt.png

O conteúdo dele desaparece.

Não utilizo nada que modifique o spoiler, ele sempre foi nesse estilo.


Obrigado desde já!

Up pls não me abandonem ><

Olá,

Você poderia ativar o código novamente só para eu ver o erro e tentar encontrar exatamente o que tá interferindo?

att,

Olá, descobri qual era o erro! No código havia uma chave invertida, o que deixava o CSS bugado. Há, porém, um "problema" novo. A aba de notificações aparece bem longe do botão, veja: https://i.imgur.com/RLi0slX.jpg

Além disso, quando marco alguém em algum tópico, a pessoa não recebe a notificação, mesmo com essa opção ativada nas configurações de perfil

Edit: O erro que faz o spoiler desaparecer continuou. Atualmente tenho razoável movimento em meu fórum e os usuários utilizam muito o comando 'Spoiler', de forma que não posso mantê-lo inútil por um tempo. Acredito que seja melhor eu desistir de colocar as notificações, ou buscar por outro código. Se a Staff preferir, pode fechar esse tópico.

Obrigado desde já e até!

Olá @Zênite

Desculpe desde já por o ter abandonado, depois de lhe ter fornecido o código. A verdade é que estive um pouco ocupado esses dias.
O único problema é com o spoiler? Se sim, troque o código por esse:

Código:

 var $faNotifyTrigger = $('<a>', {
      href: 'javascript:void(0)',
      id: 'fa-custom-notification-trigger',
      html: '<span class="pmlist-qtt">0</span>',
      class: 'fa fa-bell'
    })
      .appendTo('.navbar.navlinks')
        .on('click', function (event) {
          event.stopPropagation();
          $faNotifyContent.toggleClass('hidden');
        })
    ;
 
    $(document).on('click', function () {
      if ($('.fa-notify-wrapper').is('.hidden')) {
        return;
      }
 
      $('.fa-notify-wrapper').toggleClass('hidden');
    });
 
    var $faNotifyContent = $([
      '<div class="fa-notify-wrapper hidden">',
      '  <header class="fa-notify-header">',
      '    <h4>Notificações</h4>',
      '    <a href="/profile?mode=editprofile&page_profil=notifications">Ver Todas & Configurações</a>',
      '  </header>',
      '  <div class="fa-notify-inner">',
      '    <div class="fa-notify-list">',
      '      <span class="fa-notify-loading">Carregando...</span>',
      '    </div>',
      '    <div class="fa-notify-date">',
      '    </div>',
      '  </div>',
      '</div>',
    ].join('\n'))
      .appendTo('body')
        .on('click', function (event) {
          event.stopPropagation();
        })
    ;
 
    var cookiedPmlistCount = my_getcookie('fa_mplist_count');
    if (cookiedPmlistCount) {
      $faNotifyTrigger
        .find('span')
          .text(cookiedPmlistCount)
      ;
    }
 
    $.get('/profile', {
      mode: 'editprofile',
      page_profil: 'notifications'
    })
      .done(function (context) {
 
        var $wrap = $('[name="notif_list"]', context);
        var $item = $wrap.find('table tr td:first-child');
 
        $item.each(function () {
 
          var $this = $(this);
          var $row = $(this).parent('tr');
 
          var text = $this.html();
 
          $('.fa-notify-loading').hide();
 
          if ($row.index() < config.max) {
            $faNotifyContent
              .find('.fa-notify-list')
                .append([
                  '<div class="notify-item">',
                  '  ' + text,
                  '</div>'
                ].join('\n'))
            ;
          }
 
          var notifyCount = $faNotifyContent
            .find('.fa-notify-list .notify-item')
              .length
          ;
 
          my_setcookie('fa_mplist_count', notifyCount);
          var cookiedPmlistCount = my_getcookie('fa_mplist_count');
 
          $faNotifyTrigger
            .find('span')
              .text(cookiedPmlistCount)
          ;
 
        });
 
      })
      .fail(function () {
        console.warn(config.error);
      })
    ;
 
    var styles = [
      '@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);',
      '',
      '.fa-notify-wrapper.hidden,',
      'html body div #fa_notifications {',
      '  opacity: 0!important;',
      '  pointer-events: none!important;',
      '}',
      'a#fa_welcome {',
      '  margin-right: 25px;',
      '}',
      '',
      'div#fa_toolbar {',
      '  position: relative;',
      '}',
      '',
      'a#fa-custom-notification-trigger {',
      ' color: #666!important;',
      '  background-color: #fff;',
      '  font-size: 17px;',
      '  border-radius: 3px;',
      '  padding: 2px;',
      '}',
      '',
      'a#fa-custom-notification-trigger span {',
      '  position: absolute;',
      '  background-color: #e54732;',
      '  color: #fff;',
      '  font-size: 10px;',
      '  font-family: Arial, sans-serif;',
      '  padding: 1px 3.5px;',
      '  line-height: 11px;',
      '  border-radius: 999px;',
      '}',
      '',
      'a#fa-custom-notification-trigger:hover {',
      '  text-decoration: none;',
      '  background-color: #39c;',
      '  color: #fff!important;',
      '}',
      '',
      '.fa-notify-wrapper {',
      '  position: fixed;',
      '  top: 12em;',
      '  z-index: 9999;',
      '  right: 41em;',
      '  background-color: #fff;',
      '  border: solid 1px #ddd;',
      '  border-radius: 3px;',
      '  padding: 20px 13px;',
      '  width: 465px;',
      '  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";',
      '  font-size: 13px;',
      '  box-shadow: inset 0px -15px #ddd;',
      '}',
      '',
      '.fa-notify-wrapper,',
      '.fa-notify-wrapper * {',
      '  box-sizing: border-box;',
      '}',
      '',
      '.fa-notify-wrapper::before {',
      '  content: "";',
      '  position: absolute;',
      '  top: -11px;',
      '  right: 13px;',
      '  width: 20px;',
      '  height: 20px;',
      '  background-color: #ffffff;',
      '  z-index: 9999;',
      '  transform: rotate(45deg);',
      '  border-radius: 0 0 99px 0;',
      '  border: solid 1px #ddd;',
      '  border-bottom: none;',
      '  border-right: none;',
      '}',
      '',
      '.fa-notify-wrapper header h4 {',
      '  color: #666;',
      '  font-weight: 600;',
      '  font-size: 21px;',
      '  margin-top: 0px;',
      '  margin-bottom: 5px;',
      '  display: table;',
      '}',
      '',
      '.fa-notify-wrapper header a {',
      '  position: absolute;',
      '  bottom: 5px;',
      '  right: 5px;',
      '}',
      '',
      '.fa-notify-wrapper header {',
      '  display: block;',
      '  position: relative;',
      '  border-bottom: solid 1px #ddd;',
      '  margin-bottom: 8px;',
      '}',
      '',
      '.fa-notify-list {',
      '  counter-reset: section;',
      '}',
      '',
      '.notify-item {',
      '  margin-bottom: 15px;',
      '}',
      '',
      '.notify-item::before {',
      '  counter-increment: section;',
      '  content: counter(section);',
      '  background-color: #ddd;',
      '  border-radius: 10px;',
      '  padding: 1.5px 7px;',
      '  color: #666666;',
      '  margin-right: 4px;',
      '}'
    ].join('\n');
 
    $(['<style type="text/css">', styles, '</style>'].join('\n')).appendTo('head');

Atentamente,
RafaelS.

Sem problemas quanto a demora ou qualquer coisa do tipo! Quanto ao código, perdi um pouco o fio da meada. Somente esse código que me enviou será suficiente para as modificações? Acabei excluindo todo o código de notificações que tinha anteriormente.

Se for somente esse, já apliquei e nada mudou. Se devo adicionar mais algum código, apenas me aponte, por favor, quais.

Obrigado desde já e agradeço pela paciência! Até!

Olá!

Estamos a falar do mesmo código que lhe enviei na minha primeira mensagem.
Volte a trocar por este pois faltou algo:

Código:

 
/**
 *! Modificação nas notificações.
 *
 *  @author Luiz~
 *  @see <a href="http://ajuda.forumeiros.com">Fórum dos Fóruns</a>
 *  @licence MIT
 */
(function ($) {
  'use strict';
 
  var config = {
    max: 7,
    error: [
      'Houve um erro ao tentar carregar as notificações.',
      'Caso o problema continue, contate o suporte técnico.'
    ].join('\n')
  };
 
  $(window).on('load', function () {
  var $faNotifyTrigger = $('<a>', {
      href: 'javascript:void(0)',
      id: 'fa-custom-notification-trigger',
      html: '<span class="pmlist-qtt">0</span>',
      class: 'fa fa-bell'
    })
      .appendTo('.navbar.navlinks')
        .on('click', function (event) {
          event.stopPropagation();
          $faNotifyContent.toggleClass('hidden');
        })
    ;
 
    $(document).on('click', function () {
      if ($('.fa-notify-wrapper').is('.hidden')) {
        return;
      }
 
      $('.fa-notify-wrapper').toggleClass('hidden');
    });
 
    var $faNotifyContent = $([
      '<div class="fa-notify-wrapper hidden">',
      '  <header class="fa-notify-header">',
      '    <h4>Notificações</h4>',
      '    <a href="/profile?mode=editprofile&page_profil=notifications">Ver Todas & Configurações</a>',
      '  </header>',
      '  <div class="fa-notify-inner">',
      '    <div class="fa-notify-list">',
      '      <span class="fa-notify-loading">Carregando...</span>',
      '    </div>',
      '    <div class="fa-notify-date">',
      '    </div>',
      '  </div>',
      '</div>',
    ].join('\n'))
      .appendTo('body')
        .on('click', function (event) {
          event.stopPropagation();
        })
    ;
 
    var cookiedPmlistCount = my_getcookie('fa_mplist_count');
    if (cookiedPmlistCount) {
      $faNotifyTrigger
        .find('span')
          .text(cookiedPmlistCount)
      ;
    }
 
    $.get('/profile', {
      mode: 'editprofile',
      page_profil: 'notifications'
    })
      .done(function (context) {
 
        var $wrap = $('[name="notif_list"]', context);
        var $item = $wrap.find('table tr td:first-child');
 
        $item.each(function () {
 
          var $this = $(this);
          var $row = $(this).parent('tr');
 
          var text = $this.html();
 
          $('.fa-notify-loading').hide();
 
          if ($row.index() < config.max) {
            $faNotifyContent
              .find('.fa-notify-list')
                .append([
                  '<div class="notify-item">',
                  '  ' + text,
                  '</div>'
                ].join('\n'))
            ;
          }
 
          var notifyCount = $faNotifyContent
            .find('.fa-notify-list .notify-item')
              .length
          ;
 
          my_setcookie('fa_mplist_count', notifyCount);
          var cookiedPmlistCount = my_getcookie('fa_mplist_count');
 
          $faNotifyTrigger
            .find('span')
              .text(cookiedPmlistCount)
          ;
 
        });
 
      })
      .fail(function () {
        console.warn(config.error);
      })
    ;
 
    var styles = [
      '@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);',
      '',
      '.fa-notify-wrapper.hidden,',
      'html body div #fa_notifications {',
      '  opacity: 0!important;',
      '  pointer-events: none!important;',
      '}',
      'a#fa_welcome {',
      '  margin-right: 25px;',
      '}',
      '',
      'div#fa_toolbar {',
      '  position: relative;',
      '}',
      '',
      'a#fa-custom-notification-trigger {',
      ' color: #666!important;',
      '  background-color: #fff;',
      '  font-size: 17px;',
      '  border-radius: 3px;',
      '  padding: 2px;',
      '}',
      '',
      'a#fa-custom-notification-trigger span {',
      '  position: absolute;',
      '  background-color: #e54732;',
      '  color: #fff;',
      '  font-size: 10px;',
      '  font-family: Arial, sans-serif;',
      '  padding: 1px 3.5px;',
      '  line-height: 11px;',
      '  border-radius: 999px;',
      '}',
      '',
      'a#fa-custom-notification-trigger:hover {',
      '  text-decoration: none;',
      '  background-color: #39c;',
      '  color: #fff!important;',
      '}',
      '',
      '.fa-notify-wrapper {',
      '  position: fixed;',
      '  top: 12em;',
      '  z-index: 9999;',
      '  right: 41em;',
      '  background-color: #fff;',
      '  border: solid 1px #ddd;',
      '  border-radius: 3px;',
      '  padding: 20px 13px;',
      '  width: 465px;',
      '  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";',
      '  font-size: 13px;',
      '  box-shadow: inset 0px -15px #ddd;',
      '}',
      '',
      '.fa-notify-wrapper,',
      '.fa-notify-wrapper * {',
      '  box-sizing: border-box;',
      '}',
      '',
      '.fa-notify-wrapper::before {',
      '  content: "";',
      '  position: absolute;',
      '  top: -11px;',
      '  right: 13px;',
      '  width: 20px;',
      '  height: 20px;',
      '  background-color: #ffffff;',
      '  z-index: 9999;',
      '  transform: rotate(45deg);',
      '  border-radius: 0 0 99px 0;',
      '  border: solid 1px #ddd;',
      '  border-bottom: none;',
      '  border-right: none;',
      '}',
      '',
      '.fa-notify-wrapper header h4 {',
      '  color: #666;',
      '  font-weight: 600;',
      '  font-size: 21px;',
      '  margin-top: 0px;',
      '  margin-bottom: 5px;',
      '  display: table;',
      '}',
      '',
      '.fa-notify-wrapper header a {',
      '  position: absolute;',
      '  bottom: 5px;',
      '  right: 5px;',
      '}',
      '',
      '.fa-notify-wrapper header {',
      '  display: block;',
      '  position: relative;',
      '  border-bottom: solid 1px #ddd;',
      '  margin-bottom: 8px;',
      '}',
      '',
      '.fa-notify-list {',
      '  counter-reset: section;',
      '}',
      '',
      '.notify-item {',
      '  margin-bottom: 15px;',
      '}',
      '',
      '.notify-item::before {',
      '  counter-increment: section;',
      '  content: counter(section);',
      '  background-color: #ddd;',
      '  border-radius: 10px;',
      '  padding: 1.5px 7px;',
      '  color: #666666;',
      '  margin-right: 4px;',
      '}'
    ].join('\n');
 
    $(['<style type="text/css">', styles, '</style>'].join('\n')).appendTo('head');
});
}(jQuery));

Atentamente,
RafaelS.

Olá, troquei por esse código e o sino apareceu; fui testar, marcando a mim mesmo num tópico para ver se alguma notificação apareceria, mas nada. Além disso, a caixa de notificações aparece no além, flutuando bem longe do botão. Veja: https://i.imgur.com/pPlM4Ye.jpg

Obrigado desde já, até!

Olá!

Talvez marcar a si próprio não seja a melhor opção, pois existe a possibilidade de o sistema não notificar isso! Porém eu irei marcar você em um tópico e logo você me diz se funcionou.

Só uma curiosidade: o spoiler voltou a funcionar?
Quanto à posição da caixa de notificações será necessário trocar o código novamente por este:

Código:

 
/**
 *! Modificação nas notificações.
 *
 *  @author Luiz~
 *  @see <a href="http://ajuda.forumeiros.com">Fórum dos Fóruns</a>
 *  @licence MIT
 */
(function ($) {
  'use strict';
 
  var config = {
    max: 7,
    error: [
      'Houve um erro ao tentar carregar as notificações.',
      'Caso o problema continue, contate o suporte técnico.'
    ].join('\n')
  };
 
  $(window).on('load', function () {
  var $faNotifyTrigger = $('<a>', {
      href: 'javascript:void(0)',
      id: 'fa-custom-notification-trigger',
      html: '<span class="pmlist-qtt">0</span>',
      class: 'fa fa-bell'
    })
      .appendTo('.navbar.navlinks')
        .on('click', function (event) {
          event.stopPropagation();
          $faNotifyContent.toggleClass('hidden');
        })
    ;
 
    $(document).on('click', function () {
      if ($('.fa-notify-wrapper').is('.hidden')) {
        return;
      }
 
      $('.fa-notify-wrapper').toggleClass('hidden');
    });
 
    var $faNotifyContent = $([
      '<div class="fa-notify-wrapper hidden">',
      '  <header class="fa-notify-header">',
      '    <h4>Notificações</h4>',
      '    <a href="/profile?mode=editprofile&page_profil=notifications">Ver Todas & Configurações</a>',
      '  </header>',
      '  <div class="fa-notify-inner">',
      '    <div class="fa-notify-list">',
      '      <span class="fa-notify-loading">Carregando...</span>',
      '    </div>',
      '    <div class="fa-notify-date">',
      '    </div>',
      '  </div>',
      '</div>',
    ].join('\n'))
      .appendTo('body')
        .on('click', function (event) {
          event.stopPropagation();
        })
    ;
 
    var cookiedPmlistCount = my_getcookie('fa_mplist_count');
    if (cookiedPmlistCount) {
      $faNotifyTrigger
        .find('span')
          .text(cookiedPmlistCount)
      ;
    }
 
    $.get('/profile', {
      mode: 'editprofile',
      page_profil: 'notifications'
    })
      .done(function (context) {
 
        var $wrap = $('[name="notif_list"]', context);
        var $item = $wrap.find('table tr td:first-child');
 
        $item.each(function () {
 
          var $this = $(this);
          var $row = $(this).parent('tr');
 
          var text = $this.html();
 
          $('.fa-notify-loading').hide();
 
          if ($row.index() < config.max) {
            $faNotifyContent
              .find('.fa-notify-list')
                .append([
                  '<div class="notify-item">',
                  '  ' + text,
                  '</div>'
                ].join('\n'))
            ;
          }
 
          var notifyCount = $faNotifyContent
            .find('.fa-notify-list .notify-item')
              .length
          ;
 
          my_setcookie('fa_mplist_count', notifyCount);
          var cookiedPmlistCount = my_getcookie('fa_mplist_count');
 
          $faNotifyTrigger
            .find('span')
              .text(cookiedPmlistCount)
          ;
 
        });
 
      })
      .fail(function () {
        console.warn(config.error);
      })
    ;
 
    var styles = [
      '@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);',
      '',
      '.fa-notify-wrapper.hidden,',
      'html body div #fa_notifications {',
      '  opacity: 0!important;',
      '  pointer-events: none!important;',
      '}',
      'a#fa_welcome {',
      '  margin-right: 25px;',
      '}',
      '',
      'div#fa_toolbar {',
      '  position: relative;',
      '}',
      '',
      'a#fa-custom-notification-trigger {',
      ' color: #666!important;',
      '  background-color: #fff;',
      '  font-size: 17px;',
      '  border-radius: 3px;',
      '  padding: 2px;',
      '}',
      '',
      'a#fa-custom-notification-trigger span {',
      '  position: absolute;',
      '  background-color: #e54732;',
      '  color: #fff;',
      '  font-size: 10px;',
      '  font-family: Arial, sans-serif;',
      '  padding: 1px 3.5px;',
      '  line-height: 11px;',
      '  border-radius: 999px;',
      '}',
      '',
      'a#fa-custom-notification-trigger:hover {',
      '  text-decoration: none;',
      '  background-color: #39c;',
      '  color: #fff!important;',
      '}',
      '',
      '.fa-notify-wrapper {',
      '  position: absolute;',
      '  top: 50em;',
      '  z-index: 9999;',
      '  right: 41em;',
      '  background-color: #fff;',
      '  border: solid 1px #ddd;',
      '  border-radius: 3px;',
      '  padding: 20px 13px;',
      '  width: 465px;',
      '  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";',
      '  font-size: 13px;',
      '  box-shadow: inset 0px -15px #ddd;',
      '}',
      '',
      '.fa-notify-wrapper,',
      '.fa-notify-wrapper * {',
      '  box-sizing: border-box;',
      '}',
      '',
      '.fa-notify-wrapper::before {',
      '  content: "";',
      '  position: absolute;',
      '  top: -11px;',
      '  right: 13px;',
      '  width: 20px;',
      '  height: 20px;',
      '  background-color: #ffffff;',
      '  z-index: 9999;',
      '  transform: rotate(45deg);',
      '  border-radius: 0 0 99px 0;',
      '  border: solid 1px #ddd;',
      '  border-bottom: none;',
      '  border-right: none;',
      '}',
      '',
      '.fa-notify-wrapper header h4 {',
      '  color: #666;',
      '  font-weight: 600;',
      '  font-size: 21px;',
      '  margin-top: 0px;',
      '  margin-bottom: 5px;',
      '  display: table;',
      '}',
      '',
      '.fa-notify-wrapper header a {',
      '  position: absolute;',
      '  bottom: 5px;',
      '  right: 5px;',
      '}',
      '',
      '.fa-notify-wrapper header {',
      '  display: block;',
      '  position: relative;',
      '  border-bottom: solid 1px #ddd;',
      '  margin-bottom: 8px;',
      '}',
      '',
      '.fa-notify-list {',
      '  counter-reset: section;',
      '}',
      '',
      '.notify-item {',
      '  margin-bottom: 15px;',
      '}',
      '',
      '.notify-item::before {',
      '  counter-increment: section;',
      '  content: counter(section);',
      '  background-color: #ddd;',
      '  border-radius: 10px;',
      '  padding: 1.5px 7px;',
      '  color: #666666;',
      '  margin-right: 4px;',
      '}'
    ].join('\n');
 
    $(['<style type="text/css">', styles, '</style>'].join('\n')).appendTo('head');
});
}(jQuery));

Atentamente,
RafaelS.

Olá! Vi sua marcação, mas não fui notificado dela!
E sim, o campo de spoiler voltou a funcionar perfeitamente!

A alteração de posicionamento fez que a caixa ficasse melhor posicionada, obrigado!

Aguardo resposta a respeito da notificação!

Agradeço desde já, boa tardee

Olá novamente Zênite!

Isso é realmente um pouco estranho.
Se não for incomodo, vou pedir que me marque a mim no mesmo tópico para poder ver onde está o erro.

Fico no aguardo.

Marquei! Fico no aguardo

Até!

Olá @Zênite,

Eu já identifiquei o problema. Na verdade nenhuma notificação é exibida (não só as de marcações).
Isto deve-se ao fato da barra de ferramentas Forumeiros não estar ativa em seu fórum.

Sendo assim o sistema de notificações é desabilitado. Observe que com a barra desativada, as notificações "somem" desta página.
Pode tentar ativar a barra e irá ver que as notificações aparecem no sininho.

Espero ter ajudado.

Hmmmmmm agora foi, embora a caixa de notificações tenha se deslocado, veja: https://i.imgur.com/qkZxAZn.jpg

De qualquer maneira, ficou muito bom! Obrigado!!! Vocês são fenomenais

Olá!

Troque o código novamente por este:

Código:

 
/**
 *! Modificação nas notificações.
 *
 *  @author Luiz~
 *  @see <a href="http://ajuda.forumeiros.com">Fórum dos Fóruns</a>
 *  @licence MIT
 */
(function ($) {
  'use strict';
 
  var config = {
    max: 7,
    error: [
      'Houve um erro ao tentar carregar as notificações.',
      'Caso o problema continue, contate o suporte técnico.'
    ].join('\n')
  };
 if(_userdata.session_logged_in == 0) return;
  $(window).on('load', function () {
  var $faNotifyTrigger = $('<a>', {
      href: 'javascript:void(0)',
      id: 'fa-custom-notification-trigger',
      html: '<span class="pmlist-qtt">0</span>',
      class: 'fa fa-bell'
    })
      .appendTo('.navbar.navlinks')
        .on('click', function (event) {
          event.stopPropagation();
          $faNotifyContent.toggleClass('hidden');
        })
    ;
 
    $(document).on('click', function () {
      if ($('.fa-notify-wrapper').is('.hidden')) {
        return;
      }
 
      $('.fa-notify-wrapper').toggleClass('hidden');
    });
 
    var $faNotifyContent = $([
      '<div class="fa-notify-wrapper hidden">',
      '  <header class="fa-notify-header">',
      '    <h4>Notificações</h4>',
      '    <a href="/profile?mode=editprofile&page_profil=notifications">Ver Todas & Configurações</a>',
      '  </header>',
      '  <div class="fa-notify-inner">',
      '    <div class="fa-notify-list">',
      '      <span class="fa-notify-loading">Carregando...</span>',
      '    </div>',
      '    <div class="fa-notify-date">',
      '    </div>',
      '  </div>',
      '</div>',
    ].join('\n'))
      .appendTo('body')
        .on('click', function (event) {
          event.stopPropagation();
        })
    ;
 
    var cookiedPmlistCount = my_getcookie('fa_mplist_count');
    if (cookiedPmlistCount) {
      $faNotifyTrigger
        .find('span')
          .text(cookiedPmlistCount)
      ;
    }
 
    $.get('/profile', {
      mode: 'editprofile',
      page_profil: 'notifications'
    })
      .done(function (context) {
 
        var $wrap = $('[name="notif_list"]', context);
        var $item = $wrap.find('table tr td:first-child');
 
        $item.each(function () {
 
          var $this = $(this);
          var $row = $(this).parent('tr');
 
          var text = $this.html();
 
          $('.fa-notify-loading').hide();
 
          if ($row.index() < config.max) {
            $faNotifyContent
              .find('.fa-notify-list')
                .append([
                  '<div class="notify-item">',
                  '  ' + text,
                  '</div>'
                ].join('\n'))
            ;
          }
 
          var notifyCount = $faNotifyContent
            .find('.fa-notify-list .notify-item')
              .length
          ;
 
          my_setcookie('fa_mplist_count', notifyCount);
          var cookiedPmlistCount = my_getcookie('fa_mplist_count');
 
          $faNotifyTrigger
            .find('span')
              .text(cookiedPmlistCount)
          ;
 
        });
 
      })
      .fail(function () {
        console.warn(config.error);
      })
    ;
 
    var styles = [
      '@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);',
      '',
      '.fa-notify-wrapper.hidden,',
      'html body div #fa_notifications {',
      '  opacity: 0!important;',
      '  pointer-events: none!important;',
      '}',
      'a#fa_welcome {',
      '  margin-right: 25px;',
      '}',
      '',
      'div#fa_toolbar {',
      '  position: relative;',
      '}',
      '',
      'a#fa-custom-notification-trigger {',
      ' color: #666!important;',
      '  background-color: #fff;',
      '  font-size: 17px;',
      '  border-radius: 3px;',
      '  padding: 2px;',
      '}',
      '',
      'a#fa-custom-notification-trigger span {',
      '  position: absolute;',
      '  background-color: #e54732;',
      '  color: #fff;',
      '  font-size: 10px;',
      '  font-family: Arial, sans-serif;',
      '  padding: 1px 3.5px;',
      '  line-height: 11px;',
      '  border-radius: 999px;',
      '}',
      '',
      'a#fa-custom-notification-trigger:hover {',
      '  text-decoration: none;',
      '  background-color: #39c;',
      '  color: #fff!important;',
      '}',
      '',
      '.fa-notify-wrapper {',
      '  position: absolute;',
      '  top: 53em;',
      '  z-index: 9999;',
      '  right: 40em;',
      '  background-color: #fff;',
      '  border: solid 1px #ddd;',
      '  border-radius: 3px;',
      '  padding: 20px 13px;',
      '  width: 465px;',
      '  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";',
      '  font-size: 13px;',
      '  box-shadow: inset 0px -15px #ddd;',
      '}',
      '',
      '.fa-notify-wrapper,',
      '.fa-notify-wrapper * {',
      '  box-sizing: border-box;',
      '}',
      '',
      '.fa-notify-wrapper::before {',
      '  content: "";',
      '  position: absolute;',
      '  top: -11px;',
      '  right: 13px;',
      '  width: 20px;',
      '  height: 20px;',
      '  background-color: #ffffff;',
      '  z-index: 9999;',
      '  transform: rotate(45deg);',
      '  border-radius: 0 0 99px 0;',
      '  border: solid 1px #ddd;',
      '  border-bottom: none;',
      '  border-right: none;',
      '}',
      '',
      '.fa-notify-wrapper header h4 {',
      '  color: #666;',
      '  font-weight: 600;',
      '  font-size: 21px;',
      '  margin-top: 0px;',
      '  margin-bottom: 5px;',
      '  display: table;',
      '}',
      '',
      '.fa-notify-wrapper header a {',
      '  position: absolute;',
      '  bottom: 5px;',
      '  right: 5px;',
      '}',
      '',
      '.fa-notify-wrapper header {',
      '  display: block;',
      '  position: relative;',
      '  border-bottom: solid 1px #ddd;',
      '  margin-bottom: 8px;',
      '}',
      '',
      '.fa-notify-list {',
      '  counter-reset: section;',
      '}',
      '',
      '.notify-item {',
      '  margin-bottom: 15px;',
      '}',
      '',
      '.notify-item::before {',
      '  counter-increment: section;',
      '  content: counter(section);',
      '  background-color: #ddd;',
      '  border-radius: 10px;',
      '  padding: 1.5px 7px;',
      '  color: #666666;',
      '  margin-right: 4px;',
      '}'
    ].join('\n');
 
    $(['<style type="text/css">', styles, '</style>'].join('\n')).appendTo('head');
});
}(jQuery));

Até mais.

Olá! O sininho das notificações sumiu depois da alteração ><


Até!

Olá!

Peço desculpa pelo inconveniente, aqui tem novamente:

Código:

 
/**
 *! Modificação nas notificações.
 *
 *  @author Luiz~
 *  @see <a href="http://ajuda.forumeiros.com">Fórum dos Fóruns</a>
 *  @licence MIT
 */
(function ($) {
  'use strict';
 
  var config = {
    max: 7,
    error: [
      'Houve um erro ao tentar carregar as notificações.',
      'Caso o problema continue, contate o suporte técnico.'
    ].join('\n')
  };
 
  $(window).on('load', function () {
  var $faNotifyTrigger = $('<a>', {
      href: 'javascript:void(0)',
      id: 'fa-custom-notification-trigger',
      html: '<span class="pmlist-qtt">0</span>',
      class: 'fa fa-bell'
    })
      .appendTo('.navbar.navlinks')
        .on('click', function (event) {
          event.stopPropagation();
          $faNotifyContent.toggleClass('hidden');
        })
    ;
 
    $(document).on('click', function () {
      if ($('.fa-notify-wrapper').is('.hidden')) {
        return;
      }
 
      $('.fa-notify-wrapper').toggleClass('hidden');
    });
 
    var $faNotifyContent = $([
      '<div class="fa-notify-wrapper hidden">',
      '  <header class="fa-notify-header">',
      '    <h4>Notificações</h4>',
      '    <a href="/profile?mode=editprofile&page_profil=notifications">Ver Todas & Configurações</a>',
      '  </header>',
      '  <div class="fa-notify-inner">',
      '    <div class="fa-notify-list">',
      '      <span class="fa-notify-loading">Carregando...</span>',
      '    </div>',
      '    <div class="fa-notify-date">',
      '    </div>',
      '  </div>',
      '</div>',
    ].join('\n'))
      .appendTo('body')
        .on('click', function (event) {
          event.stopPropagation();
        })
    ;
 
    var cookiedPmlistCount = my_getcookie('fa_mplist_count');
    if (cookiedPmlistCount) {
      $faNotifyTrigger
        .find('span')
          .text(cookiedPmlistCount)
      ;
    }
 
    $.get('/profile', {
      mode: 'editprofile',
      page_profil: 'notifications'
    })
      .done(function (context) {
 
        var $wrap = $('[name="notif_list"]', context);
        var $item = $wrap.find('table tr td:first-child');
 
        $item.each(function () {
 
          var $this = $(this);
          var $row = $(this).parent('tr');
 
          var text = $this.html();
 
          $('.fa-notify-loading').hide();
 
          if ($row.index() < config.max) {
            $faNotifyContent
              .find('.fa-notify-list')
                .append([
                  '<div class="notify-item">',
                  '  ' + text,
                  '</div>'
                ].join('\n'))
            ;
          }
 
          var notifyCount = $faNotifyContent
            .find('.fa-notify-list .notify-item')
              .length
          ;
 
          my_setcookie('fa_mplist_count', notifyCount);
          var cookiedPmlistCount = my_getcookie('fa_mplist_count');
 
          $faNotifyTrigger
            .find('span')
              .text(cookiedPmlistCount)
          ;
 
        });
 
      })
      .fail(function () {
        console.warn(config.error);
      })
    ;
 
    var styles = [
      '@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);',
      '',
      '.fa-notify-wrapper.hidden,',
      'html body div #fa_notifications {',
      '  opacity: 0!important;',
      '  pointer-events: none!important;',
      '}',
      'a#fa_welcome {',
      '  margin-right: 25px;',
      '}',
      '',
      'div#fa_toolbar {',
      '  position: relative;',
      '}',
      '',
      'a#fa-custom-notification-trigger {',
      ' color: #666!important;',
      '  background-color: #fff;',
      '  font-size: 17px;',
      '  border-radius: 3px;',
      '  padding: 2px;',
      '}',
      '',
      'a#fa-custom-notification-trigger span {',
      '  position: absolute;',
      '  background-color: #e54732;',
      '  color: #fff;',
      '  font-size: 10px;',
      '  font-family: Arial, sans-serif;',
      '  padding: 1px 3.5px;',
      '  line-height: 11px;',
      '  border-radius: 999px;',
      '}',
      '',
      'a#fa-custom-notification-trigger:hover {',
      '  text-decoration: none;',
      '  background-color: #39c;',
      '  color: #fff!important;',
      '}',
      '',
      '.fa-notify-wrapper {',
      '  position: absolute;',
      '  top: 53em;',
      '  z-index: 9999;',
      '  right: 40em;',
      '  background-color: #fff;',
      '  border: solid 1px #ddd;',
      '  border-radius: 3px;',
      '  padding: 20px 13px;',
      '  width: 465px;',
      '  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";',
      '  font-size: 13px;',
      '  box-shadow: inset 0px -15px #ddd;',
      '}',
      '',
      '.fa-notify-wrapper,',
      '.fa-notify-wrapper * {',
      '  box-sizing: border-box;',
      '}',
      '',
      '.fa-notify-wrapper::before {',
      '  content: "";',
      '  position: absolute;',
      '  top: -11px;',
      '  right: 13px;',
      '  width: 20px;',
      '  height: 20px;',
      '  background-color: #ffffff;',
      '  z-index: 9999;',
      '  transform: rotate(45deg);',
      '  border-radius: 0 0 99px 0;',
      '  border: solid 1px #ddd;',
      '  border-bottom: none;',
      '  border-right: none;',
      '}',
      '',
      '.fa-notify-wrapper header h4 {',
      '  color: #666;',
      '  font-weight: 600;',
      '  font-size: 21px;',
      '  margin-top: 0px;',
      '  margin-bottom: 5px;',
      '  display: table;',
      '}',
      '',
      '.fa-notify-wrapper header a {',
      '  position: absolute;',
      '  bottom: 5px;',
      '  right: 5px;',
      '}',
      '',
      '.fa-notify-wrapper header {',
      '  display: block;',
      '  position: relative;',
      '  border-bottom: solid 1px #ddd;',
      '  margin-bottom: 8px;',
      '}',
      '',
      '.fa-notify-list {',
      '  counter-reset: section;',
      '}',
      '',
      '.notify-item {',
      '  margin-bottom: 15px;',
      '}',
      '',
      '.notify-item::before {',
      '  counter-increment: section;',
      '  content: counter(section);',
      '  background-color: #ddd;',
      '  border-radius: 10px;',
      '  padding: 1.5px 7px;',
      '  color: #666666;',
      '  margin-right: 4px;',
      '}'
    ].join('\n');
 
    $(['<style type="text/css">', styles, '</style>'].join('\n')).appendTo('head');
});
}(jQuery));

Até mais.

Funcionou! Tudo certinho! Obrigado, podem fechar!!!!

Vocês são top d+