Editar componentes

Ao criar ou gerenciar seu tema, você pode editar componentes individuais para melhor adequá-los à sua marca e aos padrões de conformidade de acessibilidade. Os ganchos de tema que você pode editar são específicos para cada tipo de componente.

Antes de Iniciar

Função necessária: administrador

Por Que e Quando Desempenhar Esta Tarefa

Os componentes que você pode editar em Construtor de temas foram criados no Now Sistema de design. Para obter mais informações, consulte Componentes do Next Experience no ServiceNow Portal do desenvolvedor.

O número total de violações de acessibilidade por componente é indicado na página do painel de edição.

Procedimento

1. Navegar até Todos > Estrutura do Now Experience > Temas > Construtor de temas.
   A página inicial do Theme Builder é exibida na exibição da página inicial.
2. No botão Página inicial, selecione a exibição da página do Editor.

   Figura 1. Exibição da página do editor

   

3. Selecione o tema para o qual você deseja editar os componentes.
4. Na exibição da página do Editor, selecione a guia Estilos de componente.
   Os estilos de componente são listados graficamente.

   

5. Selecione Edição.
   Nota:

   Os componentes que podem ser editados são exibidos. Para obter informações sobre como filtrar a lista de componentes para localizar o componente que você deseja editar, consulte Visualizar componentes.
6. Selecione o componente que você deseja editar.
   Se você vir um aviso na guia de edição, deverá resolver todos os avisos dentro do painel de interação do componente para remover o sinal de aviso do componente.
7. No painel de estilo configurável à direita, edite os ganchos de tema disponíveis para o componente selecionado conforme necessário.

   Os ganchos de tema editáveis disponíveis dependem do tipo de componente selecionado. Por exemplo, se você selecionar um componente do Selo, poderá editar as cores e os ganchos de acessibilidade do selo. Se você selecionar um componente de link de texto, poderá editar a cor base e os ganchos de acessibilidade.

   Depois de atualizar os ganchos específicos do componente, as mudanças feitas no estilo global não atualizarão os estilos do componente. Isso ocorre porque os estilos específicos do componente têm precedência sobre os estilos definidos globalmente.

8. Se você selecionar uma cor a ser editada, o seletor de cores será aberto.

   Figura 2. Seletor de cores

   

   Nota:

   Por padrão, o seletor de cores mostra todas as cores disponíveis para o componente. Você pode selecionar o controle deslizante Ocultar opções inacessíveis para limitar as opções de cores às identificadas como acessíveis, com base nas diretrizes atuais do WCAG.
9. Ao concluir as mudanças, selecione Salvar mudanças.
10. Ao observar os componentes listados na página Edição, observe que alguns componentes podem exibir o símbolo a seguir.

    

    Nota:

    O símbolo de aviso de acessibilidade indica que o contraste de cores do componente selecionado não está em conformidade com os padrões de acessibilidade WCAG 2.1 para contraste de cores. Para obter mais informações, consulte Ajustar componentes para atender aos padrões de acessibilidade.