Skip to:
Content
Pages
Categories
Search
Top
Bottom

How to Center Avatar and Tabs on Profile Page


  • sharongraylac
    Participant

    @sharongraylac

    Hello!

    For some reason, I’m having a bit of trouble centering (horizontally) the avatar and navigation tabs on the profile page.

    Here’s a sample link: http://bellynsoul.com/members/admin/

    Does anyone know how to do this?

    Thank you!
    Sharon
    bellynsoul.com

Viewing 13 replies - 1 through 13 (of 13 total)

  • danbp
    Moderator

    @danbp

    Hi @sharongraylac,

    try:

    #item-header-avatar img,
    #object-nav ul {
    text-align: center!important;
    }


    sharongraylac
    Participant

    @sharongraylac

    Thanks so much, danbp!

    Unfortunately, it’s not working though…

    This seems like an easy CSS fix, but I can’t seem to get anything to stick! :/

    Any other thoughts?

    Thanks again,
    Sharon


    danbp
    Moderator

    @danbp

    OK, let’s try differently.

    
    #buddypress #item-header {
    border: solid 1px red!important;
    background-color: yellow!important;
    }
    
    #buddypress #item-header-avatar  {
    border: solid 2px black!important;
    height: 150px!important;
    width: 150px!important;
    margin: auto!important;
    }
    
    #buddypress #item-header-content {
    border: solid 1px blue!important;
    background-color: green!important;
    }

    On the right of the avatar, there are by default some additionnal information: @username and latest activity date/time.
    This is in the div item-header-content and span tags. You probably changed that with a display:none, but it’s still in source code…

    The div item-header-avatar must fit to your avatar width and height. Here 150px, but depends of your own settings.

    All is colored so you can “see” what’s going on.


    sharongraylac
    Participant

    @sharongraylac

    Okay, getting closer, I can tell…

    Is this what you were anticipating?

    http://bellynsoul.com/members/admin/

    Thanks!!!
    Sharon


    sharongraylac
    Participant

    @sharongraylac

    P.S. This brings up another issue I just noticed… For some reason my admin profile photo is smaller than other members’.

    Here’s another member’s profile:

    http://bellynsoul.com/members/adanford/


    sharongraylac
    Participant

    @sharongraylac

    Please ignore that last part about the smaller image… My goof. πŸ™‚


    sharongraylac
    Participant

    @sharongraylac

    Okay… So the code you gave me is working great for the avatar (and the colored backgrounds were very helpful too)… THANK YOU!!!!! πŸ™‚

    I still can’t seem to figure out where that @username went. I know I hid the activity, but I didn’t think I hid this. I’ll keep searching.

    I just wanted to let you know how much I appreciate your help. I’ve been working on this for a while without much luck.

    Truly,
    Sharon


    shanebp
    Moderator

    @shanebp

    >I still can’t seem to figure out where that @username went.

    Look in this file, hopefully in [your-theme]\buddypress\members\single\member-header.php

    Look near the top for bp_displayed_user_mentionname();

    btw – you should not use ‘admin’ as a username.
    https://codex.wordpress.org/Hardening_WordPress#Security_through_obscurity

    http://www.wpbeginner.com/wp-tutorials/how-to-change-your-wordpress-username/


    sharongraylac
    Participant

    @sharongraylac

    That’s really odd… I haven’t even copied any Buddypress php files into my child theme yet. Must be something I did in the CSS?

    Thanks for the heads up! No more admin πŸ™‚


    sharongraylac
    Participant

    @sharongraylac

    @shanebp,

    I did locate the code you mentioned (in the core files). Do you recommend changing anything?

    I’m still totally perplexed about where that @username went…

    Thanks again!
    Sharon


    danbp
    Moderator

    @danbp

    Have you tested with 2015 theme ? Does @mention appear near profile avatar ?

    If it does, ask on your (premium) theme support.


    sharongraylac
    Participant

    @sharongraylac

    Sorry to take so long- this last post slipped by me!

    Yes, I did test with 2015 and still do not see it…

    The odd thing is I swore I saw this at one point, but I have no idea what happened to it. I even deleted ALL of the custom CSS I created for Buddypress, and still no “@username”.

    I’m also still having trouble centering the navigation/sub-nav on the profile page as well. At least the avatar is fixed! πŸ™‚

    Thanks for your help!


    sharongraylac
    Participant

    @sharongraylac

    Okay, so the mystery is solved on the @username issue…

    After looking closer at the php file, I now know that “Activity” must be enabled for this to show up!

    Now if only I could figure out that centering issue…

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘How to Center Avatar and Tabs on Profile Page’ is closed to new replies.
Skip to toolbar