---
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


---

# Crie uma inclusão de CSS para substituir temas Pesquisa com IAem Portal de serviços

# Crie uma inclusão de CSS para substituir temas Pesquisa com IAem Portal de serviços {#ariaid-title1}

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

Substituir tema para Pesquisa com IAem Portal de serviçospara estar em conformidade com a identidade visual da sua empresa.

## Antes de Iniciar

Função necessária: sp_admin ou administrador

## Por Que e Quando Desempenhar Esta Tarefa

Como exemplo de recursos de estilo de Pesquisa com IAem Portal de serviços, este procedimento remove as bordas ao redor do contêiner de resultados de pesquisa e dos filtros de pesquisa e muda a cor de destaque da ocorrência. Você pode estilizar vários outros recursos usando variáveis CSS adicionais. Para obter mais informações sobre essas variáveis, consulte [Tema para Pesquisa com IAem Portal de serviços](https://servicenow-prod.fluidtopics.net/DMmTqntxAmCVX3dtdCBJSw "Você pode personalizar a aparência do Pesquisa com IAexperiência em Portal de serviçosAtualizando as variáveis CSS relevantes.").

Contêiner de resultados da pesquisa : Remova a borda da linha ao redor de cada item recuperado na pesquisa.

Filtros de pesquisa : Remova a borda da linha ao redor dos filtros de pesquisa.

Cor de destaque : Mude a cor que exibe a ocorrência de pesquisa no texto pesquisado.

## Procedimento

1. Crie um registro de folha de estilos.
   1. Insira <kbd class="ph userinput">sp_css.do </kbd>No navegador Filtro.
   2. No formulário, preencha os campos.  
      {#css-override-ais-theming-sp__table_qxq_4mh_wqb__entry__2}

      | Campo | Descrição |
      |-|-|
      | Nome | Nome exclusivo da sua folha de estilos. Por exemplo, sp_ais.css. |
      | CSS | Campo de script para o script CSS. Insira este script e personalize as variáveis. * Para remover a borda do contêiner de resultados de pesquisa, cole este script e personalize conforme desejado. sn-search-results-container  { --now-container--border-width: 0px !important; --mv9-JvmzrAmtZ--kvZptZ-9Apz8: 0px !important; --mv9-jvmzramtz--kvzptz-9apz8: 0px !important; } * Para remover a borda dos filtros de pesquisa, cole este script como personalizado conforme desejado. sn-search-facets { --now-color--divider-tertiary: 0px !important; } * Para mudar as cores de destaque da ocorrência, insira no script a cor rgb desejada. sn-search-results-container, sn-search-combobox { --now-color_alert--warning-1: rgb(40,103,178) !important; } {#css-override-ais-theming-sp__ul_bsb_rpp_wqb} O script deve ter esta aparência com suas personalizações incluídas quando você terminar. sn-search-results-container  { --now-container--border-width: 0px !important; --mv9-JvmzrAmtZ--kvZptZ-9Apz8: 0px !important; --mv9-jvmzramtz--kvzptz-9apz8: 0px !important; } sn-search-facets { --now-color--divider-tertiary: 0px !important; } sn-search-results-container, sn-search-combobox { --now-color_alert--warning-1: rgb(40,103,178) !important; } |
      | Aplicação | Aplicação à qual esta folha de estilos se aplica. Global significa que a folha de estilos se aplica a todas as aplicações. |
      [Tabela 1. Formulário Folha de estilos]

      {#css-override-ais-theming-sp__table_qxq_4mh_wqb}
   3. Selecione Enviar.
2. Crie um registro de inclusão de CSS.
   1. Insira <kbd class="ph userinput">sp_css_include.do </kbd>no navegador de filtros.
   2. No formulário, preencha os campos.  
      {#css-override-ais-theming-sp__table_f1c_zmh_wqb__entry__2}{#css-override-ais-theming-sp__p_nmg_nfg_h1c}

      | Campo | Descrição |
      |-|-|
      | Nome | Nome exclusivo do registro de inclusão de CSS. |
      | Origem | Origem da inclusão de CSS. Selecione Folha de estilos . |
      | Folha de estilos | A folha de estilo que você deseja incorporar com este formulário de inclusão de CSS. Selecione a folha de estilos que você criou na etapa 1. |
      | Aplicação | Aplicação à qual este registro de inclusão de CSS se aplica. Global significa que a inclusão de CSS se aplica a todas as aplicações. |
      | Carregamento lento | Opção para carregar a inclusão de CSS de forma assíncrona para melhorar o tempo de carregamento da página. Esta opção deve ser definida com o mesmo valor para todas as inclusões CSS de um tema. Não é recomendável habilitar o carregamento assíncrono somente para algumas inclusões de CSS associadas a um tema.{#css-override-ais-theming-sp__p_lmg_nfg_h1c} Nota: Habilitando Carregamento lento não é recomendado para portais com flash de conteúdo sem estilo. O CSS inclui com Carregamento lento as habilitadas estão listadas em Inclusões de CSS de carregamento lento lista relacionada no registro do tema. |
      [Tabela 2. CSS incluir formulário]

      {#css-override-ais-theming-sp__table_f1c_zmh_wqb}
   {#css-override-ais-theming-sp__substeps_tx2_rmh_wqb}
3. Insira sua substituição de CSS no formulário de folhas de estilo e substitua o tema aplicado à IU.
   1. Insira <kbd class="ph userinput">m2m_sp_theme_css_include </kbd>no navegador de filtros.
   2. No formulário, preencha os campos.  
      {#css-override-ais-theming-sp__table_jgc_4nh_wqb__entry__2}

      | Campo | Descrição |
      |-|-|
      | Ordem | Um número inteiro que prioriza a incorporação desta folha de estilos em relação a outras folhas de estilos. Quanto menor o número, mais alto na lista. A prática típica é fazer esses números centenas, por exemplo, 100, 200, 300, e 400, para que você possa colocar novos ícones entre os existentes no futuro. |
      | Inclusão de CSS | Inclusão de CSS que inclui as substituições que você criou nas etapas anteriores. |
      | Aplicação | Aplicação à qual esta folha de estilos se aplica. Global significa que a folha de estilos se aplica a todas as aplicações. |
      | Tema | Tema aplicado à IU que você deseja substituir. |
      [Tabela 3. Formulário Folhas de estilo]

      {#css-override-ais-theming-sp__table_jgc_4nh_wqb}
   3. Selecione Enviar.
   {#css-override-ais-theming-sp__substeps_olg_jnh_wqb}
{#css-override-ais-theming-sp__steps_mwq_mwb_wqb}

## Resultado

As bordas ao redor do contêiner de resultados de pesquisa e dos filtros de pesquisa são removidas e a cor de destaque da ocorrência exibe sua cor personalizada.  

* **[Tema para Pesquisa com IAem Portal de serviços](https://servicenow-prod.fluidtopics.net/DMmTqntxAmCVX3dtdCBJSw)**   
  Você pode personalizar a aparência do Pesquisa com IAexperiência em Portal de serviçosAtualizando as variáveis CSS relevantes.