How to Make Horizontal Userinfopane On IP.Board. it will beautify your website, What it is going to look like:
Please note that this tutorials is based on the Default IP.Board (3.4.x) skin and may be slightly different or incorrect depending on other variables (i.e skin, board version etc.) For support, questions, or corrections feel free to post your reply.
We will have to be making edits to the following:
- UserInfoPane (Global Templates)
- IncludeRTL (Global Templates)
- ipb_styles.css
Replace userinfopane with this:
<div itemscope itemtype="http://schema.org/Person" class='user_details'> <div style='float:left'>
<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' width="100px" height="100px"/>
<else />
<img itemprop="image" src='{$author['pp_thumb_photo']}' class='ipsUserPhoto ipsUserPhoto_large' width="100px" height="100px"/>
</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' width="100px" height="100px"/>
</li>
</if>
</ul>
</div>
<div style='float:left;margin-left:10px;'>
<ul class='basic_info'>
<if test="membertitle:|:$author['member_title']">
<p class='desc member_title'>{$author['member_title']}</p>
</if>
<if test="postMember:|:$author['member_id']">
<span itemprop="creator name" class="author vcard post-name">{parse template="userHoverCard" group="global" params="$author"}</span>
<else />
{parse template="userHoverCard" group="global" params="$author"}
</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>
</ul>
</div>
<div style='float:left;margin-left:200px;width:100px'>
</div>
<div style='float:right;margin:5px 50px'>
<ul class='basic_info'>
<if test="postCount:|:$author['member_id']">
<li class='post_count desc lighter'>
<span class="icon span-icon-text icon-comment-new"></span>
{parse expression="$this->registry->getClass('class_localization')->formatNumber( intval( $author['posts'] ) )"} {$this->lang->words['m_posts']}
</li>
</if>
<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>
<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>
</div>
Now in IncludeRTL find:
<if test="hasMemberTopicMax:|:$this->settings['member_topic_avatar_max']">
<!-- Forces topic photo to show without thumb -->
<style type='text/css'>
.ipsUserPhoto_variable { max-width: {parse expression="intval($this->settings['member_topic_avatar_max'])"}px !important; }
<if test="RTLMargin:|:$this->isRtlLang">
.post_body { margin-right: {parse expression="((intval($this->settings['member_topic_avatar_max'] + 25 ) < 185 ) ? 185 : intval($this->settings['member_topic_avatar_max'] + 25 ) )"}px !important; }
<else />
.post_body { margin-left: {parse expression="((intval($this->settings['member_topic_avatar_max'] + 25 ) < 185 ) ? 185 : intval($this->settings['member_topic_avatar_max'] + 25 ) )"}px !important; }
</if>
</style>
</if>
and remove it.
Lastly, in ipb_styles.css locate:
AUTHOR INFO (& RELATED) STYLES
And replace that entire sub-section (above board-index-styles) with:
/* AUTHOR INFO (& RELATED) STYLES */
.author_info{
width:auto;
font-size:12px;
padding:10px 10px;
line-height:150%;
border-bottom:1px solid lightgrey;
clear:both;height:100px
}
.author_info .group_title{color:#5a5a5a;}
.author_info .member_title{word-wrap:break-word}
.author_info .group_icon{margin-bottom:2px}
.custom_fields {
color: #818181;
}
.custom_fields .ft {
color: #505050;
margin-right: 3px;
}
.custom_fields .fc {
word-wrap: break-word;
}
.user_controls {
text-align: center;
margin: 6px 0;
}
.user_controls li a {
display: inline-block;
background: #f6f6f6;
background: -moz-linear-gradient(top, #f6f6f6 0%, #e5e5e5 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6f6f6), color-stop(100%,#e5e5e5)); /* webkit */
border: 1px solid #dbdbdb;
-moz-box-shadow: 0px 1px 0px rgba(255,255,255,1) inset, 0px 1px 0px rgba(0,0,0,0.3);
-webkit-box-shadow: 0px 1px 0px rgba(255,255,255,1) inset, 0px 1px 0px rgba(0,0,0,0.3);
box-shadow: 0px 1px 0px rgba(255,255,255,1) inset, 0px 1px 0px rgba(0,0,0,0.3);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
padding: 5px;
color: #616161;
}
Last, but not least, search for:
and change it to
Save and you will have a horizontal userinfopane.
Just a word of forewarning, this code does not have the usergroup text (Administrator, Moderator etc) included on the author_info. It's easy to add, but it was left out intentionally because this was what I currently use for my board.
