XF 2.0 و XF 2.1 - تغيير شكل عرض المنتجات في المتجر | زين العربية | XenArabia

XF 2.0 و XF 2.1 تغيير شكل عرض المنتجات في المتجر

Alrajabane

:: الإدارة العامة ::
طاقم الإدارة
إنضم
27 يناير 2019
المشاركات
406
مستوى التفاعل
345
النقاط
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
المشاركات
518
مستوى التفاعل
457
النقاط
63
العمر
20
الإقامة
sohag, Egypt
الموقع الالكتروني
رائع جدا وجميل
جزاك الله خيرا
 

XenArabia

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

Alrajabane

:: الإدارة العامة ::
طاقم الإدارة
إنضم
27 يناير 2019
المشاركات
406
مستوى التفاعل
345
النقاط
63
الإقامة
السعودية
الموقع الالكتروني
شكراً لتواجدكم وان شالله راح تجدون كل جديد ومفيد في معهدنا الغالي 😎
 

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

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

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

المواضيع
612
المشاركات
4,675
الأعضاء
215
آخر عضو مسجل
زين العربية
أعلى