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

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

Eng.Salah

:: الأعضاء ::
إنضم
14 مارس 2019
المشاركات
28
مستوى التفاعل
14
النقاط
3
الإقامة
Sharm El Sheikh
الموقع الالكتروني
بسم الله الرحمن الر حيم

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


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


أستكمالاً لدعمنا منتديات Xenforo

وبمناسبة تغيير تصميم مجموعة تقنى


أقدم لكم
كود جديد لجعل المنتجات على شكل شبكة ثنائية أو ثلاثية كما تختاره أنت لجعل موقعك مثل المواقع الإحترافية الكبرى

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

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

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

وظيفة الكود
كود جديد لجعل المنتجات على شكل شبكة ثنائية أو ثلاثية

مثال مباشر

صورة المثال

dDVglgg.jpg


شرح التطبيق

أنسخ الكود إلى قالب 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; } } }
}

ومبروك عليك يا بطل الشكل الجديد لمنتجاتك

المصدر

دمتم في أمان الله أحبتي
 

جميع المواضيع والمشاركات المكتوبة تعبّر عن وجهة نظر صاحبها ,, ولا تعبّر بأي شكل من الاشكال عن وجهة نظر إدارة زين العربية .

التعليقات المنشورة لا تعبر عن رأي معهد زين العربية ولا نتحمل أي مسؤولية قانونية حيال ذلك :: يتحمل كاتبها مسؤولية النشر ::

الأعضاء المتصلون

لا يوجد أعضاء متصلون الآن.

إحصائيات المنتدى

المواضيع
1,675
المشاركات
18,008
الأعضاء
654
آخر عضو مسجل
فراس حاتم
أعلى