Hey there, I'm currently working on Devaon's templates. Don't mind the incoherent stuff. Thanks !
Welcome to Devaon

Back to thread listOnline Users on Toolbar
Jeg
Mon Apr 18, 2022 2:17 am

Display the count of online users in the toolbar and the ability to show the logged-in users list by clicking on it.

Online Users on Toolbar 9MdUgVF Online Users on Toolbar Oee0z7B

In the overall_header template, add the following line somewhere in between the head tags:

Code:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@6.6.96/css/materialdesignicons.min.css" />


In your index_body template, find:

Code:
   <tr>
      <td class="row1"><span class="gensmall">{TOTAL_USERS_ONLINE}<br />
      {RECORD_USERS}<br />
      <br />
      {LOGGED_IN_USER_LIST}</span></td>
   </tr>


Replace with:

Code:
   <tr>
      <td class="row1"><span class="gensmall tuo">{TOTAL_USERS_ONLINE}<br />
      {RECORD_USERS}<br />
                <br />
                <span class="liul">{LOGGED_IN_USER_LIST}</span></span></td>
   </tr>


Create a new javascript on all pages with the following code:

Code:
$(function() {
$(function() {
  $('#fa_right a#fa_hide').before('<div class="toolbar_users"><span class="mdi mdi-account"></span><span class="tu_count"></span></div><div class="online_users" style="display: none;"><span>Users Online</span><div></div></div>');

  $('.tu_count').load('/ span.tuo > strong:first');
  $('.online_users div').load('/ span.liul a');

  $('.toolbar_users').on('click', function() {
      $('.online_users').fadeToggle(150);
  });
});
});


Add the following CSS to your stylesheet:

Code:
.toolbar_users {
    display: inline-block;
    line-height: 30px;
    padding: 0 5px;
    color: #fff;
    margin-left: 10px;
    vertical-align: top;
    cursor: pointer;
}

.online_users {
    position: fixed;
    right: 0;
    top: 30px;
    background-color: white;
    width: 175px;
    max-height: 250px;
    box-sizing: border-box;
    box-shadow: 0 0 30px #30303020;
}

.online_users > span {
    color: #111;
    font-size: 10pt;
    font-weight: 600;
    padding-bottom: 4px;
    display: block;
    margin-bottom: 5px;
    border-bottom: 1px solid #ebebeb;
    background-color: ghostwhite;
    margin-top: 5px;
    padding: 2% 5%;
}

.online_users div a {
    font-size: 9pt;
    display: block !important;
    margin: 2px 0;
}

.online_users > div {padding: 2.5% 10% 5% 10%;}
Jeg
Thu Apr 21, 2022 2:41 pm
Thursday, April 21th 2022
- Updated: Added the (forgotten) necessary changes to one of the templates
- Second image example added