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

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

ميزة Enterprise

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

أين تلصقه

لوحة التحكم → التخصيص → CSS مخصَّص (CSS مخصّص / CSS personnalisé). اكتب أو الصق الـ CSS الخاص بك، وراقب تحدُّث المعاينة المباشرة على اليمين، ثم اضغط حفظ عندما يبدو الأمر صحيحًا. يُحمَّل الـ CSS الخاص بك بعد صفحة أنماط القالب، فتتغلّب قواعدك.

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

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

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

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

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

يشير المحدِّد إلى عناصر. أكثر الأنواع شيوعًا:
- .classname — كل عنصر يحمل تلك الفئة (مثل .btn-primary). هذا ما ستستخدمه في 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 الخاص بك يُحمَّل بعد القالب، فإنّ .btn-primary { … } الخاص بك يتغلّب على قاعدة القالب.
!important يفرض فوز قيمة معيّنة. استخدمه باعتدال — فقط حين لا تستطيع قاعدة عاديّة التغلّب على القالب:

.btn-primary { border-radius: 999px !important; }

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

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

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

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

تلميح

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

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

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

المحدِّد	يستهدف
`.navbar`	رأس الصفحة العلوي / شريط التنقّل
`.announcement-bar`	الشريط الترويجي الرفيع فوق رأس الصفحة
`.header-search`	صندوق البحث في رأس الصفحة
`.hero`	كتلة البنر الكبيرة أعلى الصفحة الرئيسية
`.product-card`	بطاقة منتج واحدة في أي شبكة منتجات
`.product-image`	الصورة داخل بطاقة المنتج
`.product-price`	نصّ السعر على بطاقة المنتج
`.product-actions`	أزرار الإجراءات التي تظهر عند المرور فوق بطاقة المنتج
`.add-to-cart`	أزرار "أضف إلى السلة" في الشبكات
`.btn-primary`	الأزرار الأساسية (اشترِ الآن، اطلب، إلخ.)
`.whatsapp-float`	زر WhatsApp العائم
`.footer`	تذييل الصفحة

تكشف بعض القوالب متغيّرات CSS للعلامة التجارية يمكنك تجاوزها بشكل شامل:

المتغيّر	يتحكّم في
`--primary`	لون العلامة الأساسي
`--secondary`	اللون الثانوي
`--gradient`	تدرّج الأساسي ← الثانوي (الأزرار، الـ hero)
`--btn-radius`	استدارة زوايا الأزرار
`--background`	خلفية الصفحة

/* إعادة تصميم علامة المتجر كاملةً في كتلة واحدة (القوالب التي تستخدم المتغيّرات) */
:root {
  --primary: #6d28d9;
  --secondary: #a78bfa;
  --btn-radius: 12px;
}

القوالب

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

الأزرار

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

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

/* نمط الإطار (outline) */
.btn-primary {
  background: transparent;
  color: #f59e0b;
  border: 2px solid #f59e0b;
}
.btn-primary: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 { transform: scale(1.04); }
.product-image { transition: transform .3s ease; }

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

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

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

/* رأس صفحة بلون العلامة الصلب */
.navbar { 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, .hero h1 { font-family: 'Sora', sans-serif; letter-spacing: -.5px; }

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

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

الـ Hero

/* تعتيم الـ hero ليبقى النص المتراكب فوقه مقروءًا */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .35);
}
.hero 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; }

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

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

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

  /* إخفاء شريط البحث على الجوال لتوفير مساحة */
  .header-search { display: none; }

  /* عمودان من المنتجات بدل عمود واحد */
  .product-grid { grid-template-columns: 1fr 1fr; }
}

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

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

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

warning

لا تُخفِ أبدًا أزرار اشترِ / أضف إلى السلة (.btn-primary، .add-to-cart) — فذلك يمنع الزبائن من الطلب. استخدم المعاينة المباشرة للتأكّد من بقائها ظاهرة.

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

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

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

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

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

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

العَرَض	السبب المُحتمَل	الحلّ
قاعدتي لا تُطبَّق	قاعدة القالب أكثر تحديدًا	أضِف `!important`، أو استهدف بدقّة أكبر (مثل `.product-card .btn-primary`)
لا يزال لا شيء	خطأ مطبعي في المحدِّد / `;` أو `}` ناقصة	أعِد فحص الكتلة؛ قوس `{ }` مكسور واحد قد يُعطّل البقيّة
التغيير يظهر في المعاينة لكن ليس على المتجر الحيّ	ذاكرة التخزين المؤقّت في الحافة (edge cache)	انتظر لحظة وأعِد التحميل بقوّة (Ctrl/Cmd+Shift+R)
خطّي لا يُحمَّل	`@import` ليس في الأعلى	انقل كل سطر `@import` إلى أعلى الحقل تمامًا
المتجر يبدو مكسورًا	قاعدة تجاوزت الحدّ	فرّغ الحقل واحفظ للتراجع فورًا — لا شيء دائم

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

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

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

أين تلصقه​

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

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

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

القوالب​

الأزرار​

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

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

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

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

الـ Hero​

التذييل​

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

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

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

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

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

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