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

أحبتى أعضاء وزوار مجتمع تقنى
وكما عودناكم بدعم المنتديات العربية و منتديات الزين فورو
أقدم لكم كود لعرض المنتجات بشكل مخطط روعة يجعل موقعك أكثر جاذبية وظيفة الكود : جعل المنتجات بمخطط الشبكة الثنائى أو الثلاثى
رقم الإصدار : 2.0 - 2.1 - 2.2


نبدأ على بركة الله
أولا نذهب تاب المظهر - القوالب - extra.less
CSS:
@resource-grid-gap: 12px;
@resource-grid-width: 332px;
@resource-grid-thumb: 110px;
@media (min-width: @xf-responsiveMedium) {
@supports(display: grid) {
.block[data-type="resource"] .structItemContainer {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(@resource-grid-width, 1fr));
grid-gap: @resource-grid-gap;
padding: @resource-grid-gap;
background-color: @xf-contentAltBg;
}
.structItem--resource {
background-color: @xf-contentBg;
border-radius: 3px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
border-width: 0px;
display: grid;
grid-template-columns: @resource-grid-thumb 1fr;
grid-template-areas: 'icon text' 'stats stats'; .structItem-cell--icon.structItem-cell--iconExpanded {
width: auto;
grid-area: icon;
}
.structItem-cell--main {
grid-area: text;
}
.structItem-cell--resourceMeta {
grid-area: stats;
width: auto;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
.structItem-cell--iconExpanded .structItem-iconContainer .avatar {
width: 100%;
height: auto;
font-size: 56px;
}
.structItem-secondaryIcon {
display: none;
}
.structItem-metaItem--rating {
flex: 1 0 100%;
}
.structItem-metaItem--downloads, .structItem-metaItem--lastUpdate {
flex: 0 1 auto;
}
.ratingStarsRow--justified {
border-bottom: 1px solid @xf-borderColorFaint;
margin-bottom: 4px;
padding-bottom: 4px;
}
}
}
}
صور تطبيق الشرح

Tqny grid xenforo


أذا أردت شبكة ثنائية أختر من

تاب المظهر - إعدادات الإستايل - إعداد الصفحة - هتغير قيمة عرض الصفحة إلى 1100 أو 1200 كما يناسبك

وإذا أردت مخطط ثلاثى فستجعل الرقم 1400


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

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

أعلى أسفل