Custom User Online Component
I am running into two issue when creating a custom user online component. The component works but the alignment isn't correct and a dot appears in front of the avatar. How can I fix this? Below is the code.
<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;}
</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="lia-list-standard-inline">
<#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>
</#if>
</div>
</#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>
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>