CSS Personalizado

Visão Geral

O CSS personalizado dá a você controle completo sobre a aparência visual dos seus formulários e atividades Fuse. O NueForm fornece um conjunto abrangente de seletores de classe CSS e propriedades personalizadas CSS (variáveis) que você pode usar como alvo nos seus estilos personalizados.

Adicionando CSS Personalizado

NueForm (Formulários Padrão)

1. Abra seu formulário no construtor.
2. Navegue até a aba Design no painel de configurações.
3. Role até a seção CSS Personalizado.
4. Insira suas regras CSS.
5. As alterações são refletidas imediatamente na pré-visualização ao vivo.

Atividades Fuse

1. Abra sua atividade Fuse no construtor.
2. Navegue até a aba Design.
3. Role até a seção CSS Personalizado.
4. O editor de CSS mostra os seletores específicos do tipo de atividade escolhido.

Seletores CSS do NueForm

Estes seletores estão disponíveis para formulários padrão:

Layout e Contêiner

Elementos de Pergunta

Elementos Interativos

Identidade Visual

Exemplo

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

Seletores CSS de Atividades Fuse

As atividades Fuse têm seu próprio conjunto de seletores CSS, organizados nas categorias geral, compartilhada entre atividades e específica por atividade.

Seletores Gerais

Estes se aplicam a todas as atividades Fuse:

Seletores Compartilhados entre Atividades

Estes seletores são compartilhados entre vários tipos de atividade:

Seletores Específicos por Atividade

Cada tipo de atividade tem seletores exclusivos:

Enquete Clássica

Enquete de Votos Múltiplos

Enquete de Imagens

Enquete Ranqueada

Enquete de Eliminação

Hot Takes

O Que Você Prefere / Isto ou Aquilo

Escala Deslizante

Nuvem de Palavras

Lista Colaborativa

Lista Ranqueada

Avalie e Revele

Prós e Contras

Top N

Previsões

Legende Isto

Pins no Mapa

Mural de Perguntas e Respostas

Tier List

Chaveamento

Propriedades Personalizadas CSS (Variáveis)

Além dos seletores de classe, você pode referenciar propriedades personalizadas CSS nas suas regras. Elas são definidas pelo sistema de temas e se adaptam à configuração de cada formulário.

Usando Variáveis CSS no CSS Personalizado

Você pode referenciar essas variáveis no seu CSS personalizado para criar estilos que se adaptam ao tema do formulário:

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

Classes Personalizadas por Pergunta

Além do CSS personalizado no nível do formulário, você pode adicionar nomes de classe CSS personalizados a perguntas individuais e a seus elementos de mídia:

• Nome de Classe Personalizado da Pergunta (customClassName): Aplicado ao contêiner da pergunta.
• Nome de Classe Personalizado da Mídia (media.customClassName): Aplicado ao elemento de mídia.

Isso permite direcionar perguntas específicas no seu CSS:

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

Depois, defina o nome de classe personalizado da pergunta como hero-question no construtor.

Dicas e Boas Práticas

1. Use variáveis CSS: Referencie var(--fc-accent) e outras variáveis de tema em vez de fixar cores no código. Isso garante que seus estilos personalizados se adaptem quando o tema mudar.
2. Teste na pré-visualização: Sempre visualize seu formulário depois de adicionar CSS personalizado para verificar se os estilos estão corretos tanto no desktop quanto no mobile.
3. Especificidade: Os estilos nativos do NueForm usam baixa especificidade. Seu CSS personalizado deve sobrescrevê-los sem precisar de !important na maioria dos casos.
4. Design responsivo: Use media queries no seu CSS personalizado se precisar de estilos diferentes no mobile e no desktop.
5. Evite quebrar o layout: Tenha cuidado com propriedades como position, display e overflow, que podem quebrar o layout do formulário.

Exemplo: Tema Personalizado Completo

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