phpbb3 & invision : Indicate the online status of a user in a profile field

by Ange Tuteur April 28th 2014, 9:24 am

Indicate the online status of a user in a profile field for phpbb3 & invision

This tutorial will help you add a profile field which indicates the online status of a user for your Forumotion forum.

For this tutorial to work for you, the version of your forum must be phpbb3 or invision.

Creating the profile field

To create the profile field go to Administration Panel ► Users & Groups ► Users ► Profiles add a new profile field and fill in the following information :

Type : Text zone
Name : Status
Description : Your choice
URL icon : Your choice
Necessarily filled ? : No
Display : Messages
Display type : Text
Who can modify the profile field value ? : No one
Display this field for users that are at least : Guests
Separator : Back to the line

Paste the following into the default content and save :

Code:: [table id="is_on" class="user_status"][tr][td]Online[/td][/tr][/table][table id="is_off" class="user_status"][tr][td]Offline[/td][/tr][/table]

To make sure all users have the default content, edit the field, scroll to the bottom, and click 'Replace the content'. Click 'yes' to apply the default content for all existing members.

Adding the CSS

Go to Administration Panel ► Display ► Colors ► CSS stylesheet. So the field functions properly when members are online or offline, paste the following into your sheet and submit.

Code:: .user_status { vertical-align:top; border-spacing:0; display:inline; } #is_on.user_status { color:green } #is_off.user_status { color:red } .post #is_on.user_status { display:none } .post.online #is_off.user_status{ display:none } .post.online #is_on.user_status { display:inline }

Explanation :
.user_status : is the class given to both the online and offline tables.
#is_on : is the id given to the table displayed when a member is online.
#is_off : is the id given to the table displayed when a member is offline.

You can change the color of the online and offline texts by changing color:green; or color:red; to the color of your choice. You can use hex, color names, or RGB.

You can even be creative and change the font with font-family or add a glow with text-shadow.

Code:: #is_on.user_status { color:green; font-family:papyrus; text-shadow:0px 0px 3px green; } #is_off.user_status { color:red; font-family:papyrus; text-shadow:0px 0px 3px red; }