---
sourceDocument: Interface do usuário da Now Platform Yokohama
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/pt-BR/yokohama/platform-user-interface

 Release :

    - yokohama

ft:locale :

    - pt-BR

ft:publication_title :

    - Interface do usuário da Now Platform Yokohama

ft:clusterId :

    - platux

bundleId :

    - platux

workflow :

    - Platform


---

# Personalize imagens de estado vazio com tema para o seu tema

# Personalize imagens de estado vazio com tema para o seu tema {#ariaid-title1}

* Versão de lançamento: Yokohama
* 
* Atualizado 30 de jan. de 2025
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 2 min. de leitura

Personalize imagens de estado vazio com tema padrão para seu Next Experiencee. Construtor de temasTemas usando o registro de Imagens do tema.

## Antes de Iniciar

Função necessária: administrador

## Procedimento

1. Navegar até TudoEstrutura do Now ExperienceTemasTemas do UX.
2. Selecione seu tema na tabela Temas de UX.  
   O registro de tema de UX para o tema escolhido é exibido.
3. Em Tema do app de composição , selecione Imagens registro.
4. No registro de estilo Imagens, insira os seguintes ganchos de tema de imagem de estado vazio no Estilo campo.  

       {
           "properties": {
               "--now-illustration--add-attachment-sm--url": "",
               "--now-illustration--add-attachment-md--url": "",
               "--now-illustration--add-attachment-lg--url": "",
               "--now-illustration--add-data-sm--url": "",
               "--now-illustration--add-data-md--url": "",
               "--now-illustration--add-data-lg--url": "",
               "--now-illustration--completed-tasks-sm--url": "",
               "--now-illustration--completed-tasks-md--url": "",
               "--now-illustration--completed-tasks-lg--url": "",
               "--now-illustration--error-sm--url": "",
               "--now-illustration--error-md--url": "",
               "--now-illustration--error-lg--url": "",
               "--now-illustration--first-time-user-sm--url": "",
               "--now-illustration--first-time-user-md--url": ""
               "--now-illustration--first-time-user-lg--url": "",
               "--now-illustration--interrupted-sm--url": "",
               "--now-illustration--interrupted-md--url": "",
               "--now-illustration--interrupted-lg--url": "",
               "--now-illustration--no-data-sm--url": "",
               "--now-illustration--no-data-md--url": "",
               "--now-illustration--no-data-lg--url": "",
               "--now-illustration--no-search-results-sm--url": "",
               "--now-illustration--no-search-results-md--url": "",
               "--now-illustration--no-search-results-lg--url": "",
               "--now-illustration--offline-sm--url": "",
               "--now-illustration--offline-md--url": "",
               "--now-illustration--offline-lg--url": "",
               "--now-illustration--permissions-sm--url": "",
               "--now-illustration--permissions-md--url": "",
               "--now-illustration--permissions-lg--url": "",
               "--now-illustration--unconfigured-sm--url": "",
               "--now-illustration--unconfigured-md--url": "",
               "--now-illustration--unconfigured-lg--url": "",
               "--now-illustration--no-activities-sm--url": "",
               "--now-illustration--no-activities-md--url": "",
               "--now-illustration--no-activities-lg--url": "",
           }
       }

5. Adicione sua imagem personalizada de uma das seguintes maneiras.
   * Adicione imagem à lista de ativos de estilo de UX.
     1. Em Ativos de estilo de UX , selecione Novo .
     2. Selecione o ícone Pesquisa ( ![Ícone de pesquisa.]()) ao lado de Ativo item.
     3. Na lista Ativos de tema de UX, selecione Novo .
     4. Selecione o ícone Gerenciar anexos ( ![Ícone Gerenciar anexos]()) para adicionar uma imagem.
     5. Quando o ativo de imagem for carregado, feche a janela Anexos.  
        Nota:  
        Verifique se a imagem está no formato SVG.
     6. Insira o nome do arquivo do ativo no Nome e selecione Enviar . O ativo é adicionado à lista Ativos de estilo de UX.
     7. Selecione e segure (ou clique com o botão direito do mouse) no ativo na lista Ativos de estilo UX e selecione Copie sys_id .
     8. Insira o sys_id no campo Estilo usando o seguinte formato: <kbd class="ph userinput">"/uxta/enteryoursysid.assetx" </kbd>
     {#customize-themeable-empty-state-images__ol_dkg_qn3_qcc}
   * Adicione sua imagem personalizada à tabela de imagens \[db_images_list.do\].  
     Nota:  
     Verifique se a imagem está no formato SVG.
     1. Para obter instruções detalhadas, consulte [Carregue uma ou mais imagens](https://servicenow-prod.fluidtopics.net/xgVmoYGl_eXH9FAvCDPiOQ "Você pode carregar uma imagem ou várias imagens de uma só vez.").
     2. No registro de estilo de imagem, insira o nome do arquivo de imagem no Estilo campo usando o seguinte formato: <kbd class="ph userinput">"/FILENAME.svg" </kbd>.
     {#customize-themeable-empty-state-images__ol_s42_dpl_rcc}
   {#customize-themeable-empty-state-images__choices_awg_2n3_qcc}
6. Selecione Atualizar.  
   As imagens personalizadas aparecem no seu tema.
7. **Opcional:** Personalize as cores das suas imagens de estado vazio usando o registro de cores Estilo UX associado ao seu tema para substituir os ganchos de tema padrão.  
   Para obter um tutorial passo a passo sobre como editar seu registro de cores de estilo de UX, consulte o Exercício 3, Atividade 2 e 3 do [Next Experience Workshop](https://servicenownextexperience.github.io/labs/CCL1319-K24-Theming-Lab/ex3/activity-2)Na Comunidade ServiceNow.  
   Nota:  
   Usar os ganchos de tema padrão é recomendado.