CSS and Positioning

@thepixelme Bro can you help me out with this? I could really use your help.

UPDATE: Screenshot Activity new

I tried fixing it but I’m still stuck with positioning of badge to bottom right of profile pic.

Can you provide a link to your site please and I’ll take a look for you.

Hey @themesumo,

I’m using localhost as of right now. But I have setup a demo account online.

Here’s the link: Test website

Please have a look and let me know. Thanks!

So you want the verified icons to be always positioned to the bottom-right?

You can add this to your Child Theme style.css file, or by using a Custom CSS plugin.

.activity-comments .avatar-wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
    max-width: 50px;
}
.activity-comments .bp-verified {
    position: absolute;
    right: 0;
    bottom: 0;
}
#buddypress div.activity-avatar div.avatar-wrap {
    overflow: hidden;
}

You can do the same for the verified icon in the header too with this:

#buddypress #item-header #item-header-avatar div#avatar-wrap {
    max-width: 110px;
}
#bp-verified-header {
    position: absolute;
    bottom: 0;
    right: 10px;
}

Hope this helps.

• This reply was modified 8 years, 3 months ago by ThemeSumo. Reason: more code
• This reply was modified 8 years, 3 months ago by ThemeSumo.

@themesumo

Hey, Thanks for the help.
I tried the code. This happened: Screenshot comments
Comments are not aligned properly with the avatar pic.

For the header: I want to display the badge after the mention. I tried add_filter( 'bp_get_displayed_user_mentionname', 'bp_show_verified_badge' );
I looked up my theme’s member-header for the same. My theme is using bp_displayed_user_username(); to display the mentionname.

• This reply was modified 8 years, 3 months ago by noobiestrikesagain.

Replace the first snippet of code I gave you with this instead.

.activity-comments .avatar-wrap {
    position: relative;
    width: 100%;
    max-width: 50px;
}
.activity-comments .bp-verified {
    position: absolute;
    height: 50px;
    width: 50px;
    display: block;
}
#buddypress div.activity-avatar div.avatar-wrap {
    overflow: hidden;
}
.acomment-avatar .bp-verified img {
    position: absolute;
    bottom: 0;
    right: 0;
}

This should rectify the comments issue.

Hey,

@themesumo This works absolutely fine!

Thank you so much for the help.

I’m trying to solve the header issue but with no luck. Let me know if you find anything. Ping me if you need ftp access.
In the meantime, I’ll try it own my own.

Once again, Thank you very much!

Hey @themesumo,

I was able to solve header problem by myself.

I used the same code from Plugin’s function.php to theme’s header.php. I was able to echo the image exactly where I wanted it to be.

Thank you very much for you help.

That’s great to hear!