the profile post in question is IPBok i got this far
If you want it looking like that,
Go to ACP > Look & Feel > Your Skin > Global Template > userInfoPane
Replace Your with this one:
<div itemscope itemtype="http://schema.org/Person" class='user_details'>
<span class='hide' itemprop="name">{$author['members_display_name']}</span>
<span class="arrow"><span></span></span>
<ul class='basic_info'>
<if test="avatar:|:$author['member_id']">
<li class='avatar'>
<if test="canSeeProfiles:|:$this->memberData['g_is_supmod'] OR ( $this->memberData['g_mem_info'] && ! IPSMember::isInactive( $author ) )">
<a itemprop="url" href="{parse url="showuser={$author['member_id']}" template="showuser" seotitle="{$author['members_seo_name']}" base="public"}" title="{$this->lang->words['view_profile']}: {$author['members_display_name']}" class='ipsUserPhotoLink'>
</if>
<if test="hasVariable:|:$this->settings['member_topic_avatar_max']">
<img itemprop="image" src='{$author['pp_main_photo']}' class='ipsUserPhoto ipsUserPhoto_variable' />
<else />
<img itemprop="image" src='{$author['pp_thumb_photo']}' class='ipsUserPhoto ipsUserPhoto_large' />
</if>
<if test="canSeeProfiles2:|:$this->memberData['g_is_supmod'] OR ( $this->memberData['g_mem_info'] && ! IPSMember::isInactive( $author ) )">
</a>
</if>
</li>
<else />
<li class='avatar'>
<img itemprop="image" src='{$author['pp_thumb_photo']}' class='ipsUserPhoto ipsUserPhoto_large' />
</li>
</if>
<if test="rankimage:|:$author['member_rank_img']">
<li class='group_icon'>
<if test="rankimageimage:|:$author['member_rank_img_i'] == 'img'">
<img src='{$author['member_rank_img']}' alt='' />
<else />
{$author['member_rank_img']}
</if>
</li>
</if>
<if test="membertitle:|:$author['member_title']">
<ul class="ribbon">
<li class="ribbon1">
<div class="Rleft"></div>
<div class="Rright"></div>{$author['member_title']}</li>
</ul>
</if>
<ul class="ribbon">
<li class="ribbon2">
<div class="Rleft"></div>
<div class="Rright"></div>
{$author['_group_formatted']}
</li>
</ul>
<div class="extraUserInfo">
<if test="postCount:|:$author['member_id']">
<dl class="pairsJustified">
<dt>{$this->lang->words['m_posts']}</dt>
<dd>{parse expression="$this->registry->getClass('class_localization')->formatNumber( intval( $author['posts'] ) )"}</dd>
</dl>
</if>
</div>
<if test="authorwarn:|:$author['show_warn']">
<li>
<if test="hasWarningId:|:$options['wl_id']">
<img src='{$this->settings['img_url']}/warn.png' class='clickable' onclick='warningPopup( this, {$options['wl_id']} )' title='{$this->lang->words['warnings_issued']}' />
</if>
<a class='desc lighter blend_links' href='{parse url="app=members&module=profile&section=warnings&member={$author['member_id']}&from_app={$this->request['app']}&from_id1={$contentid}&from_id2={$options['id2']}" base="public"}' id='warn_link_{$contentid}_{$author['member_id']}' title='{$this->lang->words['warn_view_history']}'>{parse expression="sprintf( $this->lang->words['warn_status'], $author['warn_level'] )"}</a>
</li>
</if>
</ul>
<if test="authorcfields:|:$author['custom_fields'] != """>
<ul class='custom_fields'>
<foreach loop="customFieldsOuter:$author['custom_fields'] as $group => $data">
<foreach loop="customFields:$author['custom_fields'][ $group ] as $field">
<if test="$field != ''">
<li>
{$field}
</li>
</if>
</foreach>
</foreach>
</ul>
</if>
</div>Then replace your author_info style in CSS > ipb_stylesFind /* AUTHOR INFO (& RELATED) STYLES */ by pressing cntrl + f and searching for it
.author_info {
width: 155px;
float: left;
font-size: 12px;
text-align: center;
padding: 10px 10px;
line-height: 150%;
}
.ribbon {
font-weight: bold;
font-size: 10px;
margin: -5px -4px -2px;
text-align: center;
}
.ribbon li {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
-webkit-border-top-right-radius: 0px;
-moz-border-radius-topright: 0px;
-khtml-border-top-right-radius: 0px;
border-top-right-radius: 0px;
-webkit-border-top-left-radius: 0px;
-moz-border-radius-topleft: 0px;
-khtml-border-top-left-radius: 0px;
border-top-left-radius: 0px;
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0, 0.25);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0, 0.25);
-khtml-box-shadow: 0px 1px 3px rgba(0,0,0, 0.25);
box-shadow: 0px 1px 3px rgba(0,0,0, 0.25);
padding: 1px;
position: relative;
margin-bottom: 5px;
}
.ribbon1 {
color: #fff;
background-color: #282828;
margin-top: 5px;
margin-bottom: 5px;
border: 1px solid #333;
}
.ribbon li .Rleft {
-webkit-border-top-left-radius: 3px;
-moz-border-radius-topleft: 3px;
-khtml-border-top-left-radius: 3px;
border-top-left-radius: 3px;
left: -1px;
}
.ribbon li div {
position: absolute;
top: -4px;
width: 4px;
height: 4px;
}
.ribbon1 div {
background-color: #333;
}
.ribbon li .Rright {
-webkit-border-top-right-radius: 3px;
-moz-border-radius-topright: 3px;
-khtml-border-top-right-radius: 3px;
border-top-right-radius: 3px;
right: -1px;
}
.ribbon2 {
background-color: rgb(50, 50, 50);
margin-top: 10px;
margin-bottom: 5px;
border: 1px solid #3e3e3e;
}
.ribbon2 div {
background-color: #3e3e3e;
}
.extraUserInfo {
font-size: 11px;
background-color: rgb(50, 50, 50);
padding: 0px 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-khtml-border-radius: 4px;
border-radius: 4px;
}
.pairsJustified {
margin: 2px 0 0;
font-size: 9px;
border-bottom: 1px dashed #222!important;
overflow: hidden;
line-height: 1.5;
}
.pairsJustified dt {
padding-right: 5px;
font-size: 11px!important;
float: left;
text-align: left;
max-width: 100%;
margin-right: 5px;
color: rgb(55, 134, 216);
}
.pairsJustified dd {
float: right;
font-size: 10px!important;
text-align: right;
max-width: 100%;
}
.fbkProfStat.uP {
margin-top: 3px;
}
.fbkProfStat.uP li {
margin-top: 6px;
}
.fbkProfStat .value, #feedbackStats .value, #topMembers .value {
background: none repeat scroll 0 0 #A0A0A0;
border-radius: 2px 2px 2px 2px;
color: #FFF;
display: inline-block;
font-weight: bold;
margin-right: 3px;
padding: 2px 6px;
}
.author_info .group_title {
color: #dddddd;
margin-top: 5px;
}
.author_info .member_title { margin-bottom: 5px; word-wrap: break-word; }
.author_info .group_icon { margin-bottom: 3px; }
.arrow {
position: absolute;
top: 10px;
right: -10px;
display: block;
width: 0px;
height: 0px;
line-height: 0px;
border: 10px solid transparent;
border-left-color: rgb(50, 50, 50);
-moz-border-left-colors: rgb(50, 50, 50);
border-right: none;
_display: none;
}
.arrow span {
position: absolute;
top: -10px;
left: -11px;
display: block;
width: 0px;
height: 0px;
line-height: 0px;
border: 10px solid transparent;
border-left-color: rgb(50,50,50);
-moz-border-left-colors: rgb(50,50,50);
border-right: none;
}
.avatar {
background-color: rgb(50, 50, 50);
padding: 10px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: inset 0 1px rgba(50, 50, 50,0.75), 0 1px rgba(0,0,0,0.075);
-moz-box-shadow: inset 0 1px rgba(50, 50, 50,0.75), 0 1px rgba(0,0,0,0.075);
-khtml-box-shadow: inset 0 1px rgba(50, 50, 50,0.75), 0 1px rgba(0,0,0,0.075);
box-shadow: inset 0 1px rgba(50, 50, 50,0.75), 0 1px rgba(0,0,0,0.075);
background-image: -webkit-linear-gradient(rgba(50,50,50,0.35),rgba(50,50,50,0));
background-image: -moz-linear-gradient(rgba(50,50,50,0.35),rgba(50,50,50,0));
background-image: -ms-linear-gradient(rgba(50,50,50,0.35),rgba(50,50,50,0));
background-image: -o-linear-gradient(rgba(50,50,50,0.35),rgba(50,50,50,0));
background-image: linear-gradient(rgba(50,50,50,0.35),rgba(50,50,50,0));
}
.user_details {
background: rgb(50, 50, 50);
border: 1px solid rgb(70, 70, 70);
border-top-color: rgb(70, 70, 70);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: inset 0 -1px rgba(50, 50, 50,0.3), 0 1px 2px rgba(0,0,0,0.1);
-moz-box-shadow: inset 0 -1px rgba(50, 50, 50,0.3), 0 1px 2px rgba(0,0,0,0.1);
-khtml-box-shadow: inset 0 -1px rgba(50, 50, 50,0.3), 0 1px 2px rgba(0,0,0,0.1);
box-shadow: inset 0 -1px rgba(50, 50, 50,0.3), 0 1px 2px rgba(0,0,0,0.1);
background-image: -webkit-linear-gradient(rgba(50,50,50,0.35),rgba(50,50,50,0));
background-image: -moz-linear-gradient(rgba(50,50,50,0.35),rgba(50,50,50,0));
background-image: -ms-linear-gradient(rgba(50,50,50,0.35),rgba(50,50,50,0));
background-image: -o-linear-gradient(rgba(50,50,50,0.35),rgba(50,50,50,0));
background-image: linear-gradient(rgba(50,50,50,0.35),rgba(50,50,50,0));
position: relative;
}