دليل الـ CSS المخصَّص

يتيح لك الـ CSS المخصَّص ضبط مظهر واجهة متجرك بدقّة تتجاوز عناصر التحكّم المدمَجة في المخصِّص — أزرار أكثر استدارة، ظلال بطاقات أنعم، خطّ مخصَّص، رأس صفحة ثابت (sticky)، وأكثر من ذلك بكثير. هذا الدليل شرحٌ كامل وسهل للمبتدئين: كيف يعمل الـ CSS، وأين تلصقه، وقائمة محدِّدات DZBuild المختصرة، وعشرات القوالب الجاهزة للّصق.

ميزة Enterprise

الـ CSS المخصَّص متاح في باقة Enterprise. في الباقات الأخرى يظهر الحقل مقفلًا. انظر الباقات للترقية.

أين تلصقه

من القائمة الجانبية تخصيص المتجر ← تخصيص ← CSS مخصّص. اكتب أو الصق الـ CSS الخاص بك، وراقب تحدُّث المعاينة المباشرة بجانبه، ثم اضغط حفظ عندما يبدو الأمر صحيحًا. يُحمَّل الـ CSS الخاص بك بعد صفحة أنماط القالب، فتتغلّب قواعدك.

لا يمكنك إفساد أي شيء بشكل دائم

الـ CSS المخصَّص يغيّر المظهر فقط — لا يمسّ منتجاتك أو طلباتك أو بياناتك أبدًا. إذا بدت الواجهة خاطئة، فرّغ الحقل واحفظ وستعود إلى وضعها الطبيعي. تحقّق دائمًا من المعاينة المباشرة قبل الحفظ.

حدّ 50 كيلوبايت — اقتطاع صامت

الحقل محدود بـ 50 كيلوبايت. وكل ما يتجاوز ذلك يُقتطَع عند الحفظ دون إظهار أي خطأ، ما قد يترك قاعدة نصف مكتوبة ويُعطّل كل ما بعدها. أبقِ صفحة الأنماط صغيرة، وإذا توقّف آخر الـ CSS عن العمل فتحقّق من طوله أوّلًا.

أين يُطبَّق: الصفحة الرئيسية، وصفحات المنتجات، وصفحات التصنيفات وكل المنتجات، والسلة، والـ checkout، وتتبّع الطلب، وصفحة تأكيد الطلب. وهو لا يُطبَّق على صفحات الهبوط في /landing/{slug} — فهي تُعرَض خارج نظام القوالب.

ابحث عن مفتاح مدمج أوّلًا

عدّة قوالب أدناه تكرّر — بل قد تتصارع مع — أداة تحكُّم موجودة أصلًا في المخصِّص:

ما تريده	الأداة المدمجة
رأس صفحة ثابت، ظلّ الرأسية، حدّ الرأسية	التخصيص ← الرأسية والشعار
انحناء زوايا بطاقة المنتج (0 / 8 / 16 / 24 بكسل)	التخصيص ← بطاقة المنتج
إخفاء زر «أضف إلى السلة» في الشبكة أو إجراء الـ hover	التخصيص ← بطاقة المنتج
إظهار/إخفاء شريط الإعلان وألوانه	التخصيص ← شريط الإعلان (Pro)
إظهار/إخفاء شريط البحث	التخصيص ← شريط البحث
لون التذييل، إخفاء «Powered by DZBuild»	التخصيص ← التذييل
ألوان زرَّي «اشترِ الآن» و«الدفع السريع»	التخصيص ← صفحة المنتج (Pro)

استعمل المفتاح متى وُجد — فهو يصمد أمام تبديل القوالب ولن يتجاوزه تحديث مستقبلي لصفحة الأنماط.

كيف يعمل الـ CSS (شرح في 60 ثانية)

الـ CSS هو قائمة من القواعد. كل قاعدة لها محدِّد (ما الذي تستهدفه) وكتلة تصريح (ما الذي تغيّره):

