Custom CSS

Overview

Custom CSS आपको अपने forms और Fuse activities की visual appearance पर पूर्ण नियंत्रण देता है। NueForm CSS class selectors और CSS custom properties (variables) का एक व्यापक set प्रदान करता है जिन्हें आप अपनी custom styles में target कर सकते हैं।

Custom CSS जोड़ना

NueForm (Standard Forms)

1. Builder में अपना form खोलें।
2. Settings panel में Design tab पर navigate करें।
3. Custom CSS section तक scroll करें।
4. अपने CSS rules दर्ज करें।
5. Changes तुरंत live preview में दिखाई देते हैं।

Fuse Activities

1. Builder में अपनी Fuse activity खोलें।
2. Design tab पर navigate करें।
3. Custom CSS section तक scroll करें।
4. CSS editor आपकी चुनी गई activity type के specific selectors दिखाता है।

NueForm CSS Selectors

ये selectors standard forms के लिए उपलब्ध हैं:

Layout और Container

Question Elements

Interactive Elements

Branding

उदाहरण

/* Buttons को पूरी तरह rounded बनाएं */
.fc-button {
  border-radius: 9999px;
}

/* Inputs में thicker bottom border जोड़ें */
.fc-input {
  border-bottom-width: 3px;
}

/* Choices पर hover slide effect जोड़ें */
.fc-choice:hover {
  transform: translateX(4px);
}

/* Selected choice को style करें */
.fc-choice.selected {
  border-color: var(--fc-accent);
  background-color: var(--fc-accent-10);
}

/* Progress bar height बढ़ाएं */
.fc-progress-bar {
  height: 6px;
}

Fuse Activity CSS Selectors

Fuse activities के अपने CSS selectors का set है, जो general, shared activity, और activity-specific categories में organize है।

General Selectors

ये हर Fuse activity पर लागू होते हैं:

Shared Activity Selectors

ये selectors एक से अधिक activity types में साझा हैं:

Activity-Specific Selectors

प्रत्येक activity type के unique selectors हैं:

Classic Poll

Multi-Vote Poll

Image Poll

Ranked Poll

Elimination Poll

Hot Takes

Would You Rather / This or That

Sliding Scale

Word Cloud

Collaborative List

Ranked List

Rate & Reveal

Pros & Cons

Top N

Predictions

Caption This

Map Pins

Q&A Board

Tier List

Bracket

CSS Custom Properties (Variables)

Class selectors के अलावा, आप अपने rules में CSS custom properties reference कर सकते हैं। ये theme system द्वारा सेट होते हैं और प्रत्येक form की configuration के अनुसार adapt करते हैं।

Custom CSS में CSS Variables का उपयोग

आप form की theme के अनुसार adapt करने वाली styles बनाने के लिए इन variables को अपने custom CSS में reference कर सकते हैं:

/* Theme के accent color का उपयोग करके custom border */
.fc-choice {
  border: 2px solid var(--fc-accent-30);
}

/* Theme colors का उपयोग करके custom input styling */
.fc-input {
  background-color: var(--fc-input-bg);
  border-color: var(--fc-border);
}

/* Theme-aware styling के साथ Fuse activity */
.fuse-option {
  border: 1px solid var(--fc-border);
  border-radius: 20px;
}

Per-Question Custom Classes

Form-level custom CSS के अलावा, आप individual questions और उनके media elements में custom CSS class names जोड़ सकते हैं:

• Question Custom Class Name (customClassName): Question container पर लागू।
• Media Custom Class Name (media.customClassName): Media element पर लागू।

यह आपको अपने CSS में specific questions को target करने देता है:

/* केवल "hero" question को अलग तरह से style करें */
.hero-question .fc-question-title {
  font-size: 3rem;
  text-align: center;
}

फिर builder में question का custom class name hero-question सेट करें।

Tips और सर्वोत्तम प्रथाएं

1. CSS variables का उपयोग करें: Colors hard-code करने के बजाय var(--fc-accent) और अन्य theme variables reference करें। यह सुनिश्चित करता है कि theme बदलने पर आपकी custom styles adapt करें।
2. Preview में test करें: Custom CSS जोड़ने के बाद हमेशा अपने form का preview करें और verify करें कि styles desktop और mobile दोनों पर सही दिखती हैं।
3. Specificity: NueForm की built-in styles low specificity का उपयोग करती हैं। अधिकांश मामलों में आपकी custom CSS को !important की आवश्यकता के बिना उन्हें override करना चाहिए।
4. Responsive design: यदि आपको mobile बनाम desktop पर अलग styles चाहिए तो अपने custom CSS में media queries का उपयोग करें।
5. Layout तोड़ने से बचें: position, display, और overflow जैसी properties से सावधान रहें जो form की layout तोड़ सकती हैं।

उदाहरण: पूर्ण Custom Theme

/* Rounded, card-style questions */
.fc-container {
  padding: 2rem;
}

/* 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);
}

/* Hover effect के साथ choice cards */
.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;
}