Forum Discussion

skylinegtr's avatar
skylinegtr
Mentor
10 years ago

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 th...
  • OlivierS's avatar
    OlivierS
    10 years ago

    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>
OlivierS's avatar
OlivierS
Lithium Alumni (Retired)

skylinegtr

 

It looks like your icons are displayed in 2 different ways.

The first line seems to be fine, while the second (and third line), with the 'dot' issue. The dots comes from the <ul> tag (list). 

You need to change your CSS in order to remove the dots. But you have to be careful. It has to be specific to your avatars ... otherwise it will change all your list (usually used in menus too).

 

Try to use FireBug to see what class is assign to your avatars, and modify the class on the fly.

 

PM me the URL where I can see this if you want so I can take a quick look at it (if no one else respond to this thread)

OlivierS's avatar
OlivierS
Lithium Alumni (Retired)
10 years ago

skylinegtr 

 

A small mistake in your code. Instead of:

 

</#if>
</div>

I think your should have:

 

</div>  
</#if>

Otherwise, on some occasion, you might open your <div> and never close it ...

  • OlivierS's avatar
    OlivierS
    Lithium Alumni (Retired)
    10 years ago

    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>