Alterar a aparência padrão dos componentes
Defina os estilos dos componentes e dos 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 Washington DC. 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 desenvolvedor.servicenow.com.
- Alinhamento (coluna e componente)
- Para uma coluna, define como os componentes se alinham na 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 atrás do elemento de layout. Selecione uma cor na guia Minhas cores do seletor de cores ou na guia Personalizado, onde você pode 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 imediatamente dentro da margem e imediatamente fora 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 e coluna)
- Para o corpo e a coluna, especifica a direção, o alinhamento e a justificativa do conteúdo. Para o layout de coluna, especifica o número de colunas e a lacuna da coluna (espaço entre colunas).
- 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 para 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, do layout da coluna ou do componente. O preenchimento define o tamanho do espaço na parte externa imediata do corpo, do layout de coluna ou do componente. Selecione Margem ou Preenchimento para definir o mesmo tamanho para os quatro lados.
- Você pode definir o tamanho de cada margem ou lado de preenchimento selecionando a configuração atual e selecionando uma opção.
- Opcional: Para corpo e 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 não podem ser substituídas 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 ao componente diretamente. Certifique-se de que o componente cujos estilos você deseja definir seja 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 Principal.
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