CSS para Pesquisas

Last Updated dezembro 9, 2025

Breve Visão Geral

As Folhas de Estilo em Cascata (CSS) permitem aplicar personalização avançada às pesquisas, incluindo elementos como fonte, fundo e borda.

CSS pode ser usado para personalizar as pesquisas WalkMe e NPS:

  • Botões de ação e fechamento
  • Texto para o título
  • Texto
  • Botão "X"

Surveys

Como Funciona

Cascading Style Sheets (CSS) é uma linguagem de folhas de estilo usada para descrever a formatação de um documento escrito em uma linguagem de marcação. Ao escrever o CSS, você precisará consultar os diferentes componentes (tecnicamente conhecidos como elementos) da pesquisa. Ao digitar na janela CSS personalizada, o WalkMe exibe opções de preenchimento automático para seletores, propriedades e valores.

CSS

Configurando componentes do balão

Cada pesquisa inclui vários componentes, ou elementos, que podem ser personalizados com CSS.

Por exemplo, você pode segmentar a seção de título de uma pesquisa usando esta classe:

  • .wm--survey-title

Veja a lista completa das classes.

Regras globais

CSS Global pode ser acessado pelo editor.

  1. Abra o menu Configurações no editor
  2. Clique em Editar CSS global

ID da pesquisa

  1. Passe o mouse sobre a pesquisa no editor
  2. Clique no menu Opções
  3. Clique em Copiar ID

Dica

Substitua o XXXXX no CSS desta página pelo ID da pesquisa ou pela alteração desejada (cor, fonte, etc.)

Usando !important

Por padrão, o design do tema WalkMe substitui todas as outras alterações de design em um balão ou aplicativo.

Para que CSS seja aplicado, a regra CSS deve conter "!important" para garantir que ela substitua o estilo padrão.

Por exemplo:

#walkme-survey-balloon-37897 .walkme-survey-title {

color: #000 !important;

}

Componentes de pesquisa configuráveis

DIV Recursos editáveis
#walkme-survey-balloon-XXXXX Os principais componentes da pesquisa, incluindo:
  • Exibir
  • Antecedentes
  • Posicionamento na tela
  • Z-index
  • Largura
  • Altura
.walkme-survey-title Título da pesquisa, incluindo o seguinte:
  • Alinhamento de texto
  • Cor da fonte
  • Tamanho da fonte
  • Família de fontes​
  • Preenchimento​
  • Margem
.walkme-survey-question-title Pergunta(s) da pesquisa, incluindo:
  • Alinhamento de texto
  • Cor da fonte
  • Tamanho da fonte
  • Família de fontes​
  • Preenchimento​
  • Margem
#walkme-survey-answer-text-XXXXXX Respostas da pesquisa, incluindo:
  • Alinhamento de texto
  • Cor da fonte
  • Tamanho da fonte
  • Família de fontes
  • Acheamento
  • Margem
#walkme-survey-answer-radiobutton-XXXXX Botões de resposta à pesquisa, incluindo:
  • Posicionamento
  • Largura
  • Altura
  • Antecedentes​
  • Raio da fronteira
  • Parte inferior da fronteira
  • Cor
.walkme-click-and-hover.walkme-custom-balloon-close-button.walkme-action-close.walkme-inspect-ignore Botão "Fechar" da pesquisa, incluindo:
  • Cor da fonte
  • Tamanho da fonte
  • Família F
  • Largura
  • Altura
  • Antecedentes
  • Raio da fronteira
.walkme-custom-balloon-content-wrapper Conteúdo geral da pesquisa e texto, incluindo:
  • Cor da fonte
  • Tamanho da fonte
  • Família de fontes
  • Cor de fundo

Componentes configuráveis da pesquisa NPS

DIV Recursos editáveis
.walkme-survey-question-nps-answers Todas as respostas da pesquisa NPS (normalmente de 0 a 10), incluindo:
  • Exibir
  • Antecedentes
  • Posicionamento
.walkme-survey-nps-answer selected .walkme-survey-answer-label-nps-radiobutton A resposta NPS selecionada, incluindo:
  • Cor de fundo
  • Cor da borda
  • .walkme-survey-low-score-div span
  • walkme-survey-high-score-div span
Rótulos de pontuação alta e baixa, incluindo:
  • Alinhamento de texto
  • Cor da fonte
  • Tamanho da fonte
  • Família de fontes​
  • Preenchimento​
  • Margem
.walkme-custom-side-border Borda lateral da pesquisa, incluindo:
  • Cor de fundo
  • Exibir

Personalizações comuns do CSS da pesquisa

Alterar o tamanho da fonte do título da pesquisa

#walkme-survey-id-XXXXXX .walkme-survey-title {

font-size: XXpx !important;

}

Alterar a cor da barra lateral da pesquisa e do botão de envio

#walkme-survey-balloon-XXXXX .walkme-custom-side-border{

background-color: #XXXXXX !important;

}

#walkme-survey-balloon-XXXXX .walkme-custom-balloon-submit-button{

background-color: #XXXXXX !important;

}

Alterar ou corrigir a margem das opções do NPS (1-10)

#walkme-survey-question-nps-answers-XXXX .walkme-survey-nps-answer {

margin: XXpx !important;

}

Alterar o estilo de fonte das perguntas da pesquisa

#walkme-survey-balloon-XXXXX .walkme-custom-balloon-content {

font-family: (fonte aqui) !important;

}

Alterar a cor das respostas da pesquisa NPS

.walkme-survey-question-nps-answers.selected .walkme-survey-nps-answer.selected label {

background: XXX !important;

border-color: XXX !important;

}

Alterar a cor das respostas da pesquisa NPS ao passar o mouse

.walkme-survey-answer-label-nps-radiobutton.walkme-survey-answer-label-nps-radiobutton-unchecked:hover {

background: XXX !important;

border-color: XXX !important;

}

Alterar a largura da pergunta da pesquisa

#walkme-survey-balloon-XXXXXX {

largura: 650px !important;

height: auto !important;

}

Alterar a largura da pergunta da pesquisa NPS

#walkme-survey-balloon-XXXXXX .walkme-custom-balloon-mid-div {

largura: 650px !important;

position: corrigido!important;

top: 50% !important;

left: 50% !important;

transform: translate(-50%,-50%) !important;

}

Alterar a cor do asterisco ao lado das perguntas obrigatórias

.walkme-survey-balloon .walkme-survey-question-mandatory {

color: #ff0000 !important;

}

Alterando o texto do botão da pesquisa

Você pode alterar o texto dos botões da pesquisa na página Multilíngue no Console.

  • Vá para ConsoleVários idiomasTraduçõesGeral do WalkMeTexto Geral do WalkMeEnviar Texto do Botão

Was this article helpful?

Thanks for your feedback!

Faça parte de algo maior.

Interaja com colegas, tire dúvidas e compartilhe ideias.

Explore nossa comunidade
×