بسم الله الرحمن الرحيم
الحمد لله والصلاة والسلام على رسول الله نبينا محمد عليه افضل الصلاة واتم التسليم
اخوتي الافاضل الله يمسيكم بالخير
اليوم ساضع بين ايديكم كود جميل يظهر معلومات العضو في الشريط الجانبي
التعديل سوف يكون على قالب
PAGE_CONTAINER نفتح القالب ومن ثم نبحث عن:
HTML:
<div class="p-body-sidebar"> و تظع تحته مباشرة هذا الكود
HTML:
<xf:include template="uyepanel" />
بعدها اضغط على حفظ و خروج
الخطوة الثانية انشئ قالب جديد ستسميه.
uyepanelو ضع فيه هذا الكود
HTML:
<xf:css src="uyepanel.less" />
<div class="block">
<div class="block-container">
<div class="contentRow-figure avatarRow xm-minor">
<xf:avatar user="{$xf.visitor}" size="m" href="" notooltip="true" update="{{ link('account/avatar', $xf.visitor) }}" />
</div>
<h3 class="contentRow-header"><xf:username user="$xf.visitor" rich="true" notooltip="true" /></h3>
<ul class="block-body">
<div class="contentRow-minor">
<!--[XF:stats_pairs:above_messages]-->
<dl class="pairs pairs--justified fauxBlockLink">
<dt>{{ phrase('messages') }}</dt>
<dd>
<a href="{{ link('search/member', null, {'user_id': $xf.visitor.user_id}) }}" class="fauxBlockLink-linkRow u-concealed">
{$xf.visitor.message_count|number}
</a>
</dd>
</dl>
<!--[XF:stats_pairs:above_reactions]-->
<dl class="pairs pairs--justified fauxBlockLink">
<dt>{{ phrase('reaction_score') }}</dt>
<dd>
<a href="{{ link('account/reactions') }}" class="fauxBlockLink-linkRow u-concealed">
{$xf.visitor.reaction_score|number}
</a>
</dd>
</dl>
<!--[XF:stats_pairs:above_points]-->
<xf:if is="$xf.options.enableTrophies">
<dl class="pairs pairs--justified fauxBlockLink">
<dt>{{ phrase('trophy_points') }}</dt>
<dd>
<a href="{{ link('members/trophies', $xf.visitor) }}" data-xf-click="overlay" class="fauxBlockLink-linkRow u-concealed">
{$xf.visitor.trophy_points|number}
</a>
</dd>
</dl>
</xf:if>
</div>
</ul>
</div>
</div>احفظ الملف و اخرج
ثم انشئ ملف جديد اسمه
uyepanel.lessثم ضع فيه هذا القالب و احفظ
CSS:
.p-body-sidebar {
.block-container {
.contentRow-figure.xm-minor {
padding: @xf-paddingLargest;
border-top-left-radius:5px;
border-top-right-radius:5px; .avatar {
border-radius: 100%;
border: 3px solid rgb(34, 155, 242);
}
}
.has-touchevents .avatar-update, .avatar:hover .avatar-update {
bottom: 35px;
}
.avatarRow {
background:linear-gradient(135deg, @xf-contentBg, @xf-pageBg);
border-bottom:2px solid @xf-borderColorFeature;
}
.contentRow-header {
text-align: center;
padding: @xf-paddingMedium 0;
}
.fauxBlockLink {
margin: 0 10px 10px;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
background:linear-gradient(135deg, @xf-contentBg, @xf-pageBg);
padding:10px;
border-radius: 10px 100px / 120px;
}
ul {
dl {
padding: @xf-paddingMedium 0;
font-size: @xf-fontSizeNormal;
}
dt {
font-size: @xf-fontSizeNormal;
}
dt:after {
content:":";
}
}
}
}في الاخير ستكون النتيجة كما هو مبين في الصورة و مبروك عليكم
لا تبخلو علينا بالدعاء
تقبلو تحياتي اخوكم زوهير
