CSS personalizado

Descripción general

El CSS personalizado te da control completo sobre la apariencia visual de tus formularios y actividades Fuse. NueForm proporciona un conjunto completo de selectores de clases CSS y propiedades personalizadas CSS (variables) que puedes utilizar en tus estilos personalizados.

Agregar CSS personalizado

NueForm (Formularios estándar)

1. Abre tu formulario en el constructor.
2. Navega a la pestaña Diseño en el panel de configuración.
3. Desplázate hasta la sección CSS personalizado.
4. Ingresa tus reglas CSS.
5. Los cambios se reflejan en la vista previa en vivo inmediatamente.

Actividades Fuse

1. Abre tu actividad Fuse en el constructor.
2. Navega a la pestaña Diseño.
3. Desplázate hasta la sección CSS personalizado.
4. El editor CSS muestra selectores específicos para tu tipo de actividad elegido.

Selectores CSS de NueForm

Estos selectores están disponibles para formularios estándar:

Diseño y contenedor

Elementos de pregunta

Elementos interactivos

Marca

Ejemplo

/* Hacer botones completamente redondeados */
.fc-button {
  border-radius: 9999px;
}

/* Agregar un borde inferior más grueso a los inputs */
.fc-input {
  border-bottom-width: 3px;
}

/* Agregar efecto hover de deslizamiento a las opciones */
.fc-choice:hover {
  transform: translateX(4px);
}

/* Estilizar la opción seleccionada */
.fc-choice.selected {
  border-color: var(--fc-accent);
  background-color: var(--fc-accent-10);
}

/* Aumentar la altura de la barra de progreso */
.fc-progress-bar {
  height: 6px;
}

Selectores CSS de actividades Fuse

Las actividades Fuse tienen su propio conjunto de selectores CSS, organizados en categorías generales, compartidas por actividad y específicas de actividad.

Selectores generales

Estos se aplican a cada actividad Fuse:

Selectores compartidos de actividad

Estos selectores son compartidos entre múltiples tipos de actividad:

Selectores específicos de actividad

Cada tipo de actividad tiene selectores únicos:

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

Propiedades personalizadas CSS (Variables)

Además de los selectores de clase, puedes referenciar propiedades personalizadas CSS en tus reglas. Estas son establecidas por el sistema de temas y se adaptan a la configuración de cada formulario.

Uso de variables CSS en CSS personalizado

Puedes referenciar estas variables en tu CSS personalizado para crear estilos que se adapten al tema del formulario:

/* Borde personalizado usando el color de acento del tema */
.fc-choice {
  border: 2px solid var(--fc-accent-30);
}

/* Estilo de input personalizado usando colores del tema */
.fc-input {
  background-color: var(--fc-input-bg);
  border-color: var(--fc-border);
}

/* Actividad Fuse con estilo adaptado al tema */
.fuse-option {
  border: 1px solid var(--fc-border);
  border-radius: 20px;
}

Clases personalizadas por pregunta

Además del CSS personalizado a nivel de formulario, puedes agregar nombres de clases CSS personalizados a preguntas individuales y sus elementos multimedia:

• Custom Class Name de pregunta (customClassName): Se aplica al contenedor de la pregunta.
• Custom Class Name de multimedia (media.customClassName): Se aplica al elemento multimedia.

Esto te permite apuntar a preguntas específicas en tu CSS:

/* Solo estilizar la pregunta "hero" de manera diferente */
.hero-question .fc-question-title {
  font-size: 3rem;
  text-align: center;
}

Luego establece el nombre de clase personalizado de la pregunta a hero-question en el constructor.

Consejos y mejores prácticas

1. Usa variables CSS: Referencia var(--fc-accent) y otras variables de tema en lugar de codificar colores directamente. Esto asegura que tus estilos personalizados se adapten cuando el tema cambie.
2. Prueba en vista previa: Siempre previsualiza tu formulario después de agregar CSS personalizado para verificar que los estilos se vean correctos tanto en escritorio como en móvil.
3. Especificidad: Los estilos integrados de NueForm usan baja especificidad. Tu CSS personalizado debería sobrescribirlos sin necesitar !important en la mayoría de los casos.
4. Diseño responsivo: Usa media queries en tu CSS personalizado si necesitas estilos diferentes en móvil vs. escritorio.
5. Evita romper el diseño: Ten cuidado con propiedades como position, display y overflow que pueden romper el diseño del formulario.

Ejemplo: Tema personalizado completo

/* Preguntas con estilo de tarjeta redondeada */
.fc-container {
  padding: 2rem;
}

/* Botones en forma de pastilla */
.fc-button {
  border-radius: 9999px;
  padding: 12px 32px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Inputs estilo subrayado */
.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);
}

/* Tarjetas de opciones con efecto hover */
.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);
}

/* Iconos de valoración más grandes */
.fc-rating-icon {
  font-size: 2rem;
}

/* Barra de progreso sutil */
.fc-progress-bar {
  height: 3px;
  opacity: 0.5;
}