Skip to:
Content
Pages
Categories
Search
Top
Bottom

[Resolved] How to add Online Offline Border to Avatar


  • Dono12
    Participant

    @dono12

    7 years, 10 months ago

    I’ve been trying to figure out how to add Online Offline Border to user Avatar with user cover image upload enabled. I have it working fine if cover image upload is disabled in Settings:

    Place this in member-header.php:

    <?php
global $bp;
function check_is_user_online($user_id){
if ( bp_has_members( 'type=online&include='.$user_id) ) return true;
else return false;
}
$this_id = bp_displayed_user_id();
$is_online = check_is_user_online($this_id);
if ($is_online) echo '<div id="item-header-avatar" class="online"></div>';
else{ echo '<div id="item-header-avatar" class="offline"></div>';
}
?>

    But when I enable Cover image upload and give the Online div a green border color:

    #buddypress #item-header-cover-image #item-header-avatar img.avatar {
    border: solid 2px #008000;
    background: rgba( 255, 255, 255, 0.8 );
}

    and the Offline border a red color

    #buddypress #item-header-cover-image #item-header-avatar img.avatar-offline {
    border: solid 2px #be3631;
    background: rgba( 255, 255, 255, 0.8 );
}

    The green border shows while the red doesn’t show. Have anyone tried or know the solution to this?

    The new div call in member-header.php

    if ($is_online) echo '<div id="buddypress item-header-cover-image item-header-avatar" class="avatar">';
else{ echo '<div id="buddypress item-header-cover-image item-header-avatar" class="avatar-offline">';
Viewing 3 replies - 1 through 3 (of 3 total)

  • danbp
    Moderator

    @danbp

    7 years, 10 months ago

    @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.


    Dono12
    Participant

    @dono12

    7 years, 10 months ago

    Thanks a million danbp, it all worked out as you stated. You were quite thorough with your explanation…

    Much appreciated.


    danbp
    Moderator

    @danbp

    7 years, 10 months ago

    You’re welcome! 😉

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘[Resolved] How to add Online Offline Border to Avatar’ is closed to new replies.

Topic Info

Topic Tags

Skip to toolbar