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

  • Versão de lançamento: Xanadu
  • Atualizado 1 de ago. 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 estilo 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 realce atingida. Você pode estilizar vários outros recursos usando variáveis CSS adicionais. Para obter mais informações sobre essas variáveis, consulte Temas 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 ao redor dos filtros de pesquisa.

    Filtros de pesquisa.

    Cor de destaquedo resultado : altere a cor que exibe o resultado da pesquisa no texto pesquisado.

    Destaques de sucesso.

    Procedimento

    1. Crie um registro de folha de estilos.
      1. Insira sp_css.do no Navegador de filtros.
      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 o 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 realce 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 ter esta aparência 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 a 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 é recomendado habilitar o carregamento assíncrono somente para algumas Inclusões de CSS associadas a um tema.

        Nota:
        Habilitar 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 que é 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, mais alto na lista. A prática típica é transformar esses números em 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.
      3. Selecione Enviar.

    Resultado

    As bordas ao redor do contêiner de resultados da pesquisa e os filtros de pesquisa são removidos e a cor de destaque atingida exibe sua cor personalizada.
    Temas para resultados de substituição da Pesquisa com IA em SP.