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

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

Alrajabane

:: الإدارة العامة ::
طاقم الإدارة
إنضم
27 يناير 2019
المشاركات
267
مستوى التفاعل
235
النقاط
43
الإقامة
السعودية
الموقع الالكتروني
السلام عليكم ورحمة اله وبركاته

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

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:
 

XenArabia

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

Alrajabane

:: الإدارة العامة ::
طاقم الإدارة
إنضم
27 يناير 2019
المشاركات
267
مستوى التفاعل
235
النقاط
43
الإقامة
السعودية
الموقع الالكتروني
شكراً لتواجدكم وان شالله راح تجدون كل جديد ومفيد في معهدنا الغالي 😎
 
كاتب الموضوع المواضيع المتشابهة المنتدى الردود التاريخ
shqawe التعديلات الجمالية 6

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

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

المواضيع
360
المشاركات
2,316
الأعضاء
118
آخر عضو مسجل
sameh
أعلى