.add-to-cart { color: white; background: #f59e0b; }
/* └─ المحدِّد ┘  └───── التصريحات: property: value; ─────┘ */

يشير المحدِّد إلى عناصر. أكثر الأنواع شيوعًا:
- .classname — كل عنصر يحمل تلك الفئة (مثل .add-to-cart). هذا ما ستستخدمه في 95% من الحالات.
- tag — كل عنصر من نوع معيّن (مثل button، h1، img).
- #id — العنصر الوحيد الذي يحمل ذلك الـ id.
- .a .b — عنصر .b داخل عنصر .a. أمّا .a > .b فهو عنصر .b ابن مباشر لعنصر .a.
- .a:hover — عنصر .a بينما يمرّ مؤشّر الفأرة فوقه.
التصريح هو property: value;. خصائص شائعة: color، background، border، border-radius، padding، margin، font-size، box-shadow، display.
التتالي (cascade): عندما تمسّ قاعدتان الشيء نفسه، تفوز القاعدة الأكثر تحديدًا — أو تلك المُحمَّلة لاحقًا. ولأنّ الـ CSS الخاص بك يُحمَّل بعد القالب، فإنّ قاعدتك على .add-to-cart تتغلّب على قاعدة القالب.
!important يفرض فوز قيمة معيّنة. استخدمه باعتدال — فقط حين لا تستطيع قاعدة عاديّة التغلّب على القالب:

.add-to-cart { border-radius: 999px !important; }

هذا فعلًا معظم ما تحتاجه. كل ما يلي هو نسخ ولصق.

العثور على المحدِّد الصحيح

نادرًا ما تحتاج إلى التخمين. استخدم أداة الفحص في متصفّحك:

افتح واجهة متجرك على متصفّح سطح مكتب (Chrome، Firefox، Edge).
انقر بالزر الأيمن على العنصر الذي تريد تغييره ← Inspect.
في اللوحة التي تُفتح، يُظهر السطر المُمَيَّز العنصر وقيمة class="…" الخاصّة به. اختر اسم فئة (مثل product-card) واستهدفه على شكل .product-card.
الصق قاعدة تجريبية في حقل الـ CSS المخصَّص وراقب المعاينة المباشرة.

تلميح

تختلف المحدِّدات بين القوالب (Starter وDigital وBrico وStarted V2 وPrestige وPromobi وBloom) — وخصوصًا محدِّدات الـ hero وصناديق البحث. عند الشك، افحص واجهة متجرك أنت بدل نسخ فئة بشكل أعمى، ثم ضع القاعدة في المعاينة للتأكّد.

قائمة محدِّدات DZBuild المختصرة

أكثر المحدِّدات فائدةً وثباتًا عبر القوالب:

المحدِّد	يستهدف
`.navbar-store`	رأس الصفحة العلوي / شريط التنقّل، وهو مشترك في كل الصفحات (العنصر نفسه يحمل أيضًا `id="navbar"`، فيصلح `#navbar` كذلك)
`.announcement-bar`	الشريط الترويجي الرفيع فوق رأس الصفحة
`.product-card`	بطاقة منتج واحدة في أي شبكة منتجات
`.product-image`	الغلاف المحيط بصورة بطاقة المنتج — استهدف `.product-image img` للصورة نفسها
`.product-price`	نصّ السعر على بطاقة المنتج
`.product-actions`	أزرار الإجراءات التي تظهر عند المرور فوق بطاقة المنتج (مخفيّة على أجهزة اللمس — انظر أدناه)
`.add-to-cart`	أزرار "أضف إلى السلة" / الشراء في شبكات المنتجات
`.whatsapp-float`	زر WhatsApp العائم
`.footer`	تذييل الصفحة في كل القوالب باستثناء Brico الذي يأتي بتذييله الخاص `.brico-footer`

ثلاثة محدِّدات تتداولها المقتطفات القديمة لا تعمل على متاجر DZBuild:

.btn-primary — لا يوجد إلا في صفحة تأكيد الطلب، ولا مكان غيرها. ولإعادة تلوين زرَّي «اشترِ الآن» و«الدفع السريع»، استعمل المنتقيات المدمجة (التخصيص ← صفحة المنتج) أو متغيّرات الـ CSS أدناه.
.header-search — لا يستعمله أي جزء من واجهة المتجر. فشريط التنقّل المشترك لا يحتوي على صندوق بحث أصلًا، وبالتالي لا يمكن لقاعدة تستهدف بحث الرأسية أن تعمل في صفحات المنتج أو السلة أو التصنيف أو الـ checkout. والبحث خاص بكل قالب وفي الصفحة الرئيسية فقط: .brico-search و.sc-search (لـ Started V2 وBloom) و.pr-search و.pm-search و.mobile-search (لـ Starter وDigital).
.hero — فئات الـ hero الحقيقية خاصّة بكل قالب أيضًا: .hero-section (Starter) و.dt-hero-section (Digital) و.sc-hero (Started V2 وBloom) و.pr-hero (Prestige) و.pm-hero (Promobi). أما Brico فلا يملك hero.

متغيّرات CSS للعلامة التجارية

تُصرِّح بها كل القوالب السبعة النشطة:

المتغيّر	يتحكّم في
`--primary`	لون العلامة الأساسي
`--secondary`	اللون الثانوي
`--gradient`	تدرّج الأساسي ← الثانوي (الأزرار، الـ hero)
`--btn-radius`	استدارة زوايا الأزرار
`--card-border`	حدّ بطاقة المنتج
`--card-shadow`	ظلّ بطاقة المنتج

تختلف خلفية الصفحة حسب القالب: Starter وDigital يستعملان --background ؛ أما Bloom وBrico وPrestige وPromobi وStarted V2 فتستعمل --bg (بالإضافة إلى --navbar-bg و--footer-bg و--border-color). عند الشك، اضبط الاثنين.

ولأزرار صفحة المنتج متغيّراتها الخاصّة، وتُصدَر عند ضبط اللون المقابل في التخصيص ← صفحة المنتج:

المتغيّر	يتحكّم في
`--pd-buynow`	لون زر «اشترِ الآن» (و`--pd-buynow-hover` عند المرور)
`--pd-fc-btn`	لون زر إرسال الدفع السريع (و`--pd-fc-btn-hover` عند المرور)

/* إعادة تصميم علامة المتجر كاملةً في كتلة واحدة */
:root {
  --primary: #6d28d9;
  --secondary: #a78bfa;
  --btn-radius: 12px;
  --background: #faf7f2;
  --bg: #faf7f2;
}

القوالب

انسخ أي كتلة إلى حقل الـ CSS المخصَّص. امزج وطابق كما تشاء.

الأزرار

هذه القواعد تستهدف .add-to-cart، أي زر الشراء على بلاطات شبكة المنتجات. أما زرّا اشترِ الآن والدفع السريع في صفحة المنتج فاضبط لهما --pd-buynow / --pd-fc-btn (أو استعمل منتقيات الألوان في التخصيص ← صفحة المنتج) بدل مطاردة فئة.

/* أزرار على شكل حبّة دواء (مستديرة بالكامل) */
.add-to-cart { border-radius: 999px; }

/* أزرار متدرّجة الألوان مع ارتفاع خفيف عند المرور */
.add-to-cart {
  background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
  border: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.add-to-cart:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(245, 158, 11, .35);
}

/* نمط الإطار (outline) */
.add-to-cart {
  background: transparent;
  color: #f59e0b;
  border: 2px solid #f59e0b;
}
.add-to-cart:hover { background: #f59e0b; color: #fff; }

بطاقات المنتجات

/* ظلّ ناعم + زوايا مستديرة */
.product-card {
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
  overflow: hidden;
}

/* رفع البطاقة عند المرور فوقها */
.product-card {
  transition: transform .2s ease, box-shadow .2s ease;
}
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(0, 0, 0, .12);
}

/* تكبير لطيف لصورة المنتج عند المرور */
.product-card:hover .product-image img { transform: scale(1.04); }
.product-image img { transition: transform .3s ease; }

/* جعل السعر أكبر وأعرض */
.product-price { font-size: 1.15rem; font-weight: 800; }

تأثيرات الـ hover مُعطَّلة على الهواتف — اتركها كذلك

كل القوالب تأتي بتجاوزات @media (hover: none) and (pointer: coarse) معلَّمة بـ !important تُبطِل تحويلات .product-card:hover وتُخفي .product-actions. وهذا مقصود: فالبطاقة كاملةً قابلة للنقر، وعلى iOS تلتهم حالة الـ hover النشطة أول لمسة للمتسوّق، فيتوقّف المنتج عن الفتح من اللمسة الأولى. لا تُعِد فرض أنماط الـ hover على أجهزة اللمس.

رأس الصفحة وشريط التنقّل

/* رأس صفحة ثابت (sticky) مع ظلّ */
.navbar-store {
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .06);
}

