نظرة عامة
يوفر NueForm إمكانيات تخصيص سمات واسعة تتيح لك مطابقة نماذجك مع علامتك التجارية. يمكن تخصيص كل جانب مرئي من النموذج، من الألوان والخطوط إلى الشعارات و CSS المخصص.
خصائص السمة
تُعيّن خصائص السمة على مستوى النموذج وتنطبق على كل سؤال في النموذج. يتم تحويلها إلى خصائص CSS مخصصة (متغيرات) عند العرض، فتتكيف جميع المكونات تلقائيًا.
خصائص الألوان
| الخاصية | متغير CSS | الوصف | الافتراضي |
|---|---|---|---|
| لون الخلفية | --fc-bg | لون خلفية النموذج بالكامل. | #0a0a0a |
| لون النص | --fc-text | لون النص الأساسي للأسئلة والمحتوى. | #e8e8e8 |
| لون السمة (التمييز) | --fc-accent | لون التمييز المستخدم للتمييزات والحالات النشطة وأرقام الأسئلة. | #6366f1 |
| لون نص الإجابة | --fc-answer-text | لون النص الذي يكتبه المستجيب في حقول الإدخال. | #e8e8e8 |
| لون النص التوضيحي | --fc-placeholder | لون النص التوضيحي في حقول الإدخال. | rgba(255,255,255,0.25) |
| لون الزر | --fc-btn-bg | لون خلفية الأزرار الرئيسية (موافق، بدء، إرسال). يرجع إلى لون السمة إذا لم يُعيّن. | #6366f1 |
| لون نص الزر | --fc-btn-text | لون نص الأزرار الرئيسية. | #ffffff |
| لون العنوان | --fc-title-color | لون عناوين الأسئلة/الأنشطة. يرجع إلى لون النص. | يرث لون النص |
| لون الوصف | --fc-description-color | لون أوصاف الأسئلة/الأنشطة. | لون النص بشفافية 55% |
| لون نص الخيار | --fc-option-color | لون تسميات خيارات الاختيار ومحتوى الأنشطة. | يرث لون النص |
| لون خلفية المؤشر | --fc-indicator-bg | لون خلفية مؤشرات الأنشطة في أنشطة Fuse. | التمييز بشفافية 15% |
| لون نص المؤشر | --fc-indicator-text | لون نص مؤشرات الأنشطة. | لون التمييز |
متغيرات الألوان المشتقة
ينشئ نظام السمات تلقائيًا متغيرات CSS إضافية من ألوانك الأساسية لاستخدامها في حالات المكونات المختلفة:
| متغير CSS | الوصف |
|---|---|
--fc-accent-hover | لون تمييز مُفتح لحالات التمرير. |
--fc-accent-8 إلى --fc-accent-60 | لون التمييز بمستويات شفافية مختلفة (8%، 10%، 15%، 20%، 30%، 40%، 60%). |
--fc-text-2 إلى --fc-text-85 | لون النص بمستويات شفافية مختلفة (2%، 4%، 5%، 6%، 8%، 10%، 12%، 15%، 20%، 40%، 55%، 75%، 80%، 85%). |
--fc-input-bg | خلفية الإدخال (لون النص بشفافية 5%). |
--fc-card-bg | خلفية البطاقة (لون النص بشفافية 4%). |
--fc-border | لون الحد (لون النص بشفافية 12%). |
--fc-muted | نص صامت/ثانوي (لون النص بشفافية 45%). |
--fc-primary | اللون الأساسي (اسم بديل للتمييز). |
--fc-btn-bg-hover | خلفية زر مُفتحة لحالات التمرير. |
خصائص الخطوط
يحمّل NueForm الخطوط من Google Fonts تلقائيًا. يمكن استخدام أي عائلة خطوط من Google Fonts.
| الخاصية | متغير CSS | الوصف | الافتراضي |
|---|---|---|---|
| خط السؤال | --fc-font-question | عائلة خط عناوين الأسئلة. | Inter |
| خط الإجابة | --fc-font-answer | عائلة خط نص إدخال المستجيب. | Inter |
| خط الزر | --fc-font-button | عائلة خط تسميات الأزرار. | Inter |
| خط الوصف | --fc-font-description | عائلة خط أوصاف الأسئلة/الأنشطة. | يرث خط السؤال |
| خط الخيار | --fc-font-option | عائلة خط تسميات خيارات الاختيار ومحتوى الأنشطة. | يرث خط الإجابة |
| خط المؤشر | --fc-font-indicator | عائلة خط نص مؤشرات الأنشطة. | يرث خط السؤال |
| حجم خط السؤال | --fc-font-size-question | حجم خط عناوين الأسئلة. يقبل أي قيمة حجم CSS (rem، px، إلخ.). | 1.875rem (30px) |
تُحمّل الخطوط من Google Fonts عند الطلب. ينشئ النظام تلقائيًا رابط استيراد CSS الصحيح لـ Google Fonts، طالبًا أوزان 300 إلى 700 لكل عائلة خطوط. الخط الافتراضي Inter محمّل مسبقًا ولا يتطلب طلب Google Fonts.
العلامة التجارية
الشعار
يمكنك إضافة شعار إلى نماذجك في موضعين:
الشعار العلوي:
| الإعداد | الوصف | الافتراضي |
|---|---|---|
| رابط الشعار العلوي | رابط صورة الشعار المعروضة أعلى النموذج. | بدون |
| حجم الشعار العلوي | حجم الشعار العلوي: small أو medium أو large. | medium |
| محاذاة الشعار العلوي | المحاذاة الأفقية: left أو center أو right. | center |
| CSS الشعار العلوي | CSS مخصص يُطبق على حاوية الشعار العلوي (.fc-top-logo). | بدون |
شعار العلامة التجارية:
| الإعداد | الوصف | الافتراضي |
|---|---|---|
| رابط شعار العلامة التجارية | رابط شعار العلامة التجارية، يُعرض عادة في منطقة التذييل أو العلامة المائية. | بدون |
نص التذييل
| الإعداد | الوصف | الافتراضي |
|---|---|---|
| نص تذييل العلامة التجارية | نص مخصص يُعرض في منطقة تذييل النموذج. | بدون |
CSS العلامة المائية
| الإعداد | الوصف | الافتراضي |
|---|---|---|
| CSS العلامة المائية | CSS مخصص يُطبق على عنصر العلامة المائية/الشعار السفلي الأيسر (.fc-watermark). | بدون |
إخفاء العلامة التجارية (Pro+)
| الإعداد | الوصف | الافتراضي |
|---|---|---|
| إخفاء العلامة التجارية | إزالة علامة NueForm التجارية من النموذج. يتطلب خطة Pro+. | معطل |
إخفاء علامة NueForm التجارية هو ميزة Pro+. على الخطط المجانية والأقل، تُعرض علامة NueForm المائية دائمًا.
إعدادات العلامة التجارية الافتراضية
تتيح لك إعدادات العلامة التجارية الافتراضية على مستوى الحساب تعيين قيم سمة افتراضية تنطبق على جميع النماذج الجديدة التي تنشئها. يمكن تجاوزها على مستوى النموذج.
الإعدادات الافتراضية المتاحة للعلامة التجارية:
- رابط الشعار
- نص التذييل
- لون السمة
- لون الخلفية
- لون النص
- لون نص الإجابة
- لون النص التوضيحي
- لون الزر
- لون نص الزر
- عائلة الخط (السؤال)
- عائلة الخط (الإجابة)
- عائلة الخط (الزر)
- حجم خط السؤال
- رابط الشعار العلوي وحجمه ومحاذاته و CSS
- CSS العلامة المائية
الانتقالات على مستوى الأسئلة
يمكن أن يكون لكل سؤال حركة انتقال خاصة به، أو يمكنك تطبيق نفس الانتقال على جميع الأسئلة. الانتقالات المتاحة:
| الانتقال | الوصف |
|---|---|
| انزلاق عمودي + تلاشي | تنزلق الأسئلة لأعلى/لأسفل مع تأثير تلاشي. هذا هو الافتراضي. |
| انزلاق أفقي | تنزلق الأسئلة يمينًا/يسارًا. |
| انزلاق قطري | تنزلق الأسئلة بشكل قطري. |
| ارتداد مرن | ترتد الأسئلة مع تجاوز مرن. |
| تكبير عبوري | تتكبر/تتصغر الأسئلة عبر نافذة العرض. |
| دوران للداخل | تدور الأسئلة قليلًا عند الدخول. |
يمكنك تعيين الانتقال لأسئلة فردية في محرر الأسئلة، أو استخدام خيار "تطبيق على جميع الأسئلة" لتعيين انتقال موحد.
CSS مخصص
للتحكم الكامل في مظهر نموذجك، يمكنك كتابة CSS مخصص. راجع دليل CSS المخصص للحصول على القائمة الكاملة للمحددات ومتغيرات CSS المتاحة.
التنسيق لكل سؤال
تدعم الأسئلة الفردية خيارات التنسيق التالية:
| الخاصية | الوصف |
|---|---|
| اسم الفئة المخصص | إضافة فئة CSS إلى حاوية السؤال. استخدم هذا مع CSS المخصص لتنسيق أسئلة معينة بشكل مختلف. |
| إخفاء رقم السؤال | إزالة بادئة رقم السؤال من هذا السؤال المحدد. |
| اسم فئة الوسائط المخصص | إضافة فئة CSS إلى عنصر الوسائط المرفق بهذا السؤال. |
السمة للخلفيات الفاتحة مقابل الداكنة
تستخدم سمة NueForm الافتراضية خلفية داكنة (#0a0a0a) مع نص فاتح (#e8e8e8). متغيرات CSS المشتقة (الحدود، المدخلات، البطاقات) كلها محسوبة نسبة إلى لون النص، لذا فإن التبديل إلى سمة فاتحة بسيط:
- عيّن لون الخلفية إلى لون فاتح (مثل
#ffffff). - عيّن لون النص إلى لون داكن (مثل
#1a1a1a). - ستتكيف المتغيرات المشتقة (
--fc-border،--fc-input-bg،--fc-card-bg،--fc-muted) تلقائيًا لأنها مبنية على تنويعات شفافية لون النص.
عند التبديل بين السمات الفاتحة والداكنة، تأكد أيضًا من ضبط لون النص التوضيحي و لون نص الإجابة و لون الزر للحفاظ على سهولة القراءة والتباين.