Criar uma inclusão de CSS para substituir o tema para Pesquisa com IA em Portal de serviços

  • Versão de lançamento: Washingtondc
  • Atualizado 1 de fev. de 2024
  • 3 min. de leitura

    • Substitua o tema de Pesquisa com IA em Portal de serviços para 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 um exemplo de recursos de estilização de Pesquisa com IA em Portal de serviços, este procedimento remove as bordas ao redor do contêiner de resultados da 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 IA em Portal de serviços.

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

    Contêiner de resultados de pesquisa.

    Filtros de pesquisa: remova a borda da linha em torno dos filtros de pesquisa.

    Filtros de pesquisa.

    Cor de destaqueda ocorrência : altere a cor de exibição da ocorrência de pesquisa no texto pesquisado.

    Destaques de ocorrências.

    Procedimento

    1. Crie um registro de folha de estilos.
      1. Insira sp_css.do no navegador de filtro.
      2. No formulário, preencha os campos.
        Tabela 1. Formulário Folha de estilos
        Campo Descrição
        Nome Nome exclusivo para sua folha de estilos. Por exemplo, sp_ais.css.
        CSS Campo de script para seu script CSS. Insira este script e personalize as variáveis.

        • Para remover a borda do contêiner de resultados da 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 para personalizar conforme desejado.

          sn-search-facets {
  --now-color--divider-tertiary: 0px !important;
}

        • Para mudar as cores de destaque atingidas, insira no script a cor RGB desejada.

          sn-search-results-container, sn-search-combobox {
  --now-color_alert--warning-1: rgb(40,103,178) !important;
}
        O script deve ficar assim com suas personalizações incluídas quando 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.
      3. Selecione Enviar.
    2. Crie um registro de inclusão de CSS.
      1. Insira sp_css_include.do no navegador de filtros.
      2. No formulário, preencha os campos.
        Tabela 2. Formulário de inclusão de CSS
        Campo Descrição
        Nome Nome exclusivo para o registro de inclusão de CSS.
        Origem Origem da inclusão de CSS. Selecione Folha de estilos.
        Folha de estilos A folha de estilos 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 de CSS de um tema. Não é recomendável habilitar o carregamento assíncrono somente para alguns CSS Includes associados a um tema.

        Nota:
        Habilitar o carregamento lento não é recomendado para portais com flash de conteúdo sem estilo.

        As Inclusões de CSS com carregamento lento habilitado são listadas na lista relacionada de Inclusões de CSS de carregamento lento no registro do tema.
    3. Insira sua substituição de CSS no formulário de folhas de estilos e substitua o tema aplicado à sua IU.
      1. Insira m2m_sp_theme_css_include no navegador de filtros.
      2. No formulário, preencha os campos.
        Tabela 3. Formulário Folhas de estilos
        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, maior será a lista. A prática típica é tornar 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 criadas 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.
      3. Selecione Enviar.

    Resultado

    As bordas ao redor do contêiner de resultados da pesquisa e dos filtros de pesquisa serão removidas, e a cor de destaque exibida exibirá sua cor personalizada.
    O tema da Pesquisa com IA no SP substitui os resultados.