بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته

أحبتى أعضاء وزوار مجتمع تقنى
وكما عودناكم بدعم المنتديات العربية و منتديات الزين فورو

أقدم لكم اليوم طريقة جعل بيانات العضو مثل موقع تقنى

أولا نذهب لتاب المظهر ثم القوالب ثم نبحث عن قالب message_macros
ابحث عن
HTML:
<div class="message-userExtras">

وضع فوقه هذا الكود
كود:
<div class="thThreads__message-userExtras">

ثم ابحث فى نفس القالب عن
HTML:
</xf:if>
        </xf:if>
        <span class="message-userArrow"></span>
    </section>

وضع فوقه هذا الكود
HTML:
</div>
                <div class="thThreads__userExtra--toggle">
                    <span class="thThreads__userExtra--trigger" data-xf-click="ththreads-userextra-trigger"></span>
                </div>

أحفظ القالب

ثم ابحث عن قالب helper_js_global وقم باضافة الكود التالي في اخر القالب فوق كلمة </xf:macro>

JavaScript:
<xf:js>
    $(document).ready(function() {
    XF.thThreadsUserExtraTrigger = XF.Click.newHandler({
    eventNameSpace: 'XFthThreadsUserExtraTrigger',

    init: function(e) {},

    click: function(e)
    {
        var parent =  this.$target.parents('.message-cell--user');
        var triggerContainer = this.$target.parent('.thThreads__userExtra--toggle');
        var container = triggerContainer.siblings('.thThreads__message-userExtras');
        var child = container.find('.message-userExtras');
        var eleHeight = child.height();
        if (parent.hasClass('userExtra--expand')) {
            container.css({ height: eleHeight });
            parent.toggleClass('userExtra--expand');
            window.setTimeout(function() {
                container.css({ height: '0' });
                window.setTimeout(function() {
                    container.css({ height: '' });
                }, 200);
            }, 17);

        } else {
            container.css({ height: eleHeight });
            window.setTimeout(function() {
                parent.toggleClass('userExtra--expand');
                container.css({ height: '' });
            }, 200);
        }
    }
});

XF.Click.register('ththreads-userextra-trigger', 'XF.thThreadsUserExtraTrigger');
});

    </xf:js>

ثم حفظ
ثم أبحث عن قالب extra.less

CSS:
.thThreads__userExtra--toggle {
      text-align: center;
      margin-top: @xf-paddingMedium;
 
      .thThreads__userExtra--trigger {
          transition: ease-in transform .2s .2s;
          display: inline-block;
 
          &:hover {cursor: pointer;}
 
          &:before {
              .m-faBase();
              .m-faContent(@fa-var-chevron-down);
          }
      }
  }
  .thThreads__message-userExtras {
      height: 0;
      overflow: hidden;
      transition: ease-in height .2s;
  }
 
 @media (max-width: @xf-messageSingleColumnWidth) {
    .thThreads__message-userExtras {display: none;}
    .thThreads__userExtra--toggle {display: none;}
}

.userExtra--expand  {
    .thThreads__message-userExtras {height: auto;}
    .thThreads__userExtra--trigger {transform: rotate(-180deg);}
}

ثم قم بحفظ القالب ومبروك عليك الشكل الجديد والأقوى والأسرع
يتوافق أيضا مع الموبايل

شكرا لكم لدعمنا
فى أمان الله أحبتى
الكاتب
Eng.Salah
المشاهدات
356
الإصدار الأول
آخر تحديث
تقييم
0.00 نجوم 0 تقييمات

منتجات أخرى من Eng.Salah

أعلى أسفل