Author: Chris

Created: May 25, 2007

Related Tags: group, mod, admin, images, whosonline, regular

Description: Highlight custom members and/or groups in the who's online list on your community

This whosonline script can be used in two different ways, please click the links below to go straight to the instructions

1. Admin/Moderator/Member Online
2. Replacing Text with Images

Admin/Moderator/Member Online

This method allows you to customize your whosonline list by highlighting specific members and groups of members. You can have as many custom online indicators as you like. There are two methods of highlighting users and examples for each method below

Custom Members

This method allows you to assign members to custom groups and then highlight those members in the whosonline list. Below is an example of how this may look on your community

As you can see from the example above, there are two custom sets of users highlighted. To get the same effect on your community, copy and paste the following example

<whosonline type="members" title="Staff Online">
title: Designers
style: font-weight: bold; color: #0000CC;
members: alison@u, Kristin@u

-----

title: Developers
style: font-weight: bold; color: #CC0000;
members: Tachu@u, ransom@u, Chris@u, ceco@u
</whosonline>

You need to follow the same format as the example above for your own members. Each group has a "title", a "style" and "members". The different groups are separated from each other by 5 dashes (-----), blank lines are ignored so you can use as many as you like to keep your code readable. The members of the group are listed exactly as their name appears in the whosonline list. You need to make sure to include the @u, @ez or @boarname part of their profile. Make sure capital letters and spaces are where they should be.

The title isn't visible in the example above, but it is the name of the group that appears in the legend. The style is how you want to highlight the users in your custom group. With different styles you can make users appear in a different color, bold, underline or italic. Each of the styles is separated by a semi-colon (;). Some example styles are (change colours to suit)

style: color: #FF0000;
style: color: #0000FF; font-weight: bold;
style: color: #00FF00; font-style: italic;
style: text-decoration: underline;

As noted above, the "title" of the group does not display. If you also want to show a summary or key of the special users who are online, you need to add an extra option to the opening tag

<whosonline type="members" title="Staff Online" key="true">

Now when the page loads, an extra bar will display beneath the whosonline, as in the image below

The title is now displayed in a summary of how many users are online. You can also see the text "Staff Online" in bold corresponds to the title in blue in the code above.

You can also make the key use the same colours as the names by adding another option, "pretty", for example

<whosonline type="members" title="Staff Online" key="true" pretty="true">

By default the bar will not display of there are no members online who fit in one of the custom groups. To force the bar to always show even when no members are online, use the following code

<whosonline type="members" title="Staff Online" key="true" pretty="true" empty="true">

User Groups

With the updated member management, usernames in the whosonline no longer come with User Group classes. This method has been discontinued.

Extras

There are two optional extras that are available for each group. As well as styling the links, you can also give the usernames a prefix or suffix. For example to add an "@" sign after certain names you would use

title: Designers
style: font-weight: bold; color: #0000CC;
members: alison@u, Kristin@u
suffix: @

You can replace suffix with prefix to put the @ character before the username for example

title: Designers
style: font-weight: bold; color: #0000CC;
members: alison@u, Kristin@u
prefix: @

Or you could use a combination of both

title: Designers
style: font-weight: bold; color: #0000CC;
members: alison@u, Kristin@u
suffix: @
prefix: ~

Text to Images

This method allows you to replace the whosonline text labels with custom images. The script will only replace the default text and not the actual number that accompanies the text. To use the script to replace images copy the following example in to your custom footer

<whosonline type="images">
active : http://www.example.com/whosonline/active.gif
total : http://www.example.com/whosonline/total.gif
registered : http://www.example.com/whosonline/registered.gif
guests : http://www.example.com/whosonline/guests.gif
anonymous : http://www.example.com/whosonline/anonymous.gif
lastday : http://www.example.com/whosonline/last_24hr.gif
mostever : http://www.example.com/whosonline/most_ever.gif
whosonline : http://www.example.com/whosonline/whosonline.gif
</whosonline>

Each of the lines between the <whosonline> tags is a key followed by a colon followed by the url of the image to replace the text with. The keys are self explanitory, active (Active Users), total (Total), registered (Registered Users), guests (Guests), anonymous (Anonymous), lastday (Visitors in the last day), mostever (Most Ever) and whosonline (Who's online in the last 15 minutes). You can leave out one or more of the keys, for example to just replace the whosonline text you would use

<whosonline type="images">
whosonline : http://www.example.com/whosonline/whosonline.gif
</whosonline>