--- sourceDocument: Criar ou modificar aplicações do Xanadu sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/pt-BR/xanadu/application-development Release : - xanadu ft:locale : - pt-BR ft:publication_title : - Criar ou modificar aplicações do Xanadu ft:clusterId : - cadev bundleId : - cadev workflow : - Creator --- # Alterar a aparência padrão dos componentes # Alterar a aparência padrão dos componentes {#ariaid-title1} * Versão de lançamento: Xanadu * * Atualizado 1 de ago. de 2024 * * ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 6 min. de leitura 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](https://servicenow-prod.fluidtopics.net/5RwY2KWxG_TE~iBs0te6fQ "Os temas permitem que você mude o estilo visual de suas experiências Construtor de IU para que elas expressem a aparência da sua marca"). Esta tarefa se aplica ao novo sistema de layout introduzido em Xanadu. Se sua página estiver usando o sistema de layout antigo, consulte [Adicionar estilo a um componente usando o sistema de layout antigo](https://servicenow-prod.fluidtopics.net/QWNyu_ceLHhT70tNgR5rPw#add-styling-to-component-old-layout "Defina estilos CSS para um componente para mudar sua aparência padrão.") para obter mais informações. Nota: Conforme você adiciona e configura componentes na página, a fase mostra seu trabalho. Se você fizer mudanças e as atualizações não forem carregadas na fase, selecione o ícone de menu Abrir e selecione Desenvolvedor \> Recarregar fase. Recarregar a fase mostra suas mudanças, mas não as salva. Para salvar seu trabalho, selecione Salvar no canto superior direito. ## Procedimento 1. Navegar até TodosEstrutura do Now ExperienceConstrutor de IU. 2. Abra uma experiência para trabalhar ou crie uma experiência selecionando CriarExperiência. Consulte [Configure como os usuários interagem com suas aplicações no Construtor de IU](https://servicenow-prod.fluidtopics.net/lLqYhwc21ggWGJvxakpXWA "Saiba o que é uma experiência em Construtor de IU. Entenda o que uma experiência contém.") para obter mais informações sobre como criar experiências. 3. Crie ou abra uma página ou variante de página. Para obter mais informações sobre como criar uma página no Construtor de IU, consulte [Criação de uma página no Construtor de IU](https://servicenow-prod.fluidtopics.net/oXLwDAYTDqDRVYtO2ECqbg "Crie uma página em Construtor de IU para um portal, espaço ou aplicação personalizada para que você possa criar uma experiência na Web para seus usuários."). 4. No painel Conteúdo, selecione um componente ou wrapper (por exemplo, Corpo, um layout de coluna ou uma coluna) ao qual você deseja adicionar estilo. 5. Para Corpo ou um componente, selecione a guia Estilos no painel de configuração. 6. 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](https://developer.servicenow.com/dev.do#!/reference/next-experience/utah/ui-framework/advanced/accessibility). 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 e coluna) : 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). 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. ![Opção de dimensionamento expandida mostrando opções de largura e altura.]() 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. ![Opções de espaçamento de margem e preenchimento.]() : Você pode definir o tamanho de cada margem ou lado de preenchimento selecionando a configuração atual e, em seguida, selecionando uma opção. 7. **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 fundo` * `imagem de fundo` * `estilo de borda` * `largura da borda` * `cor da borda` * `raio da borda` * `sombra da caixa` * `altura` * `altura mínima` * `altura máxima` * `margem` * `estouro` * `preenchimento` * `largura` * `largura mínima` * `largura máxima` * `índice-z` {#add-styling-to-component__ul_sb4_wxm_xnb} 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](https://servicenow-prod.fluidtopics.net/5RwY2KWxG_TE~iBs0te6fQ "Os temas permitem que você mude o estilo visual de suas experiências Construtor de IU para que elas expressem a aparência da sua marca"). 8. No cabeçalho principal, selecione Salvar para salvar suas mudanças. ## Adicionar estilo a um componente usando o sistema de layout antigo {#ariaid-title2} 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](https://servicenow-prod.fluidtopics.net/5RwY2KWxG_TE~iBs0te6fQ "Os temas permitem que você mude o estilo visual de suas experiências Construtor de IU para que elas expressem a aparência da sua marca"). ### Procedimento 1. Navegar até TodosEstrutura do Now ExperienceConstrutor de IU. 2. Abra uma experiência para trabalhar ou crie uma experiência selecionando CriarExperiência. Consulte [Configure como os usuários interagem com suas aplicações no Construtor de IU](https://servicenow-prod.fluidtopics.net/lLqYhwc21ggWGJvxakpXWA "Saiba o que é uma experiência em Construtor de IU. Entenda o que uma experiência contém.") para obter mais informações sobre como criar experiências. 3. Crie ou abra uma página ou variante de página. Para obter mais informações sobre como criar uma página no Construtor de IU, consulte [Criação de uma página no Construtor de IU](https://servicenow-prod.fluidtopics.net/oXLwDAYTDqDRVYtO2ECqbg "Crie uma página em Construtor de IU para um portal, espaço ou aplicação personalizada para que você possa criar uma experiência na Web para seus usuários."). Nota: Um componente deve ser colocado em um contêiner antes de adicionar estilos ao componente. 4. Selecione o contêiner que contém o componente ao qual você deseja adicionar estilo. O contêiner normalmente está um nível acima do componente na árvore de conteúdo. A guia Estilos aparece no painel de configuração. 5. Na janela Estilos CSS, insira as propriedades e valores de CSS baseados em padrões. As seguintes propriedades de CSS são as mais usadas para aplicar estilos a componentes em contêineres: * `cor de fundo` * `imagem de fundo` * `estilo de borda` * `largura da borda` * `cor da borda` * `raio da borda` * `sombra da caixa` * `altura` * `altura mínima` * `altura máxima` * `margem` * `estouro` * `preenchimento` * `largura` * `largura mínima` * `largura máxima` * `índice-z` {#add-styling-to-component-old-layout__ul_sb4_wxm_xnb} 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](https://servicenow-prod.fluidtopics.net/5RwY2KWxG_TE~iBs0te6fQ "Os temas permitem que você mude o estilo visual de suas experiências Construtor de IU para que elas expressem a aparência da sua marca"). 6. No cabeçalho principal, selecione Salvar para salvar suas mudanças. Figura 1. Adicionar estilo a um componente no painel Configuração de estilos