/* رأس صفحة بلون العلامة الصلب */
.navbar-store { background: #111827; }

الرأس الثابت وظلّ الرأس وحدّ الرأس لها أصلًا مفاتيح في التخصيص ← الرأس والشعار — استعملها أولًا، فهي تبقى بعد تغيير القالب.

الشريط الترويجي

/* شريط ترويجي متدرّج لافت للنظر */
.announcement-bar {
  background: linear-gradient(90deg, #f59e0b, #ef4444);
  color: #fff;
  font-weight: 600;
  letter-spacing: .3px;
}

الخطوط والطباعة

يدعم الـ CSS المخصَّص @import، فيمكنك تحميل خطّ من Google Fonts وتطبيقه في كل مكان. ضع سطر @import في أعلى الحقل تمامًا.

/* تحميل خطّ من Google Fonts واستعماله عبر المتجر */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');

body { font-family: 'Poppins', sans-serif; }

/* خطّ مختلف وأثقل للعناوين فقط */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@600;800&display=swap');
h1, h2 { font-family: 'Sora', sans-serif; letter-spacing: -.5px; }

تذكّر حدّ 50 كيلوبايت: قائمة طويلة من أسطر @import مع صفحة أنماط كبيرة قد تبلغه فتُقتطَع بصمت.

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

للواجهات العربية، اختر خطًّا بتغطية كاملة للحروف العربية — Cairo وTajawal وAlmarai كلّها تعمل جيّدًا: @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;700&display=swap');

الـ Hero

لا توجد فئة .hero مشتركة — ضع بدلها محدِّد الـ hero الخاص بقالبك: .hero-section (Starter) و.dt-hero-section (Digital) و.sc-hero (Started V2 وBloom) و.pr-hero (Prestige) و.pm-hero (Promobi). والمثال أدناه يستعمل محدِّد Starter.

/* تعتيم الـ hero ليبقى النص المتراكب فوقه مقروءًا */
.hero-section::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .35);
}
.hero-section h1 { position: relative; z-index: 1; text-shadow: 0 2px 12px rgba(0,0,0,.4); }

