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

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

Eng.Salah

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

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


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

أستكمالاً لدعمنا منتديات 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;
}
}
}
}

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

المصدر

دمتم في أمان الله أحبتي
 
التعديل الأخير بواسطة المشرف:

shqawe

ربي أشرح لي صدري
طاقم الإدارة
إنضم
27 يونيو 2019
المشاركات
2,772
مستوى التفاعل
2,367
النقاط
113
الإقامة
K.S.A
بارك الله فيك اخوي @Eng/Salah

وطريقة رائعة تضفي جماﻻ على طريقة عرض المنتجات

اتمنى ان ﻻتحرمنا من ابداعاتك ومن كل جديد

احترامي وتقديري
اخوك
شقاوي
 

MesterPerfect

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

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

Eng.Salah

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

وطريقة رائعة تضفي جماﻻ على طريقة عرض المنتجات

اتمنى ان ﻻتحرمنا من ابداعاتك ومن كل جديد

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

Eng.Salah

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

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;
            }
        }
    }
}
مرورك الأروع يا أبو حميد
وإن شاء الله بالمرة القادمة سأرتب الكود
 

أبو غَيْث

:: الإدارة العامة ::
طاقم الإدارة
إنضم
23 يناير 2019
المشاركات
5,206
مستوى التفاعل
3,275
النقاط
113
العمر
38
الإقامة
المغرب
الموقع الالكتروني
طريقة جميلة لاضفاء جمالية على قسم المنتجات
سلمت يداك أخي صلاح و إن شاء الله ننتظر كل جديد منك
إحترامي
 

Wolf Knight

عضو معروف
[ عُملاء زين العَربية ]
إنضم
28 يناير 2019
المشاركات
472
مستوى التفاعل
278
النقاط
63
احسنت المشاركة اخي الكريم
بانتظار جديدك
 

Eng.Salah

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

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

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

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

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

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

المواضيع
1,703
المشاركات
18,523
الأعضاء
673
آخر عضو مسجل
كاسر القانون
أعلى