علماً بأن قالب
message_user_info
<xen:require css="message_user_info.css" />
<div class="messageUserInfo" itemscope="itemscope" itemtype="http://data-vocabulary.org/Person">
<div class="messageUserBlock {xen:if $user.isOnline, online}">
<xen:hook name="message_user_info_avatar" params="{xen:array 'user={$user}', 'isQuickReply={$isQuickReply}'}">
<div class="avatarHolder">
<span class="helper"></span>
<xen:avatar user="$user" size="m" img="true" />
<xen:if is="{$user.isOnline}"><span class="Tooltip onlineMarker" title="{xen:phrase online_now}" data-offsetX="-22" data-offsetY="-8"></span></xen:if>
<!-- slot: message_user_info_avatar -->
</div>
</xen:hook>
<xen:if is="!{$isQuickReply}">
<xen:hook name="message_user_info_text" params="{xen:array 'user={$user}', 'isQuickReply={$isQuickReply}'}">
<h3 class="userText">
<xen:username user="$user" itemprop="name" rich="true" />
<xen:if hascontent="true"><em class="userTitle" itemprop="title"><xen:contentcheck>{xen:helper userTitle, $user, 1, 1}</xen:contentcheck></em></xen:if>
{xen:helper userBanner, $user, 'wrapped'}
<!-- slot: message_user_info_text -->
</h3>
</xen:hook>
<xen:if hascontent="true">
<div class="extraUserInfo">
<xen:contentcheck>
<xen:hook name="message_user_info_extra" params="{xen:array 'user={$user}', 'isQuickReply={$isQuickReply}'}">
<xen:if is="@messageShowRegisterDate AND {$user.user_id}">
<dl class="pairsJustified">
<dt>{xen:phrase joined}:</dt>
<dd>{xen:date $user.register_date}</dd>
</dl>
</xen:if>
<xen:if is="@messageShowMessageCount AND {$user.user_id}">
<dl class="pairsJustified">
<dt>{xen:phrase messages}:</dt>
<dd><a href="{xen:link search/member, '', 'user_id={$user.user_id}'}" class="concealed" rel="nofollow">{xen:number $user.message_count}</a></dd>
</dl>
</xen:if>
<xen:if is="@messageShowTotalLikes AND {$user.user_id}">
<dl class="pairsJustified">
<dt>{xen:phrase likes_received}:</dt>
<dd>{xen:number $user.like_count}</dd>
</dl>
</xen:if>
<xen:if is="@messageShowTrophyPoints AND {$user.user_id} AND {$xenOptions.enableTrophies}">
<dl class="pairsJustified">
<dt>{xen:phrase trophy_points}:</dt>
<dd><a href="{xen:link 'members/trophies', $user}" class="OverlayTrigger concealed">{xen:number $user.trophy_points}</a></dd>
</dl>
</xen:if>
<xen:if is="@messageShowGender AND {$user.gender}">
<dl class="pairsJustified">
<dt>{xen:phrase gender}:</dt>
<dd><xen:if is="{$user.gender} == 'male'">{xen:phrase male}<xen:else />{xen:phrase female}</xen:if></dd>
</dl>
</xen:if>
<xen:if is="@messageShowOccupation AND {$user.occupation}">
<dl class="pairsJustified">
<dt>{xen:phrase occupation}:</dt>
<dd itemprop="role">{xen:string censor, $user.occupation}</dd>
</dl>
</xen:if>
<xen:if is="@messageShowLocation AND {$user.location}">
<dl class="pairsJustified">
<dt>{xen:phrase location}:</dt>
<dd><a href="{xen:link 'misc/location-info', '', 'location={xen:string censor, $user.location, '-'}'}" target="_blank" rel="nofollow" itemprop="address" class="concealed">{xen:string censor, $user.location}</a></dd>
</dl>
</xen:if>
<xen:if is="@messageShowHomepage AND {$user.homepage}">
<dl class="pairsJustified">
<dt>{xen:phrase home_page}:</dt>
<dd><a href="{xen:string censor, $user.homepage, '-'}" rel="nofollow" target="_blank" itemprop="url">{xen:string censor, $user.homepage}</a></dd>
</dl>
</xen:if>
</xen:hook>
<xen:if is="@messageShowCustomFields AND {$user.customFields}">
<xen:hook name="message_user_info_custom_fields" params="{xen:array 'user={$user}', 'isQuickReply={$isQuickReply}'}">
<xen:foreach loop="$userFieldsInfo" key="$fieldId" value="$fieldInfo">
<xen:if is="{$fieldInfo.viewable_message} AND ({$fieldInfo.display_group} != 'contact' OR {$user.allow_view_identities} == 'everyone' OR ({$user.allow_view_identities} == 'members' AND {$visitor.user_id}))">
<xen:if hascontent="true">
<dl class="pairsJustified userField_{$fieldId}">
<dt>{xen:helper userFieldTitle, $fieldId}:</dt>
<dd><xen:contentcheck>{xen:helper userFieldValue, $fieldInfo, $user, {$user.customFields.{$fieldId}}}</xen:contentcheck></dd>
</dl>
</xen:if>
</xen:if>
</xen:foreach>
</xen:hook>
</xen:if>
</xen:contentcheck>
</div>
</xen:if>
</xen:if>
<span class="arrow"><span></span></span>
</div>
</div>
message_user_info.css
.messageUserInfo
{
@property "messageUserInfo";
@property "/messageUserInfo";
}
.messageUserBlock
{
@property "messageUserBlock";
background: rgb(34, 34, 34) url('@imagePath/xenforo/gradients/tab-selected-light.png') repeat-y bottom;
border: 1px solid @primaryLighterStill;
@property "/messageUserBlock";
position: relative;
}
.messageUserBlock div.avatarHolder
{
@property "messageAvatarHolder";
background-color: @primaryLightest;
padding: 10px;
@property "/messageAvatarHolder";
position: relative;
}
.messageUserBlock div.avatarHolder .avatar
{
display: block;
font-size: 0;
}
.messageUserBlock div.avatarHolder .onlineMarker
{
position: absolute;
top: {xen:calc 'intval(@messageAvatarHolder.padding-top) - 1'}px;
left: {xen:calc 'intval(@messageAvatarHolder.padding-right) - 1'}px;
@property "messageOnlineMarker";
border: 7px solid transparent;
border-top-color: rgb(127, 185, 0);
border-left-color: rgb(127, 185, 0);
border-top-left-radius: 5px;
border-top-right-radius: 3px;
border-bottom-left-radius: 3px;
@property "/messageOnlineMarker";
}
.messageUserBlock h3.userText
{
@property "messageUserText";
padding: 6px;
@property "/messageUserText";
}
.messageUserBlock .userBanner
{
display: block;
margin-bottom: 5px;
margin-left: -{xen:calc 'intval(@messageUserText.padding-left) + 6'}px;
margin-right: -{xen:calc 'intval(@messageUserText.padding-right) + 6'}px;
}
.messageUserBlock .userBanner:last-child
{
margin-bottom: 0;
}
.messageUserBlock a.username
{
@property "messageUsername";
font-weight: bold;
display: block;
overflow: hidden;
line-height: 16px;
@property "/messageUsername";
}
.messageUserBlock .userTitle
{
@property "messageUserTitle";
font-size: 11px;
display: block;
@property "/messageUserTitle";
}
.messageUserBlock .extraUserInfo
{
@property "messageExtraUserInfo";
font-size: 10px;
background-color: @primaryLightest;
padding: 4px 6px;
@property "/messageExtraUserInfo";
}
.messageUserBlock .extraUserInfo dl
{
margin: 2px 0 0;
}
.messageUserBlock .extraUserInfo img
{
max-width: 100%;
}
.messageUserBlock .arrow
{
position: absolute;
top: 10px;
right: -10px;
display: block;
width: 0px;
height: 0px;
line-height: 0px;
border: 10px solid transparent;
border-left-color: @messageUserBlock.border-color;
-moz-border-left-colors: @messageUserBlock.border-color;
border-right: none;
/* Hide from IE6 */
_display: none;
}
.messageUserBlock .arrow span
{
position: absolute;
top: -10px;
left: -11px;
display: block;
width: 0px;
height: 0px;
line-height: 0px;
border: 10px solid transparent;
border-left-color: @messageAvatarHolder.background-color;
-moz-border-left-colors: @messageAvatarHolder.background-color;
border-right: none;
}
<xen:if is="@enableResponsive">
@media (max-width:@maxResponsiveNarrowWidth)
{
.Responsive .messageUserInfo
{
float: right;
width: auto;
}
.Responsive .messageUserBlock
{
overflow: hidden;
margin-bottom: 5px;
position: relative;
}
.Responsive .messageUserBlock div.avatarHolder
{
float: right;
padding: 5px;
}
.Responsive .messageUserBlock div.avatarHolder .avatar img
{
width: 48px;
height: 48px;
}
.Responsive .messageUserBlock div.avatarHolder .onlineMarker
{
top: 4px;
left: 4px;
border-width: 6px;
}
.Responsive .messageUserBlock h3.userText
{
margin-left: 64px;
}
.Responsive .messageUserBlock .userBanner
{
max-width: 150px;
margin-left: 0;
margin-right: 0;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
position: static;
display: inline-block;
}
.Responsive .messageUserBlock .userBanner span
{
display: none;
}
.Responsive .messageUserBlock .extraUserInfo
{
display: none;
}
.Responsive .messageUserBlock .arrow
{
display: none;
}
}
</xen:if>