Editar CSS para temas

Observação

• Desde outubro de 2022, os portais do Power Apps passaram a ser Power Pages.
• A partir de 26 de fevereiro de 2024, o Estúdio de portais do Power Apps herdado será desativado. Use o Power Pages estúdio de design para editar seus sites. Mais informações: O Estúdio de Portais do Power Apps será desativado
• Este tópico se aplica a recursos herdados. Para obter as informações mais recentes, acesse a documentação do Microsoft Power Pages.

Folhas de Estilo em Cascata (CSS) permitem que você controle a formatação de seu site. Por padrão, os arquivos bootstrap.min.css e theme.css estão disponíveis. Você pode editar os arquivos CSS existentes e carregar os novos arquivos CSS. Ao carregar um novo arquivo CSS, ele ficará disponível como um arquivo Web no aplicativo Gerenciamento de Portal.

Importante

Os portais do Power Apps são baseados no Bootstrap 3.3.x, com exceção do Portal de eventos. Os desenvolvedores do portal não devem substituir o Bootstrap 3 por outras bibliotecas CSS, pois alguns dos cenários em portais do Power Apps dependem do Bootstrap 3.3.x. Para obter mais informações, consulte as seções Compreender a estrutura do Bootstrap e Personalizar o Bootstrap neste artigo.

Abrir um CSS em um editor de código

Para abrir um CSS no editor de código, edite o portal para abri-lo no Estúdio de portais do Power Apps.

1. Selecione Tema no lado esquerdo da tela. Os temas disponíveis são exibidos.

   

2. Selecione o CSS desejado para abri-lo no editor de código.

3. Editar o código e salvar as alterações.

Carregar um novo arquivo CSS

Para carregar um novo arquivo CSS, edite o portal para abri-lo no Estúdio de portais do Power Apps.

1. Selecione Tema no lado esquerdo da tela. Os temas disponíveis são exibidos.

2. Selecione Carregar CSS personalizado.

   

3. Procure e selecione o arquivo CSS a ser carregado.

Excluir um arquivo CSS personalizado

Os arquivos CSS são armazenados como arquivos da Web.

1. Para remover o arquivo CSS, vá para o aplicativo Gerenciamento do Portal e selecione Arquivos da Web.

2. Localize o registro do arquivo CSS. Talvez seja necessário filtrar os valores Nome e Site para localizar o registro correto.

3. Depois que o registro do arquivo da Web for selecionado, selecione Excluir.

4. No Studio de portais, selecione Configuração de sincronização para limpar as alterações de estilo do CSS personalizado.

Compreender a estrutura Bootstrap

O Bootstrap é uma estrutura front-end que inclui componentes CSS e JavaScript para elementos comuns da interface do aplicativo Web. Ele inclui estilos para elementos de navegação, formulários, botões e um sistema de layout de grade responsivo, o que permite que os layouts de sites se ajustem dinamicamente aos dispositivos com tamanhos de tela diferentes, como celulares e tablets. Usando o sistema de layout do Bootstrap, é possível desenvolver um único site que apresente uma interface apropriada para todos os dispositivos que os clientes possam usar.

Os modelos incluídos em portais são implementados por meio de componentes padrão do Bootstrap com estilos personalizados adicionais mínimos. Dessa forma, quando você implementa os modelos, pode aproveitar as vantagens das opções de personalização do Bootstrap. Você pode personalizar rapidamente o tema (fontes, cores e assim por diante) e de uma forma que seja aplicada consistentemente no portal.

Personalizar Bootstrap

O Bootstrap oferece suporte à personalização por meio de um conjunto de variáveis. Você pode definir uma ou todas essas variáveis para valores personalizados e baixar uma versão personalizada do Bootstrap compilada com base nesses valores.

A vantagem das variáveis do Bootstrap é que elas não determinam o estilo de um único elemento. Todos os estilos da estrutura baseiam-se nesses valores e são derivados deles. Por exemplo, considere a variável @font-size-base. Isso especifica o tamanho que o Bootstrap atribui ao corpo de texto normal. Entretanto, o Bootstrap também usa essa variável para indicar o tamanho da fonte de cabeçalhos e outros elementos. O tamanho de um elemento H1 pode ser definido como 300% do tamanho de @font-size-base. Definindo essa variável, você pode controlar toda a escala tipográfica do portal de modo consistente. Da mesma forma, a variável @link-color controla a cor dos hiperlinks. Para a cor atribuída a esse valor, o Bootstrap definirá a cor de foco dos links como 15% mais escuro do que o valor personalizado.

A maneira padrão de criar uma versão personalizada do Bootstrap é por meio do site oficial do Bootstrap. Entretanto, devido à popularidade do Bootstrap, vários sites de terceiros também foram criados com essa finalidade. Esses sites podem simplesmente fornecer uma interface mais simples para personalização do Bootstrap ou versões predefinidas do Bootstrap para download. O site oficial do personalizador do Bootstrap tem mais informações sobre a personalização do Bootstrap.

Quando você baixar uma versão personalizada do Bootstrap, ela conterá a estrutura de diretórios a seguir.

css/
    |-- bootstrap.min.css 
img/
    |-- glyphicons-halflings-white.png 
    |-- glyphicons-halflings.png 
js/ 
    |-- bootstrap.min.js

Dependendo do aplicativo personalizador utilizado, ela só poderá conter bootstrap.min.css. Independentemente disso, bootstrap.min.css é o arquivo que contém suas personalizações. Os outros arquivos são iguais para todas as versões personalizadas do Bootstrap e, portanto, já estão incluídos no seu portal.

Confira também

• CSS Avançado nos portais do Power Apps
• Desenvolvimento de cliente avançado

Observação

Você pode nos falar mais sobre suas preferências de idioma para documentação? Faça uma pesquisa rápida. (Observe que esta pesquisa está em inglês)

A pesquisa levará cerca de sete minutos. Nenhum dado pessoal é coletado (política de privacidade).