> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.

# CSS مخصص

> اكتب CSS لتخصيص تصميم درج السلة الخاص بك.

<div id="overview">
  # نظرة عامة
</div>

يتيح لك هذا القسم تغيير شكل ومظهر عناصر السلة الموجودة أو تطبيق أنماط على HTML المخصص المضاف عبر المحرر.

<div id="where-to-find-it">
  ## **أين تجده**
</div>

انتقل إلى:\
**Upcart > Cart Editor > Settings > Custom CSS**\
قسم Settings عبارة عن صف من علامات التبويب؛ و Custom CSS إحداها، إلى جانب Custom HTML. إذا لم تكن مرئية، فستجدها خلف **More settings**.

<div id="how-it-works">
  ## **كيف يعمل**
</div>

يمكنك إضافة CSS من أجل:

* تنسيق عناصر السلة الافتراضية
* تعديل مظهر HTML المخصص
* ضبط المسافات والمحاذاة وأسلوب الخطوط والمزيد

أثناء الكتابة، ستظهر **نافذة إكمال تلقائي منبثقة** تقترح محددات Upcart صالحة للمساعدة في تسريع التحرير. سيؤدي اختيار اقتراح إلى إكمال القاعدة تلقائيًا ومساعدتك في هيكلة الكود الخاص بك. إذا لم تظهر التغييرات كما هو متوقع، فراجع اقتراحات استكشاف الأخطاء الشائعة، مثل تحديث ذاكرة التخزين المؤقت في كل من المتصفح ومحرر Upcart، والتحقق من مواضع CSS، والتأكد من الخصوصية (specificity) الصحيحة في قواعد CSS الخاصة بك.

<div id="using-selectors">
  ## **استخدام المحددات**
</div>

يوفر Upcart مجموعة واسعة من المحددات المخصصة. انقر على **"Show list"** لعرض جميع الخيارات المتاحة. تجنب استخدام المحددات العامة مثل `body` أو `div` أو `h3` ما لم تكن مقيّدة بـ `.upcart-cart` لمنع التغييرات غير المقصودة في واجهة متجرك. في الحالات التي لا تُطبَّق فيها الأنماط بشكل صحيح، فكّر في زيادة خصوصية CSS أو إضافة `!important` إلى قواعد CSS الخاصة بك. يضمن ذلك تجاوزها لأي أنماط متعارضة. مثال:

```
.upcart-cart .upcart-checkout-button {    border-radius: 20px !important;    background-color: #CFA17E !important;    color: #1A1A1A !important;}
```

مثال (محدد آمن):

```
.upcart-cart h3 { font-size: 20px; }
```

<div id="example-thank-you-message-styling">
  ## **مثال: تنسيق رسالة الشكر**
</div>

لنفترض أنك أضفت هذا الـ HTML المخصص أسفل زر الدفع:

```
<div class="thank-you-message">Thanks for shopping with us!</div>
```

بدون CSS، ستبدو الرسالة عادية. لتنسيقها:

```css theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
.thank-you-message { color: green; font-size: 16px; font-weight: bold; text-align: center; margin-top: 5px; }
```

<div id="common-problems-and-solutions">
  # المشاكل الشائعة وحلولها
</div>

<div id="css-not-appearing-on-mobile-devices">
  ## عدم ظهور CSS على الأجهزة المحمولة
</div>

إذا لم يكن النص أو الأنماط المخصصة مرئية على الجوال:

* حدّث الصفحة في كل من **محرر Upcart** ومتصفح جوالك لمسح النسخ المخزنة مؤقتًا.
* تأكد من أن أحدث إصدار منشور من السلة نشط.
* تأكد من حفظ CSS في علامة التبويب **Custom CSS** ضمن **Upcart > Cart Editor > Settings**.

<div id="discrepancies-between-editor-and-live-store">
  ## اختلافات بين المحرر والمتجر المباشر
</div>

الأنماط التي تظهر بشكل صحيح في المحرر ولكن ليس على الموقع المباشر قد تحتاج إلى زيادة خصوصية المحدد أو إضافة `!important` إلى القواعد الرئيسية.

```
.upcart-cart .upcart-checkout-button { font-size: 18px !important; background: blue !important; color: white !important; }
```

<div id="incorrect-css-selector-usage">
  ## استخدام محدد CSS غير صحيح
</div>

تحقق من استهداف الفئة (class) أو المعرّف (ID) الصحيح. ضمّن دائمًا بادئات مثل `.upcart-` للعناصر الخاصة بـ Upcart لتجنب النتائج غير المقصودة. إذا لم يُطبَّق النمط كما هو متوقع، فتأكد من أن المحدد `.thank-you-message` يستهدف بدقة عنصر HTML المقصود وتحقق من وضع كود CSS في علامة التبويب الصحيحة (Upcart > Cart Editor > Settings > Custom CSS).

***

الدعم الخاص بالتخصيصات:

لا يمكن لدعم Upcart المساعدة في تنفيذ أو تصحيح أخطاء CSS المخصص. للمساعدة في التنسيقات المتقدمة، نوصي بالعمل مع خبير Shopify. لاستكشاف أخطاء CSS المخصص وإصلاحها، راجع قسم المشاكل الشائعة للحصول على إرشادات حول حل مشكلات مثل الأنماط المفقودة على الأجهزة المحمولة، والاختلافات بين معاينات المحرر وواجهات المتجر المباشرة، وخطأ وضع المحددات.