Buddypress widget appearance

Hey there!
I want to change the appearance of the default buddypress login widget. I want to remove the logout link and have the username appear on the left side of the avatar. The red box is how it looks now. The green box is how I want it to look.

I would also like to know how to display a clickable avatar of the currently logged user in the header on its own, without using the buddypress widgets.
Thanks..

  • Dimitris

    Hello Mwale,

    hope you're having a beautiful day and thanks for asking! :slight_smile:

    I want to change the appearance of the default buddypress login widget. I want to remove the logout link and have the username appear on the left side of the avatar

    Please try the following CSS snippet in your child-theme or through a plugin like Simple Custom CSS.
    You may need to alter the "px" values in there according to your needs. :wink:

    .widget.buddypress .bp-login-widget-user-avatar {
      float: right;
      margin-right: 150px;
    }
    .bp-login-widget-user-link {
      padding-left: 0 !important;
      margin-top: 10px;
    }
    .bp-login-widget-user-logout a.logout {
      display: none;
    }

    I would also like to know how to display a clickable avatar of the currently logged user in the header on its own, without using the buddypress widgets.

    You can use something like this in a template file for current logged in user
    <a href="<?php echo bp_loggedin_user_domain(); ?>"><?php echo get_avatar(get_current_user_id(), 50); ?></a>
    The "50" part is the avatar's width.

    Hope that helps!
    Warm regards,
    Dimitris

  • Dimitris

    Hey there Mwale,

    hope you're doing good today! :slight_smile:

    Can you please replace previous CSS snippet with the following one?

    .widget_bp_core_login_widget {
      display: inline-block;
    }
    .widget.buddypress .bp-login-widget-user-avatar {
      float: right;
    }
    .bp-login-widget-user-link {
      padding-left: 0 !important;
      margin-right: 10px;
    }
    .bp-login-widget-user-logout a.logout {
      display: none;
    }

    I may not be able to see this in action but should do the trick for you. :wink:

    Thanks as always,
    Dimitris

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.