تعديل ثيم سلة بـ CSS: ما يمكن تغييره وما لا يمكن، وكيف لا ينكسر مع التحديث

تعديل ثيم سلة بـ CSS يتم من «تصميم المتجر» ثم «تخصيص النسخة» ثم «تخصيص الثيم» ثم «تخصيص عن طريق الـ CSS»، ويشترط باقة برو أو سبيشل ودومينًا خاصًا بحسب مركز مساعدة سلة. بالـ CSS تغيّر الألوان والأحجام والمسافات وتخفي عناصر وترتّبها بصريًا، لكنك لا تغيّر محتوى الصفحة ولا منطقها. ولكي لا ينكسر التعديل مع التحديث: محددات قصيرة، وتعليق لكل تعديل، ونسخة محفوظة، واختبار بعد كل تحديث للثيم.

آخر تحديث: أكتوبر 2026

وإن أردت من يكتب التعديل ويختبره على متجرك: تعديل ثيم سلة بـ CSS.

أين تضيف CSS في متجر سلة؟

الخطوات كما يصفها مركز مساعدة سلة (آخر تحديث للمقالة 18 أغسطس 2026):

1. من القائمة الجانبية في لوحة التحكم افتح تصميم المتجر.
2. على بطاقة الثيم المفعّل اضغط النقاط الثلاث واختر تخصيص النسخة.
3. افتح تبويب تخصيص الثيم، ثم تخصيص عن طريق الـ CSS.
4. الصق الكود، واحفظ، ثم افتح المتجر وعاين النتيجة.

المتطلبات قبل أن تبدأ

ملاحظة: مقالة سلة تشرح حقل CSS فقط، ولم نجد فيها ما يشير إلى إضافة JavaScript من الحقل نفسه. لا تفترض أن كل ما يُكتب في الحقل سيُنفَّذ.

ما الذي يمكن تغييره بـ CSS وما لا يمكن

هذا الجدول يوفّر عليك طلبات كثيرة لا تحلّها CSS أصلًا:

إذا كان طلبك في العمود الثاني، فأنت تحتاج غالبًا تطبيقًا من متجر تطبيقات سلة، أو إعدادًا في لوحة التحكم، أو ثيمًا خاصًا على Twilight، وسنعود إليه في آخر المقالة.

كيف تعرف اسم العنصر الذي تريد تعديله؟

ينصح مركز مساعدة سلة بالطريقة نفسها التي يستعملها المطوّرون: من صفحة المتجر اضغط بزر الفأرة الأيمن على العنصر واختر فحص / Inspect. ستظهر لك الأسماء (الـ classes) التي يحملها العنصر.

ثيمات سلة الحديثة مبنية على Twilight، محرك الثيمات الذي يعتمد على Tailwind CSS ومكوّنات ويب جاهزة. وبحسب وثائق مطوّري سلة، لكل مكوّن class خاص به، مثل .s-button ومشتقاته، ويمكن تنسيقه بـ CSS عادي. أمثلة هذه المقالة مأخوذة من مصدر ثيم رائد الذي تنشره سلة على GitHub (الإصدار 1.358.0، آخر تحديث للمستودع 19 أكتوبر 2026). الثيمات الأخرى في متجر الثيمات قد تستعمل أسماء مختلفة، فافحص ثيمك قبل النسخ.

تحذير مهم: المحددات (selectors) في هذه المقالة صحيحة في ثيم رائد وقت الكتابة، لكنها قد تتغير مع تحديثات الثيم أو مكوّنات Twilight. افحص العنصر في متجرك قبل أن تلصق أي كود، وأعد الاختبار بعد كل تحديث.

أمثلة CSS جاهزة لثيم سلة (رائد / Twilight)

كل مثال مكتوب بتعليق يشرح الغرض والتاريخ. هذه العادة وحدها تنقذك بعد ستة أشهر.

1. عنوان المنتج في سطرين فقط

العناوين الطويلة تكسر محاذاة البطاقات في صفحة القسم. هذا يقصّها بعد سطرين:

/* بطاقة المنتج: العنوان سطران كحد أقصى — أكتوبر 2026 */
.s-product-card-content-title a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

والحل الأفضل على المدى البعيد: عناوين منتجات أقصر وأوضح. CSS هنا تجميل لا علاج.

2. حجم الشعار على الجوال

/* الشعار أصغر على الشاشات الصغيرة — أكتوبر 2026 */
@media (max-width: 479px) {
  .navbar-brand img {
    max-height: 36px;
  }
}

ثيم رائد يضبط ارتفاع الشعار في الرأس بقاعدة خاصة به، فإن لم يتغير شيء، تأكد أن محددك يطابق ما يظهر في «فحص».

3. زر «إضافة للسلة» بحواف دائرية

/* الأزرار الرئيسية بحواف دائرية — أكتوبر 2026 */
.s-button-solid.s-button-primary {
  border-radius: 9999px;
}

هذا يغيّر كل الأزرار الرئيسية في المتجر، لا زر الإضافة وحده. إن أردت زر صفحة المنتج فقط، فضيّق المحدد:

