Eigenes CSS

Überblick

Eigenes CSS gibt dir die vollständige Kontrolle über das visuelle Erscheinungsbild deiner Formulare und Fuse-Aktivitäten. NueForm stellt einen umfassenden Satz an CSS-Klassenselektoren und CSS-Custom-Properties (Variablen) bereit, die du in deinen eigenen Styles ansprechen kannst.

Eigenes CSS hinzufügen

NueForm (Standardformulare)

1. Öffne dein Formular im Builder.
2. Navigiere im Einstellungspanel zum Tab Design.
3. Scrolle zum Abschnitt Eigenes CSS.
4. Gib deine CSS-Regeln ein.
5. Änderungen werden sofort in der Live-Vorschau angezeigt.

Fuse-Aktivitäten

1. Öffne deine Fuse-Aktivität im Builder.
2. Navigiere zum Tab Design.
3. Scrolle zum Abschnitt Eigenes CSS.
4. Der CSS-Editor zeigt Selektoren speziell für deinen gewählten Aktivitätstyp.

NueForm-CSS-Selektoren

Diese Selektoren stehen für Standardformulare zur Verfügung:

Layout und Container

Frageelemente

Interaktive Elemente

Branding

Beispiel

/* 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-Selektoren für Fuse-Aktivitäten

Fuse-Aktivitäten haben ihren eigenen Satz an CSS-Selektoren, organisiert in allgemeine, gemeinsame und aktivitätsspezifische Kategorien.

Allgemeine Selektoren

Diese gelten für jede Fuse-Aktivität:

Gemeinsame Aktivitäts-Selektoren

Diese Selektoren werden von mehreren Aktivitätstypen gemeinsam genutzt:

Aktivitätsspezifische Selektoren

Jeder Aktivitätstyp hat eigene Selektoren:

Klassische Umfrage

Mehrfachstimmen-Umfrage

Bild-Umfrage

Ranglisten-Umfrage

Ausscheidungs-Umfrage

Hot Takes

Would You Rather / This or That

Schieberegler-Skala

Wortwolke

Kollaborative Liste

Rangliste

Rate & Reveal

Pro & Contra

Top N

Vorhersagen

Caption This

Karten-Pins

Q&A-Board

Tier List

Bracket

CSS-Custom-Properties (Variablen)

Zusätzlich zu den Klassenselektoren kannst du in deinen Regeln CSS-Custom-Properties referenzieren. Diese werden vom Theme-System gesetzt und passen sich der Konfiguration jedes Formulars an.

CSS-Variablen im eigenen CSS verwenden

Du kannst diese Variablen in deinem eigenen CSS referenzieren, um Styles zu erstellen, die sich dem Theme des Formulars anpassen:

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

/* Fuse activity with theme-aware styling */
.fuse-option {
  border: 1px solid var(--fc-border);
  border-radius: 20px;
}

Eigene Klassen pro Frage

Zusätzlich zum eigenen CSS auf Formularebene kannst du einzelnen Fragen und ihren Medienelementen eigene CSS-Klassennamen zuweisen:

• Eigener Klassenname der Frage (customClassName): Wird auf den Fragecontainer angewendet.
• Eigener Klassenname des Mediums (media.customClassName): Wird auf das Medienelement angewendet.

So kannst du bestimmte Fragen in deinem CSS gezielt ansprechen:

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

Setze dann im Builder den eigenen Klassennamen der Frage auf hero-question.

Tipps und Best Practices

1. Nutze CSS-Variablen: Referenziere var(--fc-accent) und andere Theme-Variablen, statt Farben fest zu codieren. So passen sich deine eigenen Styles an, wenn sich das Theme ändert.
2. Teste in der Vorschau: Sieh dir dein Formular nach dem Hinzufügen von eigenem CSS immer in der Vorschau an, um zu prüfen, ob die Styles auf Desktop und Mobilgeräten korrekt aussehen.
3. Spezifität: Die eingebauten Styles von NueForm nutzen eine niedrige Spezifität. Dein eigenes CSS sollte sie in den meisten Fällen ohne !important überschreiben können.
4. Responsives Design: Nutze Media Queries in deinem eigenen CSS, wenn du auf Mobilgeräten andere Styles als auf dem Desktop brauchst.
5. Layout nicht zerstören: Sei vorsichtig mit Eigenschaften wie position, display und overflow, die das Layout des Formulars beschädigen können.

Beispiel: Komplettes eigenes 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);
}

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