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

# التنسيق وCSS

> خصّص مظهر النافذة بلون السمة في خطوة النمط، أو أضف CSS مخصصاً في خطوة التنسيق باستخدام أصناف النموذج الجاهزة.

معظم الفرق تكتفي بلون السمة من خطوة **النمط**. خطوة **التنسيق** للمصمّم أو المطوّر الذي يحتاج تجاوز المظهر الافتراضي بـ CSS.

## لون السمة أولاً

في الخطوة الأولى اختر **لون السمة** ليتوافق مع أزرار وعناصر النافذة. جرّب النتيجة من المعاينة قبل كتابة أي CSS.

## CSS مخصص

في خطوة **التنسيق** الصق أنماطك في مربع **CSS مخصص**. الحقل باتجاه LTR لأن الكود لاتيني.

<Info>
  **وسائط مطلوبة:** خطوة التنسيق مع مربع CSS ومرجع الأصناف ظاهرين.\
  `/images/help/popups/styling-css-step.webp`
</Info>

## مرجع الأصناف

| الصنف                        | العنصر            |
| ---------------------------- | ----------------- |
| `.octobots-form`             | حاوية النموذج     |
| `.octobots-form-title`       | عنوان النموذج     |
| `.octobots-form-description` | وصف النموذج       |
| `.octobots-form-field`       | حاوية الحقل       |
| `.octobots-form-input`       | عناصر الإدخال     |
| `.octobots-form-btn`         | زر الإرسال        |
| `.octobots-callout`          | حاوية المقدمة     |
| `.octobots-callout-title`    | عنوان المقدمة     |
| `.octobots-success`          | حاوية صفحة النجاح |

مثال بسيط:

```css theme={"theme":{"light":"github-light","dark":"github-dark"}}
.octobots-form-btn {
  border-radius: 8px;
}
```

## متى تتجنب CSS الثقيل؟

* إن كان التغيير لوناً فقط → استخدم لون السمة
* تجنّب كسراً للتخطيط على الجوال دون اختبار المعاينة على الهاتف
* لا تعتمد على محددات خارج هذه الأصناف — قد تتغير واجهة العرض

## ذات صلة

* [أنواع العرض](/ar/help-center/guides/popups/display-types)
* [إنشاء نافذة](/ar/help-center/guides/popups/create)
* [تثبيت كود النافذة](/ar/help-center/guides/popups/install-code)


## Related topics

- [إنشاء نافذة](/ar/help-center/guides/popups/create.md)
- [أنواع العرض](/ar/help-center/guides/popups/display-types.md)
- [عقدة: ملاحظة لاصقة](/ar/help-center/guides/automations/nodes/note.md)
- [طريقة إنشاء قالب تسويقي](/ar/help-center/guides/whatsapp/templates/doc-1914159.md)