/* زر الإضافة في صفحة المنتج فقط */
.container--product-details salla-add-product-button .s-button-primary {
  border-radius: 9999px;
}

4. لون تذييل المتجر

/* تذييل بلون الهوية — أكتوبر 2026 */
.store-footer {
  background-color: #10261f;
}
.store-footer .store-footer__inner {
  background-color: #163328;
}

في ثيم رائد للتذييل طبقتان: الخارجية .store-footer والداخلية .store-footer__inner، ولكلٍّ خلفيتها. لهذا يغيّر كثيرون الأولى ولا يرون فرقًا.

5. إخفاء أزرار المشاركة في صفحة المنتج

/* إخفاء أزرار المشاركة الاجتماعية في صفحة المنتج — أكتوبر 2026 */
.container--product-details salla-social-share {
  display: none;
}

تذكّر: العنصر المخفي ما زال في الصفحة. لا تستعمل الإخفاء لإزالة معلومات يلزمك النظام بإظهارها، مثل بيانات التواصل أو رقم السجل أو شهادة التوثيق في التذييل.

6. وصف المنتج أسهل قراءة

/* وصف المنتج: سطور أوسع وخط أكبر قليلًا — أكتوبر 2026 */
.product__description {
  font-size: 1.0625rem;
  line-height: 2;
}

لاحظ أننا لم نغيّر تباعد الحروف. لا تضف letter-spacing للنص العربي؛ الحروف العربية متصلة، والتباعد يقطّع الكلمة ويضعف القراءة.

7. لون الهوية الأساسي

ثيمات Twilight تعرّف لون الهوية في متغير CSS اسمه --color-primary، ومعه --color-primary-dark و--color-primary-light و--color-primary-reverse، والخط في --font-main، بحسب وثائق متغيرات CSS في سلة. وفي ثيم رائد، الألوان primary في Tailwind تقرأ من هذه المتغيرات.

الطريقة الصحيحة لتغيير اللون الأساسي هي إعدادات الثيم في لوحة التحكم، لا CSS. لكن إن احتجت درجة لا تتيحها الإعدادات:

/* تثبيت لون الهوية — يلغي اختيار اللون من الإعدادات. أكتوبر 2026 */
html:root {
  --color-primary: #0f5c4d;
  --color-primary-dark: #0b4539;
  --color-primary-light: #3f8a7b;
  --color-primary-reverse: #ffffff;
}

استعملنا html:root بدل :root لأن الثيم نفسه يعرّف المتغيرات على :root، والمحدد الأقوى قليلًا يضمن أن قيمتك تُطبَّق. والثمن: تغيير اللون من الإعدادات لن يعمل بعدها حتى تحذف هذا الكود.

8. نقاط التوقف في ثيم رائد

ثيم رائد يستعمل نقاط توقف Tailwind، ويضيف xs عند 480px، ويبدّل قائمة الجوال عند lg أي 1024px. اكتب استعلاماتك على النقاط نفسها حتى لا تتعارض مع الثيم:

/* شاشات أصغر من 768px */
@media (max-width: 767px) {
  .breadcrumbs {
    font-size: 0.8125rem;
  }
}

/* شاشات أصغر من 1024px (حيث تظهر قائمة الجوال) */
@media (max-width: 1023px) {
  .main-nav-container .navbar-brand img {
    max-height: 40px;
  }
}

قبل أن تجرّب هذه الأمثلة على متجر يبيع، اطلب الفحص المجاني لمتجرك. نراجع الواجهة على الجوال والحاسوب، ونخبرك أي التعديلات تستحق وأيها يحلّه إعداد في اللوحة.

كيف لا ينكسر تعديل CSS مع تحديث الثيم؟

الثيمات تتحدّث. والتحديث قد يغيّر اسم class أو بنية عنصر، فيتوقف تعديلك أو يظهر بشكل غريب. هذه القواعد تقلّل الخطر:

1. محددات قصيرة ومحددة. .store-footer__inner أفضل من footer > div > div:nth-child(2). كلما طال المحدد واعتمد على الترتيب، زاد احتمال انكساره.
2. ابدأ من class المكوّن (s-product-card-… وs-button-…)، لا من classes الأدوات المؤقتة مثل mb-5 أو text-gray-500. هذه الأخيرة تتغير مع أي تعديل في التصميم.
3. قلّل !important. استعمله حين يفرض الثيم قيمة بقوة لا تُكسر بغيره، ودوّن السبب في تعليق.
4. تعليق لكل تعديل يذكر: ماذا يغيّر، ولماذا، والتاريخ.
5. احفظ نسخة من الكود خارج سلة (ملف نصي أو مستند). إن تغيّر الثيم أو أعدت تثبيته، يبقى عندك.
6. عدّل نسخة واحدة في كل مرة واختبرها قبل أن تضيف التالية. خمسة تعديلات دفعة واحدة تجعل اكتشاف الخطأ صعبًا.
7. راجع بعد كل تحديث للثيم. افتح الصفحات الخمس الأساسية وقارن.

