كود:
<xen:require css="message_user_info.css" />
<p> </p>
<div class="messageUserInfo" itemscope="itemscope" itemtype="https://schema.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>
<p> </p>
<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">
<b><dt>{xen:phrase joined}:</dt></b>
<dd>{xen:date $user.register_date}</dd>
</dl>
</xen:if>
<xen:if is="@messageShowMessageCount AND {$user.user_id}">
<dl class="pairsJustified">
<b><dt>{xen:phrase messages}:</dt></b>
<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">
<b><dt>{xen:phrase likes_received}:</dt></b>
<dd>{xen:number $user.like_count}</dd>
</dl>
</xen:if>
<xen:if is="@messageShowTrophyPoints AND {$user.user_id} AND {$xenOptions.enableTrophies}">
<dl class="pairsJustified">
<b><dt>{xen:phrase trophy_points}:</dt></b>
<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">
<b><dt>{xen:phrase gender}:</dt></b>
<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">
<b><dt>{xen:phrase location}:</dt></b>
<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 style="color:black">{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>
</div>
</div>
message_user_info.css
كود:
.messageUserInfo
{
@property "messageUserInfo";
color: @contentBackground;
border-right: 4px solid #FFB635;
border-radius: 14px;
float: left;
width: 154px;
@property "/messageUserInfo";
}
.messageUserBlock
{
@property "messageUserBlock";
color: @contentText;
background-color: #1a1a1a;
border-radius: 14px;
@property "/messageUserBlock";
position: relative;
}
.messageUserBlock h3.userText
{
@property "messageUserText";
color: @contentText;
padding: 6px;
@property "/messageUserText";
}
.messageUserBlock .userBanner
{
display: block;
margin-bottom: 5px;
}
.messageUserBlock .userBanner:last-child
{
margin-bottom: 0;
}
.messageUserBlock a.username
{
@property "messageUsername";
font-weight: bold;
font-size: @fafontsizel;
color: @contentText;
display: block;
overflow: hidden;
line-height: 20px;
text-align: center;
@property "/messageUsername";
}
.messageUserBlock .userTitle
{
@property "messageUserTitle";
font-size: @fafontsizes;
color: @contentText;
padding-bottom: 3px;
display: block;
text-align: center;
@property "/messageUserTitle";
}
.messageUserBlock .extraUserInfo
{
@property "messageExtraUserInfo";
font-size: @fafontsizes;
background-color: #1a1a1a;
padding: 4px 6px;
border-radius: 14px;
@property "/messageExtraUserInfo";
}
.messageUserBlock .extraUserInfo dl
{
margin: 11px 0 0;
border-bottom: 1px #EEE solid;
padding: 5px;
}
.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: none;
width: auto;
}
.Responsive .messageUserBlock
{
overflow: hidden;
margin-bottom: 5px;
position: relative;
}
.Responsive .messageUserBlock div.avatarHolder
{
float: left;
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>
message
كود:
<xen:require css="message.css" />
<xen:require css="bb_code.css" />
<li id="{$messageId}" class="message {xen:if $message.isDeleted, 'deleted'} {xen:if '{$message.is_staff}', 'staff'} {xen:if $message.isIgnored, ignored}" data-author="{$message.username}">
<xen:include template="message_user_info">
<xen:map from="$message" to="$user" />
</xen:include>
<div class="messageInfo primaryContent">
<xen:if is="{$message.isNew}"><strong class="newIndicator"><span></span>{xen:phrase new}</strong></xen:if>
<xen:if hascontent="true">
<ul class="messageNotices">
<xen:contentcheck>
<xen:hook name="message_notices" params="{xen:array 'message={$message}'}">
<xen:if is="{$message.warning_message}">
<li class="warningNotice"><span class="icon Tooltip" title="{xen:phrase warning}" data-tipclass="iconTip flipped"></span>{$message.warning_message}</li>
</xen:if>
<xen:if is="{$message.isDeleted}">
<li class="deletedNotice"><span class="icon Tooltip" title="{xen:phrase deleted}" data-tipclass="iconTip flipped"></span>{xen:phrase this_message_has_been_removed_from_public_view}</li>
<xen:elseif is="{$message.isModerated}" />
<li class="moderatedNotice"><span class="icon Tooltip" title="{xen:phrase awaiting_moderation}" data-tipclass="iconTip flipped"></span>{xen:phrase this_message_is_awaiting_moderator_approval_and_is_invisible_to_normal}</li>
</xen:if>
<xen:if is="{$message.isIgnored}">
<li>{xen:phrase you_are_ignoring_content_by_this_member} <a href="javascript:" class="JsOnly DisplayIgnoredContent">{xen:phrase show_ignored_content}</a></li>
</xen:if>
</xen:hook>
</xen:contentcheck>
</ul>
</xen:if>
<xen:hook name="message_content" params="{xen:array 'message={$message}'}">
<div class="messageContent">
<article>
<blockquote class="messageText SelectQuoteContainer ugc baseHtml{xen:if $message.isIgnored, ' ignored'}">
<xen:include template="ad_message_body" />
{xen:raw $message.messageHtml}
<div class="messageTextEndMarker"> </div>
</blockquote>
</article>
{xen:raw $messageContentAfterTemplate}
</div>
</xen:hook>
<xen:if is="{$message.last_edit_date}">
<div class="editDate">
<xen:if is="{$message.user_id} == {$message.last_edit_user_id}">
{xen:phrase last_edited}: <xen:datetime time="{$message.last_edit_date}" />
<xen:else />
{xen:phrase last_edited_by_moderator}: <xen:datetime time="{$message.last_edit_date}" />
</xen:if>
</div>
</xen:if>
<xen:if is="{$visitor.content_show_signature} && {$message.signature}">
<xen:if hascontent="true">
<div class="baseHtml signature messageText ugc{xen:if $message.isIgnored, ' ignored'}"><aside><xen:contentcheck>{xen:raw $message.signatureHtml}</xen:contentcheck></aside></div>
</xen:if>
</xen:if>
{xen:raw $messageAfterTemplate}
<div id="likes-{$messageId}"><xen:if is="{$message.likes}"><xen:include template="likes_summary" /></xen:if></div>
</div>
<xen:hook name="message_below" params="{xen:array 'post={$message}','message_id={$messageId}'}" />
<xen:include template="ad_message_below" />
</li>
message.css
كود:
<xen:edithint template="message_user_info.css" />
.messageList
{
@property "message";
@property "/message";
}
.messageList .message
{
@property "message";
@property "/message";
}
{xen:helper clearfix, '.messageList .message'}
/*** Message block ***/
.message .messageInfo
{
@property "messageInfo";
margin-right: 10px;
margin-left: 10px;
@property "/messageInfo";
zoom: 1;
}
.message .newIndicator
{
@property "messageNewIndicator";
font-size: 11px;
color: @primaryMedium;
background: @primaryLighter url('@imagePath/xenforo/gradients/form-button-white-25px.png') repeat-y top;
padding: 1px 5px;
margin: -5px -5px 5px 5px;
border: 1px solid @primaryLighter;
border-radius: 3px;
border-top-right-radius: 0px;
display: block;
float: right;
position: relative;
box-shadow: 1px 1px 3px rgba(0,0,0, 0.25);
@property "/messageNewIndicator";
margin-right: -{xen:calc 'intval(@content.padding-right) + 5'}px;
}
.message .newIndicator span
{
@property "messageNewIndicatorInner";
background-color: @primaryLighter;
border-top-right-radius: 3px;
position: absolute;
top: -4px;
right: -1px;
width: 5px;
height: 4px;
@property "/messageNewIndicatorInner";
}
.message .messageContent
{
@property "messageContent";
@property "/messageContent";
}
.message .messageTextEndMarker
{
height: 0;
font-size: 0;
overflow: hidden;
}
.message .editDate
{
text-align: right;
margin-top: 5px;
font-size: 11px;
color: @mutedTextColor;
}
.message .signature
{
@property "messageSignature";
font-size: 9pt;
color: @mutedTextColor;
padding: 5px 0 0;
margin-top: 5px;
border-top: 1px dashed @primaryLighter;
@property "/messageSignature";
}
.message .messageMeta
{
@property "messageMeta";
font-size: 11px;
color: @pageBackground;
padding: 15px 5px 5px;
margin: -5px;
overflow: hidden;
zoom: 1;
@property "/messageMeta";
}
.message .privateControls
{
@property "messagePrivateControls";
float: left;
@property "/messagePrivateControls";
}
.message .publicControls
{
@property "messagePublicControls";
float: right;
@property "/messagePublicControls";
}
.message .privateControls .item
{
margin-right: 10px;
float: left;
}
.message .privateControls .item:last-child
{
margin-right: 0;
}
.message .publicControls .item
{
margin-left: 10px;
float: left;
}
.message .messageMeta .control
{
@property "messageMetaControl";
@property "/messageMetaControl";
}
.message .messageMeta .control:focus
{
@property "messageMetaControlFocus";
@property "/messageMetaControlFocus";
}
.message .messageMeta .control:hover
{
@property "messageMetaControlHover";
@property "/messageMetaControlHover";
}
.message .messageMeta .control:active
{
@property "messageMetaControlActive";
@property "/messageMetaControlActive";
}
/*** multiquote +/- ***/
.message .publicControls .MultiQuoteControl
{
padding-left: 4px;
padding-right: 4px;
border-radius: 2px;
margin-left: 6px;
margin-right: -4px;
}
.message .publicControls .MultiQuoteControl.active
{
background-color: @primaryLighterStill;
}
<xen:include template="message_notices.css" />
.message .likesSummary
{
@property "messageLikesSummary";
padding: 5px;
margin-top: 10px;
border: 1px solid @primaryLighterStill;
border-radius: 5px;
@property "/messageLikesSummary";
}
.message .messageText > *:first-child
{
margin-top: 0;
}
/* inline moderation changes */
.InlineModChecked .messageUserBlock,
.InlineModChecked .messageInfo,
.InlineModChecked .messageNotices,
.InlineModChecked .bbCodeBlock .type,
.InlineModChecked .bbCodeBlock blockquote,
.InlineModChecked .attachedFiles .attachedFilesHeader,
.InlineModChecked .attachedFiles .attachmentList
{
@property "inlineModChecked";
background: @inlineMod url('@imagePath/xenforo/gradients/category-23px-light.png') repeat-x top;
@property "/inlineModChecked";
}
.InlineModChecked .messageUserBlock div.avatarHolder,
.InlineModChecked .messageUserBlock .extraUserInfo
{
background: transparent;
}
.InlineModChecked .messageUserBlock .arrow span
{
border-left-color: @inlineMod;
}
/* message list */
.messageList .newMessagesNotice
{
margin: 10px auto;
padding: 5px 10px;
border-radius: 5px;
border: 1px solid @primaryLighter;
background: @primaryLighterStill url(@imagePath/xenforo/gradients/category-23px-light.png) repeat-x top;
font-size: 11px;
}
/* deleted / ignored message placeholder */
.messageList .message.placeholder
{
}
.messageList .placeholder .placeholderContent
{
overflow: hidden; zoom: 1;
color: @primaryLightish;
font-size: 11px;
}
.messageList .placeholder a.avatar
{
float: left;
display: block;
}
.messageList .placeholder a.avatar img
{
display: block;
width: 32px;
height: 32px;
}
.messageList .placeholder .privateControls
{
margin-top: -5px;
}
/* messages remaining link */
.postsRemaining a,
a.postsRemaining
{
font-size: 11px;
color: @mutedTextColor;
}
<xen:if is="@enableResponsive">
@media (max-width:@maxResponsiveWideWidth)
{
.Responsive .message .newIndicator
{
margin-right: 0;
border-top-right-radius: @messageNewIndicator.border-top-left-radius;
}
.Responsive .message .newIndicator span
{
display: none;
}
}
@media (max-width:@maxResponsiveNarrowWidth)
{
.Responsive .message .messageInfo
{
margin-left: 0;
padding: 0 10px;
}
.Responsive .message .messageContent
{
min-height: 0;
}
.Responsive .message .newIndicator
{
margin-right: -5px;
margin-top: -16px;
}
.Responsive .message .postNumber,
.Responsive .message .authorEnd
{
display: none;
}
.Responsive .message .signature
{
display: none;
}
.Responsive .messageList .placeholder a.avatar
{
margin-right: 10px;
}
}
</xen:if>
وشكراً لكم .