avatars instead of names in who's online

[Risa]

Made this adjustment for my site, CLOSE TO HOME, about a month ago. So, I thought I'd share since it's trending on some other sites I've seen. I don't exactly know how they did it but, this is how I did it.

REPLACE THIS ( LINES 79 - 81 of the HOME layout template )
{foreach $[online_user]}
$[online_user]{if $[online_user.invisible]} <span class="small">(invisible)</span>{/if}$[online_user.comma]
{/foreach}
WITH THIS

{foreach $[online_user]}
        <a href="$[online_user.link.href]" class="tip">$[online_user.avatar_small] <span>$[online_user.name]</span></a>{if $[online_user.invisible]} <span class="small">(invisible)</span>{/if}
{/foreach}
Now, I have a specific tool tip that I created to show the username when you hover over the avatar.

ADD TO THE BOTTOM OF YOUR STYLESHEET


a.tip {
position: relative;
}

a.tip span {
display: none;
position: absolute;
top: -35px;
left: 25px;
width: 75px;
padding: 5px;
z-index: 100;
       font-size: 8px;
       font-family: 'arial';
background: #00BCFC;
color: #fff;
-webkit-border-radius: 5px;
       border-radius: 5px;
}

a:hover.tip {
font-size: 99%; /* IE */
}

a:hover.tip span {
display: block;
}
This particular tooltip is a bright light blue and hovers just above the avatar to the top-right area. You can literally change it to any position or color you want in the a.tip span part of the css. Edit to your heart's content.

[Eileen]

Hello.
How can I make them all in one horizontal line? Right now, they are all vertical.
thgtrilogy.boards.net/

Thank you!

[Risa]

support.proboards.com/thread/513462/online-hour-avatar-listings-tutorial

check out Trinity's. It's sorted for all browser users.

[soup]

this is greatness