CSS مخصص

نظرة عامة

يمنحك CSS المخصص تحكمًا كاملاً في المظهر المرئي لنماذجك وأنشطة Fuse. يوفر NueForm مجموعة شاملة من محددات فئات CSS وخصائص CSS المخصصة (المتغيرات) التي يمكنك استهدافها في أنماطك المخصصة.

إضافة CSS مخصص

NueForm (النماذج القياسية)

1. افتح نموذجك في المنشئ.
2. انتقل إلى علامة تبويب التصميم في لوحة الإعدادات.
3. مرر إلى قسم CSS مخصص.
4. أدخل قواعد CSS الخاصة بك.
5. تنعكس التغييرات في المعاينة المباشرة فورًا.

أنشطة Fuse

1. افتح نشاط Fuse في المنشئ.
2. انتقل إلى علامة تبويب التصميم.
3. مرر إلى قسم CSS مخصص.
4. يعرض محرر CSS المحددات الخاصة بنوع النشاط المختار.

محددات CSS لـ NueForm

هذه المحددات متاحة للنماذج القياسية:

التخطيط والحاوية

عناصر السؤال

العناصر التفاعلية

العلامة التجارية

مثال

/* Make buttons fully rounded */
.fc-button {
  border-radius: 9999px;
}

/* Add a thicker bottom border to inputs */
.fc-input {
  border-bottom-width: 3px;
}

/* Add a hover slide effect to choices */
.fc-choice:hover {
  transform: translateX(4px);
}

/* Style the selected choice */
.fc-choice.selected {
  border-color: var(--fc-accent);
  background-color: var(--fc-accent-10);
}

/* Increase progress bar height */
.fc-progress-bar {
  height: 6px;
}

محددات CSS لأنشطة Fuse

لأنشطة Fuse مجموعة محددات CSS خاصة بها، منظمة في فئات عامة ومشتركة وخاصة بالنشاط.

المحددات العامة

تنطبق على كل نشاط Fuse:

المحددات المشتركة للأنشطة

هذه المحددات مشتركة عبر أنواع أنشطة متعددة:

خصائص CSS المخصصة (المتغيرات)

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

استخدام متغيرات CSS في CSS المخصص

يمكنك الإشارة إلى هذه المتغيرات في CSS المخصص لإنشاء أنماط تتكيف مع سمة النموذج:

/* Custom border using the theme's accent color */
.fc-choice {
  border: 2px solid var(--fc-accent-30);
}

/* Custom input styling using theme colors */
.fc-input {
  background-color: var(--fc-input-bg);
  border-color: var(--fc-border);
}

فئات مخصصة لكل سؤال

بالإضافة إلى CSS المخصص على مستوى النموذج، يمكنك إضافة أسماء فئات CSS مخصصة لأسئلة فردية وعناصر الوسائط الخاصة بها:

• اسم فئة السؤال المخصص (customClassName): يُطبق على حاوية السؤال.
• اسم فئة الوسائط المخصص (media.customClassName): يُطبق على عنصر الوسائط.

هذا يتيح لك استهداف أسئلة محددة في CSS:

/* Only style the "hero" question differently */
.hero-question .fc-question-title {
  font-size: 3rem;
  text-align: center;
}

ثم اضبط اسم الفئة المخصص للسؤال على hero-question في المنشئ.

نصائح وأفضل الممارسات

1. استخدم متغيرات CSS: أشر إلى var(--fc-accent) ومتغيرات السمة الأخرى بدلاً من تضمين الألوان مباشرة. هذا يضمن تكيف أنماطك المخصصة عند تغيير السمة.
2. اختبر في المعاينة: عاين نموذجك دائمًا بعد إضافة CSS مخصص للتحقق من أن الأنماط تبدو صحيحة على سطح المكتب والهاتف المحمول.
3. الخصوصية: تستخدم أنماط NueForm المدمجة خصوصية منخفضة. يجب أن تتجاوزها CSS المخصصة بدون الحاجة إلى !important في معظم الحالات.
4. التصميم المتجاوب: استخدم استعلامات الوسائط في CSS المخصص إذا كنت بحاجة إلى أنماط مختلفة على الهاتف مقابل سطح المكتب.
5. تجنب كسر التخطيط: كن حذرًا مع خصائص مثل position وdisplay وoverflow التي يمكن أن تكسر تخطيط النموذج.

مثال: سمة مخصصة كاملة

/* Pill-shaped buttons */
.fc-button {
  border-radius: 9999px;
  padding: 12px 32px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Underline-style inputs */
.fc-input {
  border: none;
  border-bottom: 2px solid var(--fc-border);
  border-radius: 0;
  background: transparent;
  padding-left: 0;
}

.fc-input:focus {
  border-bottom-color: var(--fc-accent);
}

/* Choice cards with hover effect */
.fc-choice {
  border-radius: 12px;
  transition: all 0.2s ease;
}

.fc-choice:hover {
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Larger rating icons */
.fc-rating-icon {
  font-size: 2rem;
}

/* Subtle progress bar */
.fc-progress-bar {
  height: 3px;
  opacity: 0.5;
}