Leaderboard

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&amp;module=profile&amp;section=warnings&amp;member={$author['member_id']}&amp;from_app={$this->request['app']}&amp;from_id1={$contentid}&amp;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; }