تغيير شكل عرض المنتجات في المتجر | معهد زين العربية

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

Alrajabane

【★★★★】
طاقم الإدارة
إنضم
27 يناير 2019
المشاركات
630
مستوى التفاعل
484
النقاط
63
الإقامة
السعودية
الموقع الالكتروني
السلام عليكم ورحمة اله وبركاته

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

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

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

XenArabia

الحياة محطات فاترك في كل محطة ابتسامة
طاقم الإدارة
إنضم
23 يناير 2019
المشاركات
4,161
مستوى التفاعل
2,580
النقاط
113
العمر
37
الإقامة
المغرب
الموقع الالكتروني
شكل جميل و طريقة روعة صراحة سكربت XenForo أصبح الرقم 1 ،
تسلم أخي @Alrajabane على الشرح
 

Alrajabane

【★★★★】
طاقم الإدارة
إنضم
27 يناير 2019
المشاركات
630
مستوى التفاعل
484
النقاط
63
الإقامة
السعودية
الموقع الالكتروني
شكراً لتواجدكم وان شالله راح تجدون كل جديد ومفيد في معهدنا الغالي 😎
 

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

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

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

المواضيع
1,331
المشاركات
13,079
الأعضاء
503
آخر عضو مسجل
over221
أعلى