Notifications without displaying toolbar

Hello!

Is there a way to just have notification center and no toolbar? Yes, I know that notifications are inseparable from the toolbar, but can I for example just hide the toolbar with CSS and have notifications center as an arrow or something?

@Tonight

I made a code for a widget but it was for punbb version, I do not know the version of your forum but below is the code if you want to try:

Code:


<ul id="wnotify" style="margin: 0px; overflow: auto; max-height: 225px; padding-left: 0px;"></ul>
<script type="text/javascript">
//<![CDATA[
/**************************************************************************
 * Module: JS_wNotify
 * Description: Notifications on Widget!
 * Author: Made and Optimizations by JScript - 2014/11/09
 * Version: First Release!
 ***************************************************************************/
jQuery(window).load(function() {
   if (location.pathname == '/forum') {
      var NotifyExist = setInterval(function() {
         if (document.getElementById('notif_list') !== null) {
            clearInterval(NotifyExist);
            var iNewList = jQuery('#notif_list li').length,
               iOldList = 0;

            WidgetNotifications();
            iOldList = iNewList;

            setInterval(function() {
               iNewList = jQuery('#notif_list li').length;
               if (iNewList !== iOldList) {
                  WidgetNotifications();
                  iOldList = iNewList;
               }
            }, 10000);
         }
      }, 1000);
   }
});

function WidgetNotifications() {
   jQuery('#wnotify').html(jQuery('#notif_list').html());

    var oSearch = jQuery('#main-content .main-content td.tcr a.gensmall[href^="/u"]'), /* Location to look for avatars! In this case, looking in the categories. */
        oTarget = jQuery('#wnotify a[href^="/u"]'),
        ilen = oTarget.length,
        index = 0; /* Here we accelerate the count of "for"! */

    for (index; index < ilen; index++) {
        var oThis = jQuery(oTarget[index]),
            sHref = oThis.attr('href'),
            sTitle = oThis.text();

      if (sHref !== undefined) {
         oThis.closest('div').before('<a href="' + sHref + '" title="' + sTitle + '" class="lastpost-avatar"><img src="http://r26.imgfast.net/users/2617/31/90/74/avatars/1-40.png" alt="no_photo" class="avt-wid" /></a>');
         var oImg = oThis.closest('li').find('.avt-wid'),
            /* Here calls the function to search for the avatar! */
            sSrc = AvatarSearch(oSearch, sHref);

         if (sSrc.length) { /* if exists: Very, very, very fast!!! */
            oImg.attr('src', sSrc);
         } else {
            sSrc = sessionStorage.getItem(sHref); /* Relative fast... */
            if (sSrc) {
               oImg.attr('src', sSrc);
            } else {
               jQuery.get(sHref, function(data) { /* Slow and dangerous!!! */
                  var image = jQuery('#profile-advanced-right .main-content img:first', data).attr('src');
                  oImg.attr('src', image);
                  sessionStorage.setItem(sHref, image);
               });
            }
         }
      }
    }
};

function AvatarSearch(oObject, oTarget) {
    var ilen = oObject.length,
        index = 0;

    for (index; index < ilen; index++) {
        var oThis = jQuery(oObject[index]);
        if (oThis.attr('href') == oTarget) {
            var sImg = oThis.closest('td.tcr').find('.lastpost-avatar img').attr('src');
            if (sImg.length) return sImg;
        }
    }
    return '';
}
//]]>
</script>
<style type="text/css">
<!--
#wnotify {
   list-style: outside none none;
}
#wnotify .ellipsis {
   min-height: 42px;
   overflow: auto;
   text-overflow: unset;
   white-space: normal;
   width: auto;
}
#wnotify .see_all {
   border: 1px solid #d2d2d2;
   box-shadow: 0 0 4px rgba(0, 0, 0, 0.07);
   margin-top: 5px;
   padding: 5px;
   text-align: center;
}
#wnotify .content > hr {
   display: none;
}
.lastpost-avatar {
   float: left;
   padding: 2px;
}
.lastpost-avatar img {
   background: none repeat scroll 0 0 #fff;
   border: 1px solid #d8d8d8;
   box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
   float: left;
   height: 28px;
   margin-right: 5px;
   padding: 2px;
   width: 28px;
}
-->
</style>


