Breve Visão Geral

O Cascading Style Sheets (CSS) permite aplicar personalização avançada ao Classic ShoutOuts, incluindo elementos como fonte, fundo e borda.

CSS pode ser usado para personalizar o ShoutOut:

• Botões de ação e de fechar
• Cabeçalho de texto e faixa
• Texto
• Botão "X"

Para saber mais sobre como usar o novo Editor Visual para ShoutOuts sem a necessidade de CSS, leia o Guia de Introdução ShoutOuts.

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 CSS, você precisará consultar os diferentes componentes (tecnicamente conhecidos como elementos) do ShoutOut Clássico.

Ao digitar na janela CSS personalizada, o WalkMe exibe opções de preenchimento automático para seletores, propriedades e valores.

Configurando Componentes do Balão

Cada ShoutOut inclui vários componentes (elementos) que podem ser personalizados com CSS.

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

• .wm-title

Consulte a lista completa de classes.

CSS global vs. CSS local

CSS pode ser aplicado globalmente ou localmente. Usar o Console CSS local facilita a personalização de um ShoutOut individual.

Se você estiver personalizando um único ShoutOut no nível global, você deve inserir o ID do ShoutOut antes da classe que identifica a seção do balão.

Exemplo de CSS local:

• .wm-title

Exemplo de CSS global:

• #wm-shoutout-XXXXX .wm-title

Editar CSS local

1. Abra o menu Opções do ShoutOut
2. Vá para a guia Interação
3. Clique em Editar CSS
4. Insira o CSS personalizado no console CSS
5. Clique em Salvar

Editar CSS global

1. Clique em Editar CSS global no menu de configurações do WalkMe Editor
2. Insira o CSS personalizado no editor de CSS
3. Clique em Salvar
4. Clique em Publicar configurações

Encontrar ID do WalkMe

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

Usando !important

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.

Por exemplo:

#wm-shoutout-XXXXX .wm-title {

color: #000 !important;

}

Componentes Configuráveis

Personalizações CSS Comuns

Alterar a largura de um balão ShoutOut

.wm-shoutout-XXXX.wm-outer-div {
largura: XXXpx !important;
}

Fita Center ShoutOut

#wm-shoutout-XXXXX .wm-main-ribbon.wm-template-main-bg,
.wm-ribbon-edge.left.wm-template-main-bg, .wm-ribbon-edge.right.wm-template-main-bg { )

background-color: #XXXXXX !important;

}

Extremidade esquerda do ShoutOut Ribbon

#wm-shoutout-XXXXX .wm-ribbon-triangle.left.top.wm-main-border-right-color, .wm-ribbon-ripple.left.wm-main-border-right-color {
border-color: transparent #XXXXXX transparente transparente !important;
}

#wm-shoutout-XXXXX .wm-main-border-bottom-color {
border-color: transparent transparent #XXXXXX !important;
}

Extremidade direita do ShoutOut Ribbon

#wm-shoutout-XXXXX .wm-ribbon-triangle.right.top.wm-main-border-top-color, .wm-ribbon-ripple.right.wm-main-border-top-color.wm-main-border-left-color {

border-color: #XXXXXX transparente transparente !important;
}

#wm-shoutout-XXXXX .wm-ribbon-triangle.right.bottom.wm-main-border-left-color {

border-color: transparente transparente transparente #XXXXXX !important;

}

Modelo Trapezoide

#wm-shoutout-XXXXX .wm-trapezoid {
border-top: 40px solid #XXXXXX !important;
}

#wm-shoutout-XXXXX .wm-main-border-bottom-color {
border-color: transparent transparent #XXXXXX !important;
}

Modelo Quadrado

#wm-shoutout-XXXXX .wm-icon-square {
border-color: #XXXXXX !important;
}