Mude a aparência padrão dos componentes
Defina os estilos para componentes e encapsuladores 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 aos encapsuladores (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 componentes 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 Zurich. Se sua página estiver usando o sistema de layout antigo, consulte Adicione estilo a um componente usando o sistema de layout antigopara obter mais informações.
Procedimento
-
Para Corpo ou um componente, selecione Estilos no painel de configuração.
-
Use as representações visuais no 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 do ARIA, Nível de cabeçalho da região do ARIA, função do ARIA e inclusão de cabeçalho do 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 na coluna como um grupo. Para um componente, define como o componente se alinha no elemento de layout primário, como um layout de coluna ou 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 no seletor de cores Minhas cores guia onde você pode exibir as cores disponíveis em uma grade ou lista. Como alternativa, use 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 no interior imediato da margem e no exterior imediato do preenchimento. Especifique a espessura, o tipo, a cor e a forma do canto da borda. Para componentes, você tem a opção de usar CSS personalizado para a borda.
- Layout (corpo, layout de coluna, coluna e componente)
- Para corpo e 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 o espaço da coluna (espaço entre colunas). Para alguns componentes, como Contêiner-base de cartão, selecione Edite CSS Para aplicar estilos CSS específicos à camada do contêiner e aos componentes de controle da camada interna no 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.
- Tamanho (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 no interior imediato 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 lado de margem ou preenchimento selecionando a configuração atual e, em seguida, selecionando uma opção.
- Opcional: Para Corpo e componentes, você pode editar o código CSS selecionando Exibir e editar CSS link na parte inferior do Estilos .
. Guia Estilos exibe um Estilos CSS editor de código. As seguintes propriedades CSS são as mais usadas:
cor do plano de fundoimagem de fundoborder-styleborder-widthcor da bordaraio da bordasombra da caixaalturaaltura mínimaaltura máximamargemestouropreenchimentolarguralargura mínimalargura máximaz-índice
Importante:Alguns componentes contêm configurações de estilo integradas que você não pode substituir com 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.
Adicione 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 o 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 componente é um nível mais alto do que o 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. Adicione estilo a um componente na configuração Estilos painel