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

  • Versão de lançamento: Yokohama
  • Atualizado 30 de jan. de 2025
  • 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.

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

    Contêiner de resultados da pesquisa.

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

    Filtros de pesquisa.

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

    Destaques de hit.

    Procedimento

    1. Crie um registro de folha de estilos.
      1. Insira sp_css.do No navegador Filtro.
      2. No formulário, preencha os campos.
        Tabela 1. Formulário Folha de estilos
        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;
}
        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.
      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. CSS incluir formulário
        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.

        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.
    3. Insira sua substituição de CSS no formulário de folhas de estilo e substitua o tema aplicado à 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 estilo
        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.
      3. Selecione Enviar.

    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.
    Os temas da Pesquisa com IA nos resultados de substituição do SP.