• منتديات شباب الرافدين .. تجمع عراقي يقدم محتوى مميز لجميع طلبة وشباب العراق .. لذا ندعوكم للانضمام الى اسرتنا والمشاركة والدعم وتبادل الافكار والرؤى والمعلومات. فأهلاَ وسهلاَ بكم.

درس XF-2.x اضافة زر اظهار واخفاء بيانات العضو Xenforo 2.x

Ibn AliraQ

ヅ واحد من الناس ヅ
المدير العام للمنتديات
إنضم
2018-08-28
المشاركات
17,413
مستوى التفاعل
6,778
النقاط
297
الإقامة
العراق
جوهرة
დ117,925
الجنس
ذكر
إصدار الزين فورو
XenForo 2.x
السلام عليكم ورحمة الله وبركاته​
عنوان الدرس : اضافة زر اسفل الصورة الرمزية للعضو.​
الغاية من الدرس : اظهار واخفاء بينات العضو في قالب المشاركات والمواضيع.​

الشرح:
1. ابحث عن القالب :
HTML:
post_macros

داخل هذا القالب ابحث عن :
HTML:
<xf:macro template="message_macros" name="user_info" arg-user="{$post.User}" arg-fallbackName="{$post.username}" arg-dateHtml="{$dateHtml}" arg-linkHtml="{$linkHtml}" />

اسفل هذا الكود اضف :
HTML:
<span id="collapse-{$post.post_id}" class="collapseTrigger collapseTrigger--block" data-xf-click="toggle" data-target="#js-post-{$post.post_id} .message-userExtras"></span>

حفظ القالب.

2. ابحث عن القالب :
HTML:
message_macros

داخل القالب ابحث عن :
HTML:
<div class="message-userExtras">

استبدل هذا الكود بالكود التالي :
HTML:
<div class="message-userExtras message-userExtras-body message-userExtras--collapsible">

حفظ القالب.

3. ابحث عن القالب :
HTML:
extra.less

اسفل القالب قم باضافة الكود التالي:
CSS:
/* User Extras Collapse */
.message-userExtras-body
{
    .m-listPlain();

    &.message-userExtras--collapsible
    {
        .has-no-js & { display: block; }

        .m-transitionFadeDown();
    }
}

.message-cell
{
    .collapseTrigger
    {
        text-align: center;

        &.is-active:before
        {
            transform: rotate(-180deg);
        }
        &:before
        {
            content: "\f13a";
            color: @xf-linkColor;
            transition: ease-in transform .3s;
            width: auto;
        }
        &.collapseTrigger--block:before
        {
            float: none;
        }
    }
}
@media (max-width: @xf-responsiveNarrow)
{
    .message-cell
    {
        .collapseTrigger
        {
            display: none;
        }
    }
}

احفظ القالب.

إنتهى الشرح.

القالب قبل وبعد التعديل :

4_Acık Profil.jpg
 
عودة
أعلى أسفل