التذييل

/* تذييل داكن مع تلوين الروابط بلون العلامة عند المرور */
.footer { background: #0f172a; color: #cbd5e1; }
.footer a { color: #cbd5e1; transition: color .15s ease; }
.footer a:hover { color: #f59e0b; }

ملاحظة

.footer يغطّي كل القوالب باستثناء Brico الذي يعرض تذييله الخاص — استعمل .brico-footer هناك. كما أن للون التذييل منتقيًا مدمجًا (التخصيص ← التذييل، Pro فما فوق).

تعديلات للجوال فقط

غلِّف القواعد داخل استعلام @media لتُطبَّق فقط على الشاشات الصغيرة:

@media (max-width: 768px) {
  /* أزرار أكبر وأسهل للنقر على الهواتف */
  .add-to-cart { padding: 14px 18px; font-size: 1rem; }

  /* زوايا أنعم لبطاقة المنتج على الهواتف */
  .product-card { border-radius: 12px; }
}

أمران يحاولهما الناس هنا ولا ينجحان:

إخفاء صندوق البحث. لا توجد فئة بحث مشتركة ؛ فالبحث في الصفحة الرئيسية فقط وخاص بكل قالب (.brico-search و.sc-search و.pr-search و.pm-search و.mobile-search). ويوجد في المخصِّص مفتاح شريط البحث للإظهار/الإخفاء — استعمله بدلًا من ذلك.
فرض شبكة منتجات بعمودين. شبكات منتجات الصفحة الرئيسية أعمدة Bootstrap (col-6 col-md-4 col-lg-3) وهي أصلًا بعمودين على الجوال. أما صفحات كل المنتجات والتصنيفات فتستعمل .products-grid. و.product-grid هو غلاف المعرض + المعلومات في صفحة تفاصيل المنتج — واستهدافه يضغط المعرض وعمود المعلومات جنبًا إلى جنب على الهواتف ولا يفعل شيئًا للصفحة الرئيسية.

إخفاء ما لا تريده

/* إخفاء زر WhatsApp العائم */
.whatsapp-float { display: none; }

/* إخفاء الشريط الترويجي */
.announcement-bar { display: none; }

warning

لا تُخفِ أبدًا أزرار اشترِ / أضف إلى السلة (.add-to-cart، وزرَّي «اشترِ الآن» و«الدفع السريع») — فذلك يمنع الزبائن من الطلب. استخدم المعاينة المباشرة للتأكّد من بقائها ظاهرة. وإذا كنت تريد فعلًا إخفاءها في بعض الصفحات، ففي المخصِّص مفاتيح مناسبة لذلك (التخصيص ← بطاقة المنتج، والتخصيص ← صفحة المنتج، Pro فما فوق).

حركات دقيقة وسلسة

/* إظهار كل شيء بتلاشٍ لطيف عند التحميل */
body { animation: dzfade .4s ease both; }
@keyframes dzfade { from { opacity: 0; } to { opacity: 1; } }

/* انتقالات سلسة للألوان/الظلال في كل مكان */
a, button, .product-card { transition: all .15s ease; }

أفضل الممارسات

عايِن قبل أن تحفظ — تتحدّث لوحة المعاينة مباشرةً أثناء كتابتك. احفظ فقط عندما يبدو الأمر صحيحًا.
الجوال أولًا — معظم المتسوّقين الجزائريين على الهواتف. تحقّق دائمًا من معاينة الجوال ومن هاتف حقيقي.
لا تُخفِ عناصر الواجهة الحرجة — أبقِ زرّ اشترِ/أضف إلى السلة والسعر والدفع ظاهرين.
أبقِه صغيرًا — بضع قواعد مركّزة أفضل من صفحة أنماط ضخمة، كما أن الحقل محدود بصرامة بـ 50 كيلوبايت مع اقتطاع صامت لما بعدها.
استعمل المفتاح المدمج متى وُجد — انظر الجدول في أعلى هذه الصفحة. فإعداد المخصِّص لا يُلغيه تحديث قالب.
استخدم متغيّرات العلامة (--primary، --gradient، --pd-buynow) — تغيير واحد يعيد تصميم المتجر كاملًا.
تحقّق من اللغتين — إذا كنت تبيع بالعربية (RTL) وبالفرنسية/الإنجليزية (LTR)، فعايِن كليهما حتى لا يكسر تعديل margin-left الاتجاه الآخر.
@import يأتي أولًا — يجب أن تكون استيرادات الخطوط في أعلى الحقل تمامًا وإلّا تجاهلها المتصفّح.

استكشاف الأخطاء وإصلاحها

العَرَض	السبب المُحتمَل	الحلّ
قاعدتي لا تُطبَّق	قاعدة القالب أكثر تحديدًا	أضِف `!important`، أو استهدف بدقّة أكبر (مثل `.product-card .add-to-cart`)
قاعدتي لا تُطبَّق	المحدِّد غير موجود أصلًا في DZBuild	`.btn-primary` و`.header-search` و`.hero` هي المتّهم المعتاد — انظر قائمة المحدِّدات
لا يزال لا شيء	خطأ مطبعي في المحدِّد / فاصلة منقوطة أو قوس ناقص	أعِد فحص الكتلة ؛ قوس واحد مكسور قد يُعطّل البقيّة
آخر صفحة الأنماط لا يفعل شيئًا	تجاوزت حدّ 50 كيلوبايت فاقتُطِعت عند الحفظ	اختصر الـ CSS
التغيير يظهر في المعاينة لكن ليس على المتجر الحيّ	ذاكرة التخزين المؤقّت في متصفّحك أنت	التغيير المحفوظ يصل إلى الزوّار خلال ثوانٍ، فيُفترَض أنه صار ظاهرًا للجميع أصلًا. أعِد التحميل بقوّة (Ctrl/Cmd+Shift+R) أو افتح نافذة خاصّة
خطّي لا يُحمَّل	`@import` ليس في الأعلى	انقل كل سطر `@import` إلى أعلى الحقل تمامًا
لا شيء يتغيّر في صفحة الهبوط	الـ CSS المخصَّص لا يُطبَّق على صفحات `/landing/…`	نسِّق صفحة الهبوط من محرِّر صفحات الهبوط
المتجر يبدو مكسورًا	قاعدة تجاوزت الحدّ	فرّغ الحقل واحفظ للتراجع فورًا — لا شيء دائم

وسم إغلاق شارد لا يمكنه كسر صفحتك

إذا انتهى نصّ مثل </style> أو </script> داخل الحقل، فإن DZBuild يُهرِّبه قبل وصوله إلى الصفحة، فلا يستطيع إنهاء صفحة الأنماط ولا حقن أي وسوم. وهو يُهرَّب لا يُحفَظ كما هو، فلا تتوقّع أن يُعرَض مثل هذا النص.

التراجع في أي وقت

الـ CSS المخصَّص ليس مدمِّرًا أبدًا. للتراجع عن كل شيء، فرّغ حقل الـ CSS المخصَّص واضغط حفظ — تعود واجهة متجرك إلى إعدادات القالب الافتراضية فورًا. منتجاتك وطلباتك وإعداداتك تبقى دون مساس.

تريد تغيير التخطيط أو الألوان أو الخطوط أو الأقسام دون كتابة كود؟ معظم ذلك مدمَج في المحرّر المرئي — انظر تخصيص المتجر.

أين تلصقه​

ابحث عن مفتاح مدمج أوّلًا​

كيف يعمل الـ CSS (شرح في 60 ثانية)​

العثور على المحدِّد الصحيح​

قائمة محدِّدات DZBuild المختصرة​

متغيّرات CSS للعلامة التجارية​

القوالب​

الأزرار​

بطاقات المنتجات​

رأس الصفحة وشريط التنقّل​

الشريط الترويجي​

الخطوط والطباعة​

الـ Hero​

التذييل​

تعديلات للجوال فقط​

إخفاء ما لا تريده​

حركات دقيقة وسلسة​

أفضل الممارسات​

استكشاف الأخطاء وإصلاحها​

التراجع في أي وقت​