Skip to:
Content
Pages
Categories
Search
Top
Bottom

Reply To: [Resolved] How to add Online Offline Border to Avatar

@danbp

Participant

@dono12,

when the cover image option is enabled, BP use cover-image-header.php not member-header.

To get your idea to work, you need a function to calculate who is online and to add a class to the exiting div. Depending the result, we can then add an online or an offline class.
And of course, some css rules.

The function to add this class to the div with an action hook.
Add it to bp-custom.php

function check_connected(){

   $last_activity = bp_get_user_last_activity( bp_displayed_user_id() );

   $curr_time = time(); 

   $diff = $curr_time - strtotime( $last_activity );

   $time = 5 * 60;  // = 3mn - time must be in seconds

if( $diff < $time ) { 
   echo 'online';
     } else {
   echo 'offline';
   }
}
add_action( 'online_class', 'check_connected' );

Now you just have to add the hook to the template. Open from within child-theme, /buddypress/members/single/cover-image-header.php
Go to line 25, and change
<div id="item-header-avatar">
to
<div id="item-header-avatar" class="<?php do_action( 'online_class' ); ?>">

Open /child-theme/style.css and add:

div.online img {
    border: solid 2px #008000!important;
    background: rgba( 255, 255, 255, 0.8 )!important;
}

div.offline img {
    border: solid 2px #be3631!important;
    background: rgba( 255, 255, 255, 0.8 )!important;
}

And voila, you’re done !

Note: you can use the same hook in member-header.php, so you can enable/disable cover-image without loosing the on/offline layout on profile header avatar.

Skip to toolbar