CSS and Positioning

  • Resolved noobiestrikesagain

    (@noobiestrikesagain)


    9 years, 6 months ago

    Hey,

    I m facing similar problem to this thread.

    Screenshot of Activity
    I would like to keep it same for the comment (verified badge with profile pic just like in activity update)

    Screenshot for Header
    I tried add_filter( 'bp_get_displayed_user_mentionname', 'bp_show_verified_badge' ); to display the badge after the mention but it failed to work.
    I looked up my theme’s member-header for the same. My theme is using ‘bp_displayed_user_username();` to display the mentionname.

    I would be really thankful for the help.

    Thanks!

Viewing 10 replies - 1 through 10 (of 10 total)
  • Thread Starter noobiestrikesagain

    (@noobiestrikesagain)

    9 years, 6 months ago

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

    Thread Starter noobiestrikesagain

    (@noobiestrikesagain)

    9 years, 6 months ago

    UPDATE: Screenshot Activity new

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

    ThemeSumo

    (@themesumo)

    9 years, 6 months ago

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

    Thread Starter noobiestrikesagain

    (@noobiestrikesagain)

    9 years, 6 months ago

    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!

    ThemeSumo

    (@themesumo)

    9 years, 6 months ago

    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 9 years, 6 months ago by ThemeSumo. Reason: more code
    • This reply was modified 9 years, 6 months ago by ThemeSumo.
    Thread Starter noobiestrikesagain

    (@noobiestrikesagain)

    9 years, 6 months ago

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

    ThemeSumo

    (@themesumo)

    9 years, 6 months ago

    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.

    Thread Starter noobiestrikesagain

    (@noobiestrikesagain)

    9 years, 6 months ago

    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!

    Thread Starter noobiestrikesagain

    (@noobiestrikesagain)

    9 years, 6 months ago

    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.

    ThemeSumo

    (@themesumo)

    9 years, 6 months ago

    That’s great to hear!

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

The topic ‘CSS and Positioning’ is closed to new replies.