Для начало скачиваем картинку и заливаем её на свой хостинг или в каталог с сайтом
/public/style_images/(название стиля)/
Вот сюда и кидаем её.

Далее идем в АдминЦентр вашего форума , переходим во вкладку "Внешний вид" выбираем ваш шаблон , и в
ipb.styles.css вставляем данный код

/********************************************************//* UserInfoPanel как на xenforo *//********************************************************/.user_details {background: rgb(222, 229, 237) url('{style_images_url}/xenmorf.png') repeat-x bottom;border: 1px solid rgb(199, 216, 233);border-top-color: rgb(208, 217, 226);-webkit-border-radius: 3px;-moz-border-radius: 3px;-khtml-border-radius: 3px;border-radius: 3px;-webkit-box-shadow: inset 0 -1px rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.1);-moz-box-shadow: inset 0 -1px rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.1);-khtml-box-shadow: inset 0 -1px rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.1);box-shadow: inset 0 -1px rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.1);background-image: -webkit-linear-gradient(bottom, rgba(255,255,255,0.35), rgba(255,255,255,0) 40px);background-image: -moz-linear-gradient(bottom, rgba(255,255,255,0.35), rgba(255,255,255,0) 40px);background-image: -ms-linear-gradient(bottom, rgba(255,255,255,0.35), rgba(255,255,255,0) 40px);background-image: -o-linear-gradient(bottom, rgba(255,255,255,0.35), rgba(255,255,255,0) 40px);background-image: linear-gradient(to top, rgba(255,255,255,0.35), rgba(255,255,255,0) 40px);position: relative;}.avatar {background-color: rgb(238, 243, 248);padding: 10px;-webkit-border-radius: 3px;-moz-border-radius: 3px;-khtml-border-radius: 3px;border-radius: 3px;-webkit-box-shadow: inset 0 1px rgba(255,255,255,0.75), 0 1px rgba(0,0,0,0.075);-moz-box-shadow: inset 0 1px rgba(255,255,255,0.75), 0 1px rgba(0,0,0,0.075);-khtml-box-shadow: inset 0 1px rgba(255,255,255,0.75), 0 1px rgba(0,0,0,0.075);box-shadow: inset 0 1px rgba(255,255,255,0.75), 0 1px rgba(0,0,0,0.075);background-image: -webkit-linear-gradient(rgba(255,255,255,0.35), rgba(255,255,255,0));background-image: -moz-linear-gradient(rgba(255,255,255,0.35), rgba(255,255,255,0));background-image: -ms-linear-gradient(rgba(255,255,255,0.35), rgba(255,255,255,0));background-image: -o-linear-gradient(rgba(255,255,255,0.35), rgba(255,255,255,0));background-image: linear-gradient(rgba(255,255,255,0.35), rgba(255,255,255,0));}.arrow {position: absolute;top: 10px;right: -10px;display: block;width: 0px;height: 0px;line-height: 0px;border: 10px solid transparent;border-left-color: rgb(199, 216, 233);-moz-border-left-colors: rgb(199, 216, 233);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(238, 243, 248);-moz-border-left-colors: rgb(238, 243, 248);border-right: none;}.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;}.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;}.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;}.ribbon1 {color: #ffffff;background-color: #000000;margin-top: 5px;margin-bottom: 5px;border: 1px solid #333333;}.ribbon1 div {background-color: #333333;}.ribbon2 {background-color: rgb(238, 243, 248);margin-top: 10px;margin-bottom: 5px;border: 1px solid #C4C7C7;}.ribbon2 div {background-color: #C4C7C7;}.extraUserInfo {font-size: 11px;background-color: rgb(222, 229, 237);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%;}

Далее , закрываем ipb.style.css , и уже открываем сам
userInfoPane
Вставляем вот этот код

<div itemscope itemtype="__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><dl class="pairsJustified"><dt>{$this->lang->words['reputation']}:</dt><dd>{$author['pp_reputation_points']}</dd></dl><dl class="pairsJustified"><dt>{$this->lang->words['m_joined']}</dt><dd>{parse date="$author['joined']" format="joined"}</dd></dl></div><if test="authorcfields:|:$author['custom_fields'] != """><div class="extraUserInfo"><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></div></if><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></div>

Вот что мне в нем не нравится, так это черточки вот эти "-----"