• أعضاء وزوار معهد زين العربية، نود أن نعلمكم أن المعهد سيشهد في الفترة القادمة الكثير من التغيرات سواءا على المستوى الاداري او مستوى الاقسام، لذا نرجو منكم التعاون، وأي ملاحظات او استفسارات يرجى التواصل معنا عبر قسم الشكاوي و الإقتراحات و الطلبات ونشكركم على حسن تفهمكم وتعاونكم ،مع خالص الشكر والتقدير والاحترام من إدارة زين العربية.

[ XF 2.2 ] معلومات العضو في الشريط الجانبي

kamel dz

:: الأعضاء ::
28 مارس 2019
79
58
18
بسم الله الرحمن الرحيم
الحمد لله والصلاة والسلام على رسول الله نبينا محمد عليه افضل الصلاة واتم التسليم

اخوتي الافاضل الله يمسيكم بالخير
اليوم ساضع بين ايديكم كود جميل يظهر معلومات العضو في الشريط الجانبي
التعديل سوف يكون على قالب 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:":";
}
        }  
    }
}


في الاخير ستكون النتيجة كما هو مبين في الصورة و مبروك عليكم
لا تبخلو علينا بالدعاء
تقبلو تحياتي اخوكم زوهير

2023-10-13 22 07 33.png
 
السلام عليكم .. أخي فعلا الموضوع جميل أعجبتني الفكرة ولكن عندي طرح بسيط ..
أولا إضافة عنوان فوق الالإضافة
ثانيا جعل الإضافة تختفي في حالة دخول زائر وجعلها تعمل فقط مع الأعضاء
وبارك الله فيك
 

إحصائيات المنتدى

المواضيع
1,444
المشاركات
16,588
الأعضاء
1,021
آخر عضو مسجل
wallas
أعلى