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

أحبتى أعضاء وزوار مجتمع تقنى
وكما عودناكم بدعم المنتديات العربية و منتديات الزين فورو
أقدم لكم كود لعرض المنتجات بشكل مخطط روعة يجعل موقعك أكثر جاذبية وظيفة الكود : جعل المنتجات بمخطط الشبكة الثنائى أو الثلاثى
رقم الإصدار : 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.jpg


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

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

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


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

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

الوسوم
أكثر ارشفة الزين فورو الزين فورو الزين فورو 2 الزين فورو العربى المنتجات تطوير تطوير xenforo تطوير الزين فورو تطوير المنتديات تطوير الويب تقنى جاذبية دعم دعم xenforo دعم الزين فورو دعم المنتديات دعم الويب روعة شكل عرض كود مجتمع تقنى مجموعة تقنى مخطط منتدى منتدى تقنى منتديات الزين فورو موقعك يجعل

جميع المواضيع والمشاركات المكتوبة تعبّر عن وجهة نظر صاحبها ,, ولا تعبّر بأي شكل من الاشكال عن وجهة نظر إدارة تقنى .. بالرغم من محاولتنا المستمرة لمنع جميع المخالفات إلا أنه ليس بوسعنا إستعراض جميع المشاركات المدرجة ولا يتحمل تقنى أي مسؤولية قانونية عن محتوى تلك المشاركات . الموقع غير مسؤول عن أي اتفاق تجاري أو تعاوني بين الأعضاء فعلى كل شخص تحمل مسئولية نفسه إتجاه مايقوم به من بيع وشراء وإتفاق وأعطاء معلومات موقعه. .

أعلى أسفل