Alterar a aparência padrão dos componentes
Defina os estilos dos componentes e wrappers para mudar a aparência padrão.
Este vídeo mostra como executar o procedimento a seguir.
Antes de Iniciar
Função necessária: ui_builder_admin
Por Que e Quando Desempenhar Esta Tarefa
Esta tarefa descreve como adicionar estilos a componentes e wrappers (como Corpo, layouts de coluna ou uma coluna) que contêm componentes. Personalize o estilo do componente selecionando o componente na árvore de conteúdo ou aplique estilos a vários componentes colocando-os dentro de um wrapper.
Para obter informações sobre como adicionar estilo a toda a sua experiência, consulte Gerenciar o estilo visual das experiências do Construtor de IU.
Esta tarefa se aplica ao novo sistema de layout introduzido em Yokohama. Se sua página estiver usando o sistema de layout antigo, consulte Adicionar estilo a um componente usando o sistema de layout antigo para obter mais informações.
Procedimento
-
Para Corpo ou um componente, selecione a guia Estilos no painel de configuração.
-
Use as representações visuais na guia Estilos para decidir o que é melhor para a aparência da sua página.
- Acessibilidade (layout de coluna e coluna)
- Especifica configurações de acessibilidade, como Nome da região ARIA, Nível de título da região ARIA, Função ARIA e inclusão de título ARIA. Para obter informações detalhadas, consulte a documentação do ARIA em Developer.ServiceNow.com.
- Alinhamento (coluna e componente)
- Para uma coluna, define como os componentes se alinham dentro da coluna como um grupo. Para um componente, define como o componente se alinha no elemento de layout primário, como uma coluna ou um layout de coluna.
- Plano de fundo (corpo, layout de coluna, coluna e componente)
- Define a cor de fundo por trás do elemento de layout. Selecione uma cor na guia Minhas Cores do seletor de cores, onde você pode exibir as cores disponíveis em uma grade ou lista. Como alternativa, use a guia Personalizado para especificar qualquer cor em HEX, RGB ou HSL.
- Borda (layout de coluna, coluna e componente)
- Adiciona uma borda ao redor do conteúdo. A borda é colocada na parte interna imediata da margem e na parte externa imediata do preenchimento. Especifique a espessura da borda, o tipo, a cor e o formato do canto. Para componentes, você tem a opção de usar CSS personalizado para a borda.
- Layout (corpo, layout de coluna, coluna e componente)
- Para o corpo e a coluna, especifica a direção, o alinhamento e a justificativa do conteúdo. Para layout de coluna, especifica o número de colunas e a lacuna entre colunas (espaço entre colunas). Para alguns componentes, como Contêiner de base do cartão, selecione Editar CSS para aplicar estilos CSS específicos à camada do contêiner e à camada interna que controla os componentes dentro do contêiner.
- Sombra (layout de coluna, coluna e componente)
- Adiciona efeitos de sombra em torno do conteúdo. Você tem a opção de usar CSS personalizado.
- Dimensionamento (componente)
- Para componentes aplicáveis, define a altura e a largura padrão, mínima e máxima do componente (em px, %, em, rem ou um valor personalizado). Este valor é relevante quando a janela do navegador é redimensionada.
- Espaçamento (corpo, layout de coluna e componente)
- A margem define o tamanho do espaço na parte interna imediata do corpo, layout de coluna ou componente. O preenchimento define o tamanho do espaço na parte externa imediata do corpo, layout de coluna ou componente. Selecione Margem ou Preenchimento para definir o mesmo tamanho para todos os quatro lados.
- Você pode definir o tamanho de cada margem ou lado de preenchimento selecionando a configuração atual e, em seguida, selecionando uma opção.
- Opcional: Para o corpo e os componentes, você pode editar o código CSS selecionando o link Exibir e editar CSS na parte inferior da guia Estilos.
A guia Estilos exibe um editor de código de estilos CSS. As seguintes propriedades de CSS são as mais usadas:
cor de fundoimagem de fundoestilo de bordalargura da bordacor da bordaraio da bordasombra da caixaalturaaltura mínimaaltura máximamargemestouropreenchimentolarguralargura mínimalargura máximaíndice-z
Importante:Alguns componentes contêm configurações de estilo internas que você não pode substituir por CSS em Construtor de IU. Para obter informações sobre como substituir essas configurações de estilo, consulte Gerenciar o estilo visual das experiências do Construtor de IU.
Adicionar estilo a um componente usando o sistema de layout antigo
Defina estilos CSS para um componente para mudar sua aparência padrão.
Antes de Iniciar
Função necessária: ui_builder_admin
Por Que e Quando Desempenhar Esta Tarefa
Esta tarefa descreve como adicionar estilos ao wrapper que contém seu componente, o que geralmente é recomendado em vez de aplicar estilos diretamente ao componente. Certifique-se de que o componente cujos estilos você deseja definir esteja colocado em um componente de contêiner para colocar o componente em um wrapper. O wrapper do seu componente está um nível acima do componente na hierarquia de conteúdo e é rotulado por padrão como Main.
Para adicionar estilo a uma página inteira, você pode usar CSS baseado em padrões no wrapper da página. Para obter informações sobre como adicionar estilo a toda a sua experiência, consulte Gerenciar o estilo visual das experiências do Construtor de IU.
Procedimento
-
No cabeçalho principal, selecione Salvar para salvar suas mudanças.
Figura 1. Adicionar estilo a um componente no painel Configuração de estilos