Estilos personalizados para OmniScripts

Adicione estilo personalizado aos OmniScripts usando recursos estáticos, substituindo folhas de estilo globais ou usando tokens de design SLDS. Visualize o comportamento de cada opção de personalização na tabela dessa página e escolha a solução que atende aos seus requisitos.

• Aplicar estilo personalizado a OmniScripts com recursos estáticos
  Para aplicar alterações de CSS a um OmniScript usando o estilo SLDS, consulte um recurso estático de arquivo CSS na seção Opções de estilo do designer OmniScript. Por exemplo, uma folha CSS pode alterar a cor do texto para cada elemento Número em um OmniScript sem usar um componente da Web Lightning personalizado para substituir o elemento Número.
• Personalizar tokens de design SLDS no OmniScript
  Modifique a aparência de um OmniScript substituindo os tokens de design SLDS do Salesforce. Elementos do OmniScript usam tokens de design SLDS para estilização. Substitua tokens que têm acesso global para modificar a aparência do OmniScript.

Aplicar estilo personalizado a OmniScripts com recursos estáticos

Para aplicar alterações de CSS a um OmniScript usando o estilo SLDS, consulte um recurso estático de arquivo CSS na seção Opções de estilo do designer OmniScript. Por exemplo, uma folha CSS pode alterar a cor do texto para cada elemento Número em um OmniScript sem usar um componente da Web Lightning personalizado para substituir o elemento Número.

Aviso

Use CSS personalizado com cuidado e evite focar elementos de DOM em componentes que você não possui. Alterações na estrutura interna de um componente podem interromper seu CSS. O Salesforce pode atualizar as implementações de componente a qualquer momento, e o Suporte do Salesforce não pode ajudar com problemas de CSS personalizados.

1. Depois de criar uma folha de estilo personalizada, adicione o arquivo CSS como um recurso estático.
   Consulte Usar recursos estáticos.

   Para obter informações sobre sistemas de estilo, consulte Light DOM, CSS e Hacos de estilo.

   Por exemplo, customstyle.css é carregado como um recurso estático chamado customstyle.
2. No designer OmniScript, em Configuração, clique em Opções de estilo.
3. No campo Nome do arquivo personalizado do Lightning Stylesheet ou Nome do arquivo personalizado do Newport Stylesheet, insira o nome do recurso estático que armazena o estilo personalizado.
   Por exemplo, a fonte estática customstyle se refere ao arquivo customstyle.css carregado.
4. Se necessário, exiba o estilo personalizado para idiomas com leitura da direita para a esquerda.
   1. Em Configuração, clique em Editar como JSON.
   2. Para exibir o estilo de idiomas com leitura da direita para a esquerda, adicione o nome do recurso estático como um valor ao lightningRtl.
      Se você estiver atualizando um OmniScript existente, adicione lightningRtl manualmente.

      "stylesheet": {
        "lightning": "",
        "lightningRtl": "myRtlLightningStyles"
      }

5. Para visualizar seu estilo personalizado, ative e visualize o OmniScript.

   Quando você visualiza um OmniScript com um OmniScript filho com um CSS personalizado, o conteúdo do OmniScript filho não mostra o estilo personalizado.

Personalizar tokens de design SLDS no OmniScript

Modifique a aparência de um OmniScript substituindo os tokens de design SLDS do Salesforce. Elementos do OmniScript usam tokens de design SLDS para estilização. Substitua tokens que têm acesso global para modificar a aparência do OmniScript.

Nota

Não há suporte para tokens de design em navegadores do Safari.

Antes de começar

• Visualize os tokens de design que têm acesso global. Consulte Tokens de design.
• Visualize e inspecione um OmniScript em um Developer Console para visualizar os tokens atuais presentes no OmniScript.
• Agora você pode adicionar um OmniScript em um site do Experience Cloud Lightning Web Runtime (LWR). No entanto, leia as considerações sobre o uso de OmniScripts com sites do Lightning Web Runtime antes de fazer isso.

1. No painel Configuração do OmniScript, clique na seção Opções de estilo.
2. No campo Tokens de design do Lightning Design System, insira tokens aplicando estas alterações:
   1. Remova os traços e aplique letras maiúsculas ao token. Por exemplo, o token $spacing-xx-small deve ser $spacingXxSmall.
   2. Substitua o símbolo $ do token por --lwc-.

      --lwc-spacingXxSmall

   3. Defina o valor do token e encerre a linha para cada token usando um ;.

      --lwc-spacingXxSmall: 10rem; 
                      --lwc-spacingSmall: 5rem;
                      --lwc-spacingMedium: 2rem;
                    

   4. Se você precisar usar o OmniScript em páginas do Experience Cloud, deverá adicionar tokens de design específicos a essas páginas. Observe que os tokens de design para sites do Experience Cloud diferem dependendo de você estar usando um site baseado em Aura ou um site do LWR. No entanto, você pode adicionar todos os tokens juntos. A página que faz referência ao OmniScript seleciona os tokens necessários para estilizar o OmniScript.

      // Note: Style for Aura-based Experience Cloud site
      --lwc-spacingXxSmall: 10rem; 
      --lwc-spacingSmall: 5rem;
      --lwc-spacingMedium: 2rem;
      // Note: Style for a Lightning Web Runtime (LWR) site
      --dxp-g-spacing-xxsmall: 10rem;
      --dxp-g-spacing-small: 5rem;
      --dxp-g-spacing-medium: 2rem;
      // Note: Style for a Lightning page
      --slds-g-spacing-1: 10rem;
      --slds-g-spacing-2: 5rem;
      --slds-g-spacing-3: 2rem;