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

تغيير شكل عرض المنتجات في المتجر

Alrajabane

【★★★★】
طاقم الإدارة
إنضم
28 يناير 2019
المشاركات
753
مستوى التفاعل
591
النقاط
93
الإقامة
السعودية
الموقع الالكتروني
السلام عليكم ورحمة اله وبركاته

صورة لشكل الافتراضي لعرض شكل المتجر

67

الشكل الجديد بعد إضافة الكود

68


طريقة التركيب :
في قالب extra.less

ضع الكود التالي :

CSS:
@resource-grid-gap: 10px;
@resource-grid-width: 330px;
@resource-grid-thumb: 108px;

@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;
            }
        }

    }
}

بتوفيق للجميع ,, :giggle:
 

MesterPerfect

:: مراقب زين العربية ::
طاقم الإدارة
إنضم
28 يناير 2019
المشاركات
2,464
مستوى التفاعل
1,900
النقاط
113
العمر
21
الإقامة
sohag, Egypt
الموقع الالكتروني
رائع جدا وجميل
جزاك الله خيرا
 

أبو غَيْث

:: الإدارة العامة ::
طاقم الإدارة
إنضم
23 يناير 2019
المشاركات
5,206
مستوى التفاعل
3,254
النقاط
113
العمر
38
الإقامة
المغرب
الموقع الالكتروني
شكل جميل و طريقة روعة صراحة سكربت XenForo أصبح الرقم 1 ،
تسلم أخي @Alrajabane على الشرح
 

Alrajabane

【★★★★】
طاقم الإدارة
إنضم
28 يناير 2019
المشاركات
753
مستوى التفاعل
591
النقاط
93
الإقامة
السعودية
الموقع الالكتروني
شكراً لتواجدكم وان شالله راح تجدون كل جديد ومفيد في معهدنا الغالي 😎
 

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

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

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

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

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

المواضيع
1,646
المشاركات
17,791
الأعضاء
628
آخر عضو مسجل
ahmad0104
أعلى