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

درس XF-2.x فتح واغلاق الاقسام بدون اضافة - Xenforo 2.1

  • بادئ الموضوع بادئ الموضوع Ibn AliraQ
  • تاريخ البدء تاريخ البدء
  • الردود الردود 5
  • المشاهدات المشاهدات 2K

Ibn AliraQ

ヅ واحد من الناس ヅ
السمعة: 100%
النقاط 297
الحلول 0
إنضم
2018-08-28
المشاركات
17,578
مستوى التفاعل
6,913
النقاط
297
الإقامة
العراق
Ibn AliraQ
إصدار الزين فورو
XenForo 2.x
قبل:

8976

بعد:

8977

السلام عليكم ..
رمضانكم مبارك وكل عام وانتم بخير

شرحنا اليوم هو اضافة امكانية فتح واغلاق الاقسام من الرئيسية
مثال: ستايل منتديات شباب الرافدين

طريقة الاضافة:
البحث عن قالب: node_list_category

داخل القالب :

البحث عن:
HTML:
<div class="block block--category block--category{$node.node_id}">

واستبدالها بالكود التالي:
HTML:
<div class="block block--category block--category{$node.node_id} collapsible-nodes">

البحث عن:
HTML:
<h2 class="block-header">

اسفلها نضيف الكود التالي:
HTML:
<div class="block-header--left">

نبحث عن الكود التالي:
HTML:
<div class="block-desc">{$node.description|raw}</div></xf:if>

نستبدله بالكود التالي:
HTML:
<xf:if is="{$node.description}"><span class="block-desc">{$node.description|raw}</span></xf:if>

اخر الكود نضيف:
HTML:
</div>

البحث عن:
HTML:
</h2>

نضيف اعلاها الكود التالي:
HTML:
<span id="collapse-{$node.node_id}" class="collapseTrigger collapseTrigger--block is-active" data-xf-click="toggle" data-xf-init="toggle-storage" data-target=".block--category{$node.node_id} .block-body" data-storage-key="_node-{$node.node_id}"></span>

البحث عن:
HTML:
<div class="block-body">

استبداله بالكود التالي:
HTML:
<div class="block-body block-body--collapsible is-active">

نسوي حفظ للقالب.

نبحث عن القالب: extra.less ونضيف اخره الكود التالي:

CSS:
/* Node Collapse */
.block--category .collapseTrigger {
  opacity: 0.5;
  transition: opacity 0.3s;
  margin-right: 10px;
}
.block--category .collapseTrigger.is-active:before {
  .m-faBase();
  content: "\f146";
  transform: scale(-1, 1);
  margin-right: -8px;
}
.block--category .collapseTrigger:before {
  .m-faBase();
  content: "\f0fe";
  font-size: 80%;
}
.block--category .block-container:hover .collapseTrigger {
  opacity: 1;
}
.collapsible-nodes .block-header {
  display: flex;
}
.collapsible-nodes .block-header--left {
  margin-right: auto;
  max-width: 100%;
}

نسوي حفظ للقالب.
إنتهى.
 
عاشت ايدك على الدرس الحصري والمميز
 
التعديل الأخير:
نورتوا الموضوع بتواجدكم العطر.
مودتي
 
Similar content الاكثر مشاهدة عرض المزيد
عودة
أعلى أسفل