# تخصيص ويدجت نموذج الاشتراك

بشكل افتراضي، يستخدم ويدجت نموذج الاشتراك نمطًا محايدًا يعمل على معظم الصفحات. بعد إضافة [كود التضمين](/ar/product/audience-data-and-segmentation/subscription-forms/create-subscription-forms/#copy-the-embed-code-and-add-it-to-your-site)، يمكنك مطابقته مع الهوية البصرية لموقعك عن طريق تعيين خصائص CSS المخصصة على عنصر `pushwoosh-subscribe-widget`. القيم الموجودة في الجداول أدناه تحل محل القيم الافتراضية.

<Aside type="caution" icon="setting" title="تحتاج إلى مساعدة من المطور">
قد تحتاج إلى مساعدة من فريق التطوير لديك لتطبيق تغييرات نمط الويدجت هذه على موقع الويب الخاص بك.
</Aside>

## تخصيص الألوان

| المتغير | الوصف | القيمة الافتراضية |
| --- | --- | --- |
| `--esw-primary-color` | اللون الأساسي للأزرار والروابط واللمسات المميزة | `#0E72E5` |
| `--esw-primary-hover` | لون العناصر الأساسية عند التمرير | `#1A85FF` |
| `--esw-text-color` | لون النص الرئيسي | `#4B5057` |
| `--esw-text-secondary` | النص الثانوي (العناصر النائبة، التسميات التوضيحية) | `#969CA3` |
| `--esw-background` | خلفية الويدجت | `#FFFFFF` |
| `--esw-surface-color` | لون السطح (عند التمرير، الخلفية الثانوية) | `#F7F9FA` |
| `--esw-border-color` | لون الحدود | `#DCE1E5` |
| `--esw-border-color-focus` | لون الحدود في حالة التركيز | `#0E72E5` |
| `--esw-error-color` | لون الخطأ | `#E52E59` |
| `--esw-success-color` | لون النجاح | `#479900` |
| `--esw-success-bg` | خلفية رسالة النجاح | `#F7F9FA` |

## الطباعة

| المتغير | الوصف | القيمة الافتراضية |
| --- | --- | --- |
| `--esw-font-family` | عائلة الخط | `Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif` |
| `--esw-font-size-base` | حجم الخط الأساسي | `14px` |
| `--esw-font-size-title` | حجم خط العنوان | `18px` |
| `--esw-font-size-label` | حجم خط تسمية الحقل | `12px` |
| `--esw-font-size-small` | النص الصغير (الأخطاء، الملاحظات) | `12px` |
| `--esw-font-weight-regular` | الوزن العادي | `400` |
| `--esw-font-weight-medium` | الوزن المتوسط | `500` |
| `--esw-font-weight-bold` | الوزن الغامق | `700` |
| `--esw-line-height-base` | ارتفاع السطر الأساسي | `1.4` |
| `--esw-line-height-title` | ارتفاع سطر العنوان | `1.2` |

## الأحجام والمسافات

| المتغير | الوصف | القيمة الافتراضية |
| --- | --- | --- |
| `--esw-input-height` | ارتفاع حقل الإدخال | `36px` |
| `--esw-button-height` | ارتفاع الزر | `36px` |
| `--esw-spacing-xs` | مسافة صغيرة جدًا | `4px` |
| `--esw-spacing-sm` | مسافة صغيرة | `8px` |
| `--esw-spacing-md` | مسافة متوسطة | `16px` |
| `--esw-spacing-lg` | مسافة كبيرة | `24px` |
| `--esw-popup-width` | عرض النافذة المنبثقة | `380px` |
| `--esw-popup-max-width` | أقصى عرض للنافذة المنبثقة | `90vw` |

## المظهر

| المتغير | الوصف | القيمة الافتراضية |
| --- | --- | --- |
| `--esw-border-radius` | نصف قطر الزاوية للعناصر | `4px` |
| `--esw-border-radius-popup` | نصف قطر زاوية النافذة المنبثقة | `8px` |
| `--esw-shadow-popup` | ظل صندوق النافذة المنبثقة | `0 0 6px rgba(0, 0, 0, 0.06), 0 10px 16px rgba(0, 0, 0, 0.1)` |

## أمثلة

<Tabs>
<TabItem label="CSS">

```css
pushwoosh-subscribe-widget {
  --esw-primary-color: #ff6b6b;
  --esw-border-radius: 12px;
  --esw-font-family: "Inter", sans-serif;
}
```

</TabItem>
<TabItem label="خاصية النمط">

```html
<pushwoosh-subscribe-widget
  formCode="YOUR_FORM_CODE"
  style="--esw-primary-color: #ff6b6b; --esw-border-radius: 12px;"
></pushwoosh-subscribe-widget>
```

</TabItem>
</Tabs>