Result:


JS

Hey mate, it looks great and modern. I'm using phpBB3, what should I change in that script?

@Tonight
Thanks for the info!

In the ACP, create a new widget following the example of the figure below:


And add the code below:

Code:


<ul id="wnotify" style="margin: 0px; overflow: auto; max-height: 225px; padding-left: 0px;"></ul>
<script type="text/javascript">
//<![CDATA[
/**************************************************************************
 * Module: JS_wNotify
 * Description: Notifications on Widget!
 * Author: Made and Optimizations by JScript - 2014/11/09
 * Version: First Release!
 ***************************************************************************/
jQuery(window).load(function() {
   var _pathName = location.pathname;
   if (_pathName == '/portal' || _pathName == '/forum' || _pathName == '/') {
      var NotifyExist = setInterval(function() {
         if (document.getElementById('notif_list') !== null) {
            clearInterval(NotifyExist);
            var iNewList = jQuery('#notif_list li').length,
               iOldList = 0;

            WidgetNotifications();
            iOldList = iNewList;

            setInterval(function() {
               iNewList = jQuery('#notif_list li').length;
               if (iNewList !== iOldList) {
                  WidgetNotifications();
                  iOldList = iNewList;
               }
            }, 10000);
         }
      }, 1000);
   }
});

function WidgetNotifications() {
   jQuery('#wnotify').html(jQuery('#notif_list').html());

    var oSearch = jQuery('#main-content .main-content td.tcr a.gensmall[href^="/u"]'), /* Location to look for avatars! In this case, looking in the categories. */
        oTarget = jQuery('#wnotify a[href^="/u"]'),
        ilen = oTarget.length;

    for (var index = 0; index < ilen; index++) {
        var oThis = jQuery(oTarget[index]),
            sHref = oThis.attr('href'),
            sTitle = oThis.text();

      if (sHref !== undefined) {
         oThis.closest('div').before('<a href="' + sHref + '" title="' + sTitle + '" class="lastpost-avatar"><img src="http://r26.imgfast.net/users/2617/31/90/74/avatars/1-40.png" alt="no_photo" class="avt-wid" /></a>');
         var oImg = oThis.closest('li').find('.avt-wid'),
         sSrc = sessionStorage.getItem(sHref); /* Relative fast... */
         if (sSrc) {
            oImg.attr('src', sSrc);
         } else {
            jQuery.get(sHref, function(data) { /* Slow and dangerous!!! */
               var image = jQuery('#profile-advanced-right img:first', data).attr('src');
               oImg.attr('src', image);
               sessionStorage.setItem(sHref, image);
            });
         }
      }
    }
};
//]]>
</script>
<style type="text/css">
<!--
#wnotify {
   list-style: outside none none;
}
#wnotify .ellipsis {
   min-height: 42px;
   overflow: auto;
   text-overflow: unset;
   white-space: normal;
   width: auto;
}
#wnotify .see_all {
   border: 1px solid #d2d2d2;
   box-shadow: 0 0 4px rgba(0, 0, 0, 0.07);
   margin-top: 5px;
   padding: 5px;
   text-align: center;
}
#wnotify .content > hr {
   display: none;
}
.lastpost-avatar {
   float: left;
   padding: 2px;
}
.lastpost-avatar img {
   background: none repeat scroll 0 0 #fff;
   border: 1px solid #d8d8d8;
   box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
   float: left;
   height: 28px;
   margin-right: 5px;
   padding: 2px;
   width: 28px;
}
-->
</style>


Result:


So long,

JS

Amazing work, thanks!