Title: CSS and Positioning
Last modified: November 15, 2016

---

# CSS and Positioning

 *  Resolved [noobiestrikesagain](https://wordpress.org/support/users/noobiestrikesagain/)
 * (@noobiestrikesagain)
 * [9 years, 6 months ago](https://wordpress.org/support/topic/css-and-positioning/)
 * Hey,
 * I m facing similar problem to this [thread](https://wordpress.org/support/topic/css-124/).
 * [Screenshot of Activity](http://i.imgur.com/kOjVng2.png)
    I would like to keep
   it same for the comment (verified badge with profile pic just like in activity
   update)
 * [Screenshot for Header](http://imgur.com/kaPTpON)
    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!
    -  This topic was modified 9 years, 6 months ago by [noobiestrikesagain](https://wordpress.org/support/users/noobiestrikesagain/).
      Reason: tag

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

 *  Thread Starter [noobiestrikesagain](https://wordpress.org/support/users/noobiestrikesagain/)
 * (@noobiestrikesagain)
 * [9 years, 6 months ago](https://wordpress.org/support/topic/css-and-positioning/#post-8440277)
 * [@thepixelme](https://wordpress.org/support/users/thepixelme/) Bro can you help
   me out with this? I could really use your help.
 *  Thread Starter [noobiestrikesagain](https://wordpress.org/support/users/noobiestrikesagain/)
 * (@noobiestrikesagain)
 * [9 years, 6 months ago](https://wordpress.org/support/topic/css-and-positioning/#post-8440453)
 * UPDATE: [Screenshot Activity new ](http://i.imgur.com/Mnuyiat.png)
 * I tried fixing it but I’m still stuck with positioning of badge to bottom right
   of profile pic.
 *  [ThemeSumo](https://wordpress.org/support/users/themesumo/)
 * (@themesumo)
 * [9 years, 6 months ago](https://wordpress.org/support/topic/css-and-positioning/#post-8440572)
 * Can you provide a link to your site please and I’ll take a look for you.
 *  Thread Starter [noobiestrikesagain](https://wordpress.org/support/users/noobiestrikesagain/)
 * (@noobiestrikesagain)
 * [9 years, 6 months ago](https://wordpress.org/support/topic/css-and-positioning/#post-8443617)
 * Hey [@themesumo](https://wordpress.org/support/users/themesumo/),
 * I’m using localhost as of right now. But I have setup a demo account online.
 * Here’s the link: [Test website](http://demo.latestmasala.com/members/demoaccount/)
 * Please have a look and let me know. Thanks!
 *  [ThemeSumo](https://wordpress.org/support/users/themesumo/)
 * (@themesumo)
 * [9 years, 6 months ago](https://wordpress.org/support/topic/css-and-positioning/#post-8443915)
 * So you want the verified icons to be always positioned to the bottom-right?
 * You can add this to your [Child Theme](https://codex.wordpress.org/Child_Themes)
   style.css file, or by using a [Custom CSS](http://www.mhthemes.com/blog/wordpress-plugins-to-implement-code/#simple-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](https://wordpress.org/support/users/themesumo/).
      Reason: more code
    -  This reply was modified 9 years, 6 months ago by [ThemeSumo](https://wordpress.org/support/users/themesumo/).
 *  Thread Starter [noobiestrikesagain](https://wordpress.org/support/users/noobiestrikesagain/)
 * (@noobiestrikesagain)
 * [9 years, 6 months ago](https://wordpress.org/support/topic/css-and-positioning/#post-8444807)
 * [@themesumo](https://wordpress.org/support/users/themesumo/)
 * Hey, Thanks for the help.
    I tried the code. This happened: [Screenshot comments](http://demo.latestmasala.com/wp-content/uploads/2016/11/Capturecomment.png)
   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 9 years, 6 months ago by [noobiestrikesagain](https://wordpress.org/support/users/noobiestrikesagain/).
 *  [ThemeSumo](https://wordpress.org/support/users/themesumo/)
 * (@themesumo)
 * [9 years, 6 months ago](https://wordpress.org/support/topic/css-and-positioning/#post-8445010)
 * 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](https://wordpress.org/support/users/noobiestrikesagain/)
 * (@noobiestrikesagain)
 * [9 years, 6 months ago](https://wordpress.org/support/topic/css-and-positioning/#post-8445368)
 * Hey,
 * [@themesumo](https://wordpress.org/support/users/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](https://wordpress.org/support/users/noobiestrikesagain/)
 * (@noobiestrikesagain)
 * [9 years, 6 months ago](https://wordpress.org/support/topic/css-and-positioning/#post-8450243)
 * Hey [@themesumo](https://wordpress.org/support/users/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](https://wordpress.org/support/users/themesumo/)
 * (@themesumo)
 * [9 years, 6 months ago](https://wordpress.org/support/topic/css-and-positioning/#post-8450305)
 * That’s great to hear!

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

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

## Tags

 * [buddyverified](https://wordpress.org/support/topic-tag/buddyverified/)
 * [css](https://wordpress.org/support/topic-tag/css/)

 * 10 replies
 * 2 participants
 * Last reply from: [ThemeSumo](https://wordpress.org/support/users/themesumo/)
 * Last activity: [9 years, 6 months ago](https://wordpress.org/support/topic/css-and-positioning/#post-8450305)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics