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:
margin: 0 10px 0 185px;
and change it to
margin: 0 10px 0 15px;
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.
Title: How to Make Horizontal Userinfopane On IP.BoardPosted by:
Published :2013-09-17T10:00:00-07:00
How to Make Horizontal Userinfopane On IP.Board
IP.Board Tutorials
- How to Remove "License Key Missing" Warning in ACP New Tutorial 2015
- [ Tutorial ] How to change the default mobile skin in 3.4.x
- How to Easily Smooth Board Width Changer On IP. Board
- How to Easily Disable Fast Reply On IP. Board
- Show Forum Description Inside Tooltips On IP. Board
- [Tutorial] Creating Some Pretty BBcode On IP. Board
- Forum Hover Colour On IP. Board
- How to Easily Arrange Subforum In 3 Columns On IP. Board
- How to Easily Make-Block Ad | Advertising Space On IP. Board
- Add Twitter, Facebook Icons On Header IP. Board
- Protect Nulled IP Board from IPS
- Add Charm Bar On IP Board
- How To Easily Edit The Copyright Text For IP On Board
- IPB 3.4.x Missing Editor Box On IP Board
- [App] Tutorials On IP. Board
- How to Easily Smooth Scroll To Top Button On IP. Board
- How To Easily Edit Shoutbox Ajax Refresh Settings On IP Board
- Group Format (Hook) Fix for 3.4.x On IP Board
- [Lesson] Registration arrangement On IP. Board
- How To Easily Show Files Images On IP.Board Download
- How To Auto Add Links Into Code Tags On IP.Board
- How To Make Simple Validating Message On IP. Board
- How to Easily Install A Skin On IP. Board
- Clickable Custom Profile Fields On IP.Board
0 comments :
Post a Comment