Please log in to continue
WalkMe stores your data in the region chosen during account setup.
We have data centers in the US and EU that follow local privacy and compliance laws. If you're not sure which region to select, check with your admin.
O uso de Folhas de Estilo em Cascata (CSS) permite personalizar elementos do Smart Walk-Thru, incluindo o layout, cores e fontes.
Ao escrever CSS, as referências a vários componentes ou elementos do Smart Walk-Thru são essenciais. Este artigo fornece uma visão geral das opções CSS disponíveis para personalizar esses elementos avançados.
Para personalizar o Smart Walk-Thrus usando as opções padrão, consulte o Guia de Introdução Smart Walk-Thru.
Cada Smart Walk-Thru inclui vários componentes (elementos) que podem ser personalizados com CSS. Os Smart Walk-Thrus podem ser personalizados local e globalmente.
Se você estiver personalizando um único Smart Walk-Thru em nível global, você deve inserir o ID do Smart Walk-Thru antes da classe que identifica o balão.
Exemplo em nível local:
Exemplo em nível global:
O ID do Smart Walk-Thru pode ser encontrado no Editor WalkMe:
Veja abaixo uma lista completa de classes.
Por padrão, o design do tema WalkMe substitui todas as outras alterações de design.
Para que CSS seja aplicado, a regra CSS deve conter "!important" para garantir que ela substitua o estilo padrão.
Exemplo:
#walkme-balloon-1760356 .walkme-custom-balloon-title {
color: #000 !important;
}
| DIV | Recursos editáveis | |
|---|---|---|
| 1 | .walkme-custom-side-border | Borda do balão do lado esquerdo:
|
| 2 | .walkme-custom-balloon-separator | Separador de balões (terço inferior):
|
| 3 | .walkme-custom-balloon-title | Cabeçalho do balão:
|
| 4 | .walkme-custom-balloon-content | Texto do balão:
|
| 5 | .walkme-custom-balloon-subtext | Número da etapa:
|
| 6 | .walkme-custom-balloon-back-button | Botão Voltar:
|
| 7 | .walkme-custom-balloon-next-button | Próximo botão:
|
.walkme-custom-balloon-close-button {
display:none !important;
}
.walkme-custom-side-border {
display: none !important;
}
.walkme-custom-side-border {
background-color: red !important;
}
#walkme-balloon-XXXXXXX .walkme-custom-balloon-content-wrapper {
background-color: green !important;
}
#walkme-balloon-xxxxxxx {
width: 300px !important;
min-width: 0 !important;
padding: 10px !important;
}
.walkme-custom-balloon-arrow.walkme-custom-flow-balloon-xxxxxxx{
display: none !important;
}
.walkme-custom-balloon-subtext {
display: none !important;
}
.div.walkme-custom-walkthru-xxxxx.walkme-custom-simple-step {
z-index:0 !important;
}
.div.walkme-custom-walkthru-xxxxx.walkme-custom-balloon-arrow {
z-index:0 !important;
}
.walkme-custom-balloon-title, .walkme-custom-balloon-content {
font-size: 12px !important;
}
.walkme-custom-balloon-bottom-div:has(.walkme-custom-balloon-no-buttons-div) {
display: none !important;
}
.walkme-custom-balloon-inner-div:has(.walkme-custom-balloon-no-buttons-div) {
padding-bottom: 20px !important;
}