قائمة اختبار بعد أي تعديل CSS

انسخها واستعملها في كل مرة:

• الصفحة الرئيسية على جوال صغير (عرض 375px تقريبًا) وعلى حاسوب
• صفحة قسم فيها منتجات بعناوين طويلة
• صفحة منتج بخيارات (مقاس ولون) وأخرى بلا خيارات
• السلة وإضافة منتج إليها
• القائمة الجانبية في الجوال: تفتح وتغلق
• الرأس عند التمرير (الرأس الثابت)
• التذييل: شهادة التوثيق وبيانات التواصل ظاهرة
• الوضع الليلي إن كان ثيمك يدعمه
• متصفحا Safari على iPhone وChrome على أندرويد. مقالة سلة نفسها تنبّه إلى اختبار التوافق عبر أكثر من متصفح

أخطاء شائعة في تعديل ثيم سلة

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

متى لا تكفي CSS: Twig وTwilight والثيم الخاص

حين يكون المطلوب تغيير البنية، لا الشكل: قسم جديد في الصفحة الرئيسية بمنطق خاص، أو صفحة منتج مختلفة كليًا، أو عرض معلومات من بيانات المنتج لا يعرضها الثيم. هنا الأداة هي ثيم Twilight مبني بقوالب Twig ومكوّنات سلة.

بحسب مركز مساعدة سلة (آخر تحديث 31 أغسطس 2026)، Twilight ميزة تتيح للتاجر ثيمًا مخصصًا بالكامل يبنيه مع مطوّرين خارجيين، ومتجر الثيمات يضم أكثر من 100 ثيم جاهز. القرار العملي:

ونصيحة صادقة: لا تبدأ بثيم خاص لمتجر جديد لم يبع بعد. ثيم جاهز جيد مع تعديلات CSS محدودة يكفي أغلب المتاجر في سنتها الأولى.

نعدّلها لك أم تعدّلها بنفسك؟

إن كان التعديل لونًا أو حجمًا، فالأمثلة أعلاه تكفيك، ولا تحتاج أحدًا.

إن كان التعديل أدق، أو جرّبته وانكسر شيء، فهذا عملنا في تعديلات CSS/JS على ثيم سلة: تعديل محدد في عنصر محدد، يُختبر على الجوال والحاسوب قبل التسليم، ونعمل بحساب موظف بصلاحية التصميم وحدها. وإن كانت حاجتك ثيمًا لا يشبه أحدًا، فاقرأ عن ثيم Twilight الخاص. وإن كنت تنقل متجرك إلى سلة، فابدأ من دليل النقل من زد إلى سلة. أو راسلنا بصورة ما تريد تغييره.

أسئلة شائعة

هل يمكن تعديل CSS في باقة سلة الأساسية؟

بحسب مركز مساعدة سلة، تخصيص CSS يتطلب باقة برو أو سبيشل ودومينًا خاصًا وصلاحية تصميم المتجر.

هل يضيع تعديل CSS عند تحديث الثيم؟

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

هل أستطيع إضافة JavaScript من حقل CSS؟

مقالة سلة عن التخصيص تشرح CSS فقط ولا تذكر JavaScript. الإضافات البرمجية تكون عادة بتطبيقات من متجر التطبيقات أو بثيم Twilight خاص.

من أين أعرف اسم العنصر؟

اضغط على العنصر بزر الفأرة الأيمن في متجرك واختر «فحص / Inspect»، وابحث عن class يبدأ بـ s- أو اسم واضح مثل store-footer.

هل تعديل CSS يؤثر على سرعة المتجر؟

بضعة أسطر لا تؤثر تقريبًا. الذي يؤثر هو استيراد خطوط أو صور خارجية كبيرة من داخل CSS، فتجنّبه.

هل هذه الأكواد تعمل على كل ثيمات سلة؟

لا. الأمثلة مأخوذة من ثيم رائد، والثيمات الأخرى قد تستعمل أسماء مختلفة. افحص ثيمك قبل النسخ.

متى أحتاج ثيم Twilight خاصًا؟

حين تريد تغيير بنية الصفحات أو إضافة أقسام بمنطق خاص، لا مجرد الألوان والأحجام.

المصادر

المراجع الرسمية والمنشورة التي استندت إليها المقالة، كما اطّلعنا عليها في أكتوبر 2026:

• مركز مساعدة سلة: التخصيص عن طريق CSS
• وثائق مطوّري سلة: Components Customization
• SallaApp/theme-raed على GitHub (الإصدار 1.358.0، 19 أكتوبر 2026)
• وثائق مطوّري سلة: CSS Variables
• مركز مساعدة سلة: تصميم ثيمك الخاص بواسطة Twilight

عن هذا الدليل: أعدّته نقلة للحلول الرقمية، شركة خليجية مرخّصة (س.ت 1647570) تصمّم المواقع ومتاجر سلة والأنظمة. الأرقام والإجراءات منقولة من المصادر أعلاه بتاريخ آخر تحديث المذكور أول المقالة، وإن رأيت معلومة تغيّرت راسلنا لنحدّثها.