عيد الاضحى المبارك


مواضيع تهمك

ركن شروحات الزين فورو XENFORO هذا القسم خاص بكل شروحات إستخدام XENFORO وتعديلات القوالب

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

بسم الله الرحمن الر حيم السلام عليكم ورحمة الله وبركاته أحبتى الكرام أعضاء وزوار هيلبر نت أستكمالاً لدعمنا منتديات Xenforo وبمناسبة تغيير تصميم مجموعة تقنى أقدم لكم كود جديد لجعل المنتجات على شكل...

احصائياتى

الردود
3

المشاهدات
1047
s3ker
.:: عضو مشارك ::.
  • s3ker is a jewel in the roughs3ker is a jewel in the roughs3ker is a jewel in the roughs3ker is a jewel in the rough

  • s3ker غير متواجد حالياً

المشاركات
34

+التقييم
69

تاريخ التسجيل
Feb 2020

الاقامة
شرم الشيخ

نظام التشغيل
windows 8.1

رقم العضوية
2274
02-10-2021, 08:12 AM
المشاركة 1
02-10-2021, 08:12 AM
المشاركة 1
Important كود لعرض المنتجات بشكل مخطط روعة مثل موقع تقنى
بسم الله الرحمن الر حيم

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

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

أستكمالاً لدعمنا منتديات Xenforo


وبمناسبة تغيير تصميم مجموعة تقنى

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

أذا أردت شبكة ثنائية أختر من

تاب المظهر - إعدادات الإستايل - إعداد الصفحة - هتغير قيمة عرض الصفحة إلى 1100 أو 1200 كما يناسبك

وإذا أردت مخطط ثلاثى كما بموقع تقنى فستجعل الرقم 1400

وظيفة الكود
كود جديد لجعل المنتجات على شكل شبكة ثنائية أو ثلاثية

مثال مباشر
https://tqny.vip/store/

صورة المثال



شرح التطبيق
أنسخ الكود إلى قالب extra.less

كود:
@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; } } }
}
ومبروك عليك يا بطل الشكل الجديد لمنتجاتك
المصدر : كود لعرض المنتجات بشكل مخطط روعة


التعديل الأخير تم بواسطة هيلبرنت ; 02-12-2021 الساعة 02:39 PM
قديم 02-10-2021, 08:26 AM
المشاركة 2
s3ker
.:: عضو مشارك ::.
  • s3ker غير متواجد حالياً
افتراضي رد: كود لعرض المنتجات بشكل مخطط روعة مثل موقع تقنى
آسف حطيت صورة المثال غلط

يرجى تعديل الموضوع لأنوا ما فى صلاحية تعديل لى

التعديل الأخير تم بواسطة هيلبرنت ; 02-12-2021 الساعة 02:39 PM
قديم 02-12-2021, 02:40 PM
المشاركة 3
هيلبرنت
.:: رفيق درب ::.
  • هيلبرنت غير متواجد حالياً
افتراضي رد: كود لعرض المنتجات بشكل مخطط روعة مثل موقع تقنى
شكرا لك اخى على هذا الموضوع الرائع

وشكر اخر لاختيارك هيلبرنت لوضع مواضيعك به

قديم 02-13-2021, 03:10 AM
المشاركة 4
s3ker
.:: عضو مشارك ::.
  • s3ker غير متواجد حالياً
افتراضي رد: كود لعرض المنتجات بشكل مخطط روعة مثل موقع تقنى
شكرا لك اخى على هذا الموضوع الرائع

وشكر اخر لاختيارك هيلبرنت لوضع مواضيعك به

العفو أخى هيبلرنت
تعلمت الكثير من هيلبرنت ولن أنكر فضله
أقل شئ يستحقه أى موقع تعليمى أو تطويرى أو صرح كبير مثلكم
أن نشارك وندعم بعضنا حتى نرتقى بمستوى المواقع العربية والمستخدم
فقد ظللت عام أدرس Xenforo هنا وهناك
ولم أجد أى مواقع عربية تدعم Xenforo و Vbulletin
سوى هيلبرنت ومعهد زين العربية
أنتم الذين تبتكرون محتوى جديد والباقى كوبى وبيتس
وطبعا بعد نكسة إغلاق ترايدنت الذى كان موسوعة تطوير vb فقد أصبحنا بلا أرشيف نرجع إليه
وأتمنى فى يوم من الأيام أن يتواجد أرشيف عربى مرة آخرى للحفاظ على تعب وجهد أخوانا
أتمنى أن يكون موقعكم أحد ركائز دعم الويب العربى وسبباَ لإرتقائه

اضافة رد

العلامات المرجعية

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


أدوات الموضوع

الانتقال السريع
المواضيع المتشابهه للموضوع: كود لعرض المنتجات بشكل مخطط روعة مثل موقع تقنى
الموضوع كاتب الموضوع المنتدى مشاركات آخر مشاركة
[ vBulletin 3 ] : موقع ShareThis لعرض ايقونات المشاركة اسفل الموضوع وبالصفحة الرئيسية abo-karim ركن تطوير منتديات vb3.8.0 17 12-14-2023 02:36 PM
[ شرح ] : كود جديد لعمل إحصائيات Xenforo مثل موقع تقنى للزين فورو s3ker ركن شروحات الزين فورو XENFORO 2 02-03-2021 11:43 PM
[XF 2.x] : طريقة اضافة كود iFrame لعرض فيديوهات موقع openload.co abo-karim ركن شروحات الزين فورو XENFORO 9 11-01-2019 11:23 PM
شرح الشراء من موقع دوبلي (Dubli) اكبر مول في العالم لشراء المنتجات اون لاين زهرة البيلسانة ركن التجارة الالكترونية 2 01-06-2016 12:02 AM
KingdomPumper لزيادة نقاط موقع Kingdomlikes بشكل سريع E x ركن مواقع التواصل الإجتماعي 4 12-02-2015 01:20 AM




الساعة الآن 04:55 PM
RSS 2.0XML Site MapTAGS SiteInfo SiteRSS FeedMap SectionsvB MapsMap TagSitemap ForumMaps Forum