تغيير عرض المواضيع إلى Grid في XenForo

لو بتدور على شكل مختلف وجذاب لعرض المواضيع في XenForo بدل الشكل التقليدي، فـ تعديل بسيط في CSS يقدر يحول شكل القائمة بالكامل إلى Grid Layout احترافي يشبه مواقع الأخبار والمدونات الحديثة 👌
الفكرة هنا إنك بدل ما تعرض المواضيع بشكل عمودي تقليدي، هتحولها إلى بطاقات (Cards) جنب بعض، وده بيحسن تجربة المستخدم بشكل كبير وبيخلي الصفحة الرئيسية أو الأقسام شكلها أنظف وأكتر احترافية.

ليه نغير شكل عرض المواضيع إلى Grid؟ 🤔​

تغيير شكل عرض المواضيع مش مجرد شكل جميل، ده له فوائد حقيقية:

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

---

الشكل الجديد للمواضيع في XenForo ✨​

بعد تطبيق الكود، هيتم تحويل قائمة المواضيع من الشكل التقليدي إلى:

• بطاقات جنب بعض (2 في الصف غالبًا)
• كل موضوع داخل Box مستقل
• ظل وحدود خفيفة لتمييز كل موضوع
• تصميم متجاوب على الموبايل 📱

---

طريقة التفعيل داخل extra.less 🔧​

كل اللي عليك تعمله هو إضافة الكود التالي داخل قالب: extra.less

/********* Css Grid Code Start ********/
.structItem-title{
    text-overflow: ellipsis !important;
    max-width: 50ch;
    white-space: nowrap;
    overflow: hidden;
}

.structItem--thread{
    border-collapse: collapse;
    width: 100%;
    height: auto;
    display: inline-block !important;
    margin: 9px 0px 0px 6px;
    max-width: 49% !important;
    box-sizing: border-box;
    vertical-align: top;
    border-radius: 2px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
}

.structItem-cell{width:100%;}

@media (max-width: 650px){
.structItem-cell.structItem-cell--meta { display:none; }
}

.structItem-cell--meta{
    display: block;
    width: auto !important;
    margin-top: -13px;
    float:left;
}

.structItem-cell--latest{
    display: block;
    width: auto !important;
    margin-top: -13px;
    margin-bottom: 15px;
    float:right;
}

.structItem-cell--meta > .pairs.pairs--justified>dd {
    float: left;
    text-align: right;
    max-width: 100%;
}

.structItem-cell--meta dl.pairs.pairs--justified{
    float:left;
}

.structItem-cell--latest{ margin-bottom:0px !important; }

@media (max-width: 1125px) {
  .structItem--thread {max-width: calc(95%) !important;}
}

@media (max-width: 650px) {
  .structItem-cell--latest{ margin-top: -20px !important;}
  .structItem--thread {
    display: table !important;
    max-width: 100% !important;
    margin: 5px 5px 5px 0px;
    box-shadow: none;
  }
}

@media (max-width: 650px){
.structItem-cell.structItem-cell--latest,
.structItem-cell--meta {
    float:right !important;
}}

.structItem-cell--meta dt{ font-size:0px; }
.structItem-cell--meta dd{
    margin-left:18px;
    font-size: 12px;
    color:#ababab;
}

.structItem-cell--meta .structItem-minor dt:before,
.structItem-cell--meta dt:before{
    font-family: FontAwesome;
    font-size: 12px;
    position: absolute;
    margin-left: 0px;
    color:#ababab;
}

.structItem-cell--meta .structItem-minor dt:before {content: '\f06e'; }
.structItem-cell--meta dt:before {content: '\f112'; }

.structItem-cell--latest{
    margin-top: -34px;
}

.structItemContainer-group.js-threadList {
    margin-bottom: 8px;
}

.structItem-cell--main .structItem-extraInfo {
    float: left;
    margin-left: -8px;
}
/********* Css Grid Code End ********/

تحسين شكل المواضيع المثبتة (Sticky Threads) ⭐​

لو عايز تميز المواضيع المثبتة عن باقي المواضيع بشكل واضح، أضف الكود ده تحت الكود السابق:

.structItemContainer-group--sticky .structItem--thread {
    background: #fff5e8 !important;
    border: 1px solid #f9c479 !important;
}

ده هيخلي المواضيع المثبتة:

• بلون مختلف مميز 🟡
• بحدود واضحة
• أسهل في التمييز من باقي المواضيع

---

الشكل النهائي بعد التعديل 🧠​

بعد تطبيق الكود، هتحصل على:

• تصميم Grid احترافي للمواضيع
• شكل بطاقات حديث بدل القائمة التقليدية
• تحسين واضح في تجربة المستخدم
• دعم كامل للموبايل والديسكتوب
• تمييز واضح للمواضيع المثبتة

---

نصائح مهمة قبل التطبيق ⚠️​

• جرب الكود أولًا على نسخة تجريبية
• تأكد إن قالب XenForo مش معدل مسبقًا بشكل كبير
• امسح الكاش بعد التعديل
• راقب الشكل على الموبايل قبل الاعتماد النهائي

---

الخلاصة 📌​

تحويل عرض المواضيع إلى Grid Layout في XenForo من أبسط وأقوى التعديلات اللي بتدي شكل احترافي جدًا للمنتدى بدون إضافات.
ومع تعديل بسيط في CSS تقدر تحول شكل المنتدى بالكامل إلى تصميم حديث يشبه المواقع الكبيرة.