Custom User Online Component

skylinegtr

Try:

<style>
.lia-panel-heading-bar-title { float:left; }
.lia-panel-heading-bar-title2 { float:right; font-size: 18px; color: #EE6129; margin-top: -20px;}
.lia-panel-content-wrapper1 { border-top: thin solid #F6F6F6; background-color:transparent; margin-bottom:10px;}
.online_users ul, li {list-style-type: none;}
</style>

<div class="lia-panel lia-panel-standard ActionLinksTaplet Chrome lia-component-community-widget-admin-links">
  <div class="lia-decoration-border">
    <div class="lia-decoration-border-top">
      <div></div>
    </div>
    <div class="lia-decoration-border-content">
      <div>
        <div class="lia-panel-heading-bar-wrapper">
          <div class="lia-panel-heading-bar">
            <span class="lia-panel-heading-bar-title">Users Online</span>
            <span class="lia-panel-heading-bar-title2">
            <#assign member_count = rest('/users/online/registered/count').value?number />
            <#assign guest_count = rest('/users/online/anonymous/count').value?number />
            ${member_count} <#if member_count <= 1>MEMBERS | <#else>MEMBERS </#if> ${guest_count} <#if guest_count <= 1>GUESTS<#else> GUESTS</#if></span>
          </div>
        </div>
        <div class="lia-panel-content-wrapper1">
          <div class="lia-panel-content">
            <div id="communityAdminLinksTaplet" class="ActionLinksTaplet">
              <div class="lia-users-online-recent">
                <ul id="list_0" class="online_users">
                  <#assign seen_users = {} />
                  <#list rest('/users/online?page_size=30&restapi.response_style=view').users.user as online_user>
                  <#if ! seen_users[online_user.@href]??>
                    <div class="q_caption" style="margin: 5px; text-align: center; font-size: 12px; float: left;">
                      <#assign seen_users = seen_users + {online_user.@href:1} />
                      <#assign online_user_ranking = rest(online_user.@href + '/ranking').ranking />
                      <#assign avatar_info = restadmin(online_user.@href + "/profiles/avatar").image />
                      <li style="float:none!important;"><span class="UserName lia-user-name"> <img class="lia-user-rank-icon-left" title="${online_user_ranking.name}" alt="${online_user_ranking.name}"
src="${avatar_info.url}" style="width: auto; height: auto; max-width: 64px; max-height: 36px;" /> <a
class="lia-link-navigation lia-page-link lia-user-name-link"
style="<#if online_user_ranking.display.color != ''>color: #${online_user_ranking.display.color}</#if>"
target="_self" href="${online_user.@view_href}"><span class="<#if online_user_ranking.display.bold == 'true'>login-bold</#if>"><br />${online_user.login}</span></a></span>
                      </li>
                    </div>
                  </#if>
                 </#list>
                </ul>
              </div>
              <div class="lia-view-all">
                <a class="lia-link-navigation view-all-link" id="link_147" href="/t5/forums/usersonlinepage">View All Members Online</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="lia-decoration-border-bottom">
      <div>
      </div>
    </div>
  </div>
</div>