Configurar identidade visual do portal

  • Versão de lançamento: Washingtondc
  • Atualizado 1 de fev. de 2024
  • 2 min. de leitura
  • Use Editor da Identidade Visual para dar uma aparência própria ao seu portal.

    Para acessar o Editor de identidade visual, navegue até Portal de serviços > Configuração do Portal de serviçose clique em Editorde identidade visual .

    Selecione o portal para o qual você deseja personalizar o tema na lista do portal. Em seguida, use as opções nas guias Configuração rápida e Cores do tema para personalizar seu portal.

    Figura 1. Editor da Identidade Visual
    Editor da Identidade Visual
    Tabela 1. Opções da guia Configuração rápida
    Campo Descrição
    Título do portal

    O nome do seu portal. Alterar o nome do portal no Editor da Identidade Visual também muda o título no campo de formulário do portal na IU da plataforma.

    Logotipo O logotipo que aparece no cabeçalho do seu portal. Esta imagem é dimensionada para uma altura máxima de 46 px e uma largura máxima de 200 px.
    Preenchimento do logotipo Onde você deseja que o logotipo fique no local até a borda do cabeçalho. Essas informações são armazenadas na seção de variáveis CSS no formulário do portal.
    Slogan e plano de fundo

    Campos definidos pelo esquema JSON no campo Configuração de início rápido no registro do portal na IU da plataforma. A amostra Portal de serviços adiciona Slogan e Plano de fundo a Editor da Identidade Visual usando o seguinte esquema:

    [{
    	"tagline": {
    		"table" : "sp_instance",
    		"sys_id" : "34fe3d96cb20020000f8d856634c9cf4",
    		"field" : "title"
    	},
    	"hero_background": {
    		"table" : "sp_container",
    		"sys_id" : "be98a8d2cb20020000f8d856634c9c63",
    		"field" : "background_image"
    	}
    }]
    Slogan Apresente seus usuários a uma página do portal com um slogan. Este texto é armazenado em uma instância do widget de pesquisa da página inicial.
    Cor do slogan Selecione uma cor para o slogan.
    Cor de plano de fundo da página inicial Adicione uma cor ao plano de fundo. Você pode digitar um nome de cor, cor hexadecimal, decimal (RGB) ou selecionar uma paleta de cores.
    Imagem em segundo plano Carregue uma imagem a ser exibida no plano de fundo da sua página inicial. Esta imagem é armazenada no contêiner do widget na sua página inicial.
    Para qualquer cor na guia de tema, você pode usar o nome da cor padrão, código hexadecimal, código decimal (RGB) ou selecionar a cor na paleta de cores. Todas as definições de cor são armazenadas no campo de variáveis CSS do formulário do portal. A visualização do tema é atualizada em tempo real conforme você faz mudanças.
    Tabela 2. Guia Cores do tema
    Campo Descrição
    Barra de navegação Use os campos nesta seção para personalizar as cores do menu de cabeçalho.
    Marca Use os campos nesta seção para personalizar as cores da página. Por exemplo, o plano de fundo da página ou o plano de fundo do widget.
    Texto Use os campos nesta seção para personalizar a cor do texto em uma página.

    As mudanças feitas nas cores do tema no Editor da Identidade Visual aparecem no campo Variáveis de CSS do formulário do portal na IU da plataforma.