Crie um tema do portal

  • Versão de lançamento: Yokohama
  • Atualizado 30 de jan. de 2025
  • 4 min. de leitura

    • Se você precisar de mais personalização do que o Editor de identidade visual pode fornecer, você pode criar seu próprio tema personalizado.

    Somente usuários com conhecimento de CSS devem criar temas personalizados.

    1. Navegar até Portal de serviços > Temas, em seguida, selecione Novo .
    2. Preencha os campos do formulário e, no menu de contexto do formulário, selecione Salvar .
      Tabela 1. Campos de formulário de tema
      Campo Descrição
      Nome Nome do seu tema. Use este nome para associar o tema ao seu portal. Este nome não está visível para os usuários, você deve conhecê-lo para aplicar o tema correto a um portal.
      Desativar a compilação SCSS Desativa a compilação do SCSS e envia o arquivo CSS simples diretamente para o cliente.
      Aplicação

      O escopo do registro. O registro do menu do cabeçalho e a tabela de origem devem ter o mesmo escopo da aplicação.
      Cabeçalho Lista de cabeçalhos e rodapés da tabela sp_header_footer que você pode associar a um tema do portal. Cabeçalhos e rodapés são widgets e podem ser configurados da mesma maneira.
      Rodapé Lista de cabeçalhos e rodapés da tabela sp_header_footer que você pode associar a um tema do portal.
      Cabeçalho fixo Bloqueia o cabeçalho na parte superior da página para que, quando um usuário rolar, o cabeçalho permaneça na tela.
      Rodapé fixo Bloqueia o rodapé na parte inferior da página para que, quando um usuário rolar, o rodapé permaneça na tela.
      Variáveis CSS Propriedades personalizadas do CSS que você pode usar para mudar a cor e os estilos em um portal. Por exemplo, o tema de ações usa algumas das seguintes variáveis:
      $sp-logo-margin-x: 		15px !default;
$sp-tagline-color:		$text-color !default;
$navbar-inverse-bg: 	#3a3f51 !default;
      Nota:
      Use o campo Variáveis de CSS para definir somente variáveis de CSS. Use Inclusões de CSS para definir regras de CSS. A partir da versão Madrid, o Sass e o LESS podem ser usados em Inclusões de CSS.
    3. Para adicionar uma folha de estilos ao tema, no Inclusão de CSS lista relacionada, selecione Novo .
    4. Preencha os campos do formulário da folha de estilos e selecione Enviar .
      Tabela 2. Campos de formulário da folha de estilos
      Campo Descrição
      Nome Nome da inclusão de CSS. Lembre-se deste nome para associar a inclusão de CSS ao tema.
      Aplicação O escopo do registro. O registro do menu do cabeçalho e a tabela de origem devem ter o mesmo escopo da aplicação.
      Origem Selecione uma das seguintes opções.
      • Folha de estilos : Adicione uma folha de estilo interna que foi carregada na tabela CSS [sp_css]. Por exemplo, ng-sortable.min.css. As folhas de estilo internas usam CSS padrão no campo CSS.
      • URL : Link para uma folha de estilos externa. Use folhas de estilo externas para usar o mesmo CSS de um site corporativo ou outro recurso on-line.
      Folha de estilos Uma folha de estilos interna para associar ao tema.
      URL do arquivo CSS Um URL para uma folha de estilos externa para associar ao tema.
      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.
      URL do arquivo CSS do RTL

      Um URL para uma folha de estilos externa para espelhar a direção de um portal quando o idioma da sessão é um idioma da direita para a esquerda, como hebraico.

      Para obter informações sobre suporte para idiomas da direita para a esquerda, consulte Estilo para idiomas da direita para a esquerda em portais.
    5. Para adicionar uma inclusão de JavaScript ao tema, no JS incluído lista relacionada, selecione Novo .
    6. Preencha os campos de formulário de inclusão de JS e selecione Enviar .
      Tabela 3. JS inclui campos de formulário
      Campo Descrição
      Nome de exibição Nome da inclusão de JS. Lembre-se deste nome para associar a inclusão JS ao tema.
      Aplicação O escopo do registro. O registro do menu do cabeçalho e a tabela de origem devem ter o mesmo escopo da aplicação.
      Origem Selecione uma das seguintes opções.
      • Script de IU : Adicione um script de IU interno que foi carregado na tabela de script de IU [sys_ui_script]. Os scripts de IU permitem criar JavaScript no lado do cliente e reutilizá-lo em vários locais. Para obter mais informações sobre scripts de IU, consulte Scripts de IU .
      • URL : Link para um arquivo JavaScript externo. Use URLs externas para usar o mesmo JavaScript que um site corporativo ou outro recurso on-line.
      URL do arquivo JS ou script de IU Associe um script de IU interno ou URL de arquivo JavaScript, dependendo da opção selecionada no campo Origem.
      Atualização em Data e hora em que a inclusão JS foi atualizada pela última vez
      Pacote O pacote do portal de serviços ao qual o JS incluído está associado. Por exemplo, Páginas de configuração do portal de serviços. Este campo é preenchido por padrão.