Editar CSS para temas

Artigo
07/01/2022
2 minutos de lectura

As follas de estilo en cascada (CSS) permítenlle controlar a formato do seu sitio web. Os ficheiros bootstrap.min.css e theme.css están dispoñibles por defecto. Pode editar os ficheiros CSS existentes e cargar ficheiros CSS novos. Cando cargue un ficheiro CSS novo, estará dispoñible como un ficheiro web na aplicación Xestión do portal.

Nota

Os portais de Power Apps están baseados en Bootstrap 3.3.x coa excepción do portal de eventos. Os desenvolvedores do portal non deberían substituír Bootstrap 3 por outras bibliotecas CSS xa que algúns dos escenarios dos portais de Power Apps dependen de Bootstrap 3.3.x. Para obter máis información, consulte as seccións Comprensión do marco Bootstrap e Personalizar Bootstrap deste artigo.

Para abrir un CSS no editor de código:

Edite o portal para abrilo en Studio de portais de Power Apps.
Seleccione Tema desde o lado esquerdo da pantalla. Mostraranse os temas dispoñibles.
Seleccione o CSS elixido para abrilo no editor de código.
Edite o código e garde as modificacións.

Para cargar un ficheiro CSS novo:

Edite o portal para abrilo en Studio de portais de Power Apps.
Seleccione Tema desde o lado esquerdo da pantalla. Mostraranse os temas dispoñibles.
Seleccione Cargar CSS personalizado.
Navegue e seleccione o ficheiro CSS que desexe cargar.

Para eliminar un personalizado CSS arquivo

O CSS os ficheiros almacénanse como ficheiros web. Para eliminar o CSS ficheiro, vai ao Aplicación de xestión de portais e selecciona Arquivos web.
Localiza o CSS rexistro do ficheiro. Quizais necesites filtrar Nome e Sitio web valores para localizar o rexistro correcto.
Unha vez seleccionado o rexistro do ficheiro web, seleccione Eliminar.
No portal Studio, seleccione Configuración de sincronización para borrar os cambios de estilo do personalizado CSS.

Comprender o marco de Bootstrap

Bootstrap é unha estrutura de front-end que inclúe CSS e compoñentes de JavaScript para os elementos da interface da aplicación web común. Inclúe estilos para elementos de navegación, formularios, botóns e un sistema de deseño de grade receptivo, que permite que os deseños do sitio se axusten dinamicamente a dispositivos con tamaños de pantalla diferentes, tales como teléfonos e tabletas. Se utiliza o sistema de deseño de Bootstrap, pode desenvolver un sitio único que presenta unha interface apropiada para todos os dispositivos que poden utilizar os clientes.

Os modelos incluídos nos portais impleméntanse utilizando compoñentes de Bootstrap estándar, con poucos estilos de personalización adicionais. Para cando implemente os modelos, pode aproveitar as opcións de personalización de Bootstrap. Pode personalizar o tema (tipos de letra, cores, etc.) rapidamente de xeito que se poida aplicar de maneira coherente en todo o portal.

Personalizar Bootstrap

Bootstrap admite personalización mediante un conxunto de variables. Pode definir algunha ou todas estas variables para personalizar valores, e logo descargar unha versión personalizada de Bootstrap recompilada segundo estes valores.

A capacidade das variables de Bootstrap é que non deciden o estilo dun elemento individual. Todos os estilos no marco están baseados nestes valores o son derivados deles. Por exemplo, considere a variable @font-size-base. Isto especifica o tamaño que Bootstrap atribúe a un corpo de texto normal. No entanto, Bootstrap tamén usa esta variable para indicar o tamaño do tipo de letra para títulos e outros elementos. O tamaño dun elemento de H1 pode estar definido como o 300 por cento do tamaño de @font-size-base. Ao definir esta variable, o usuario controla completamente a escala tipográfica do portal dunha forma coherente. De forma similar, a variable @link-color controla a cor das hiperligazóns. Para a cor que atribúa este valor, Bootstrap definirá a cor para activar as ligazóns un 15 por cento máis escuro que o seu valor personalizado.

A forma estándar para crear unha versión personalizada de Bootstrap é a través do sitio oficial de Bootstrap. No entanto, debido á popularidade de Bootstrap, moitos sitios de terceiros tamén se crearon para este obxectivo. Estes sitios poden fornecer unha interface máis fácil de usar para a personalización de Bootstrap, ou fornecer versións deseñadas previamente de Bootstrap que pode descargar. O sitio oficial do personalizador de Bootstrap ten máis información sobre a personalización de Bootstrap.

Ao descargar unha versión personalizada de Bootstrap, contén a seguinte estrutura de active directory.

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

Ou, dependendo da aplicación de personalización utilizada, pode conter só bootstrap.min.css. De calquera maneira, bootstrap.min.css é o ficheiro que contén as súas personalizacións. Os outros ficheiros son os mesmos para todas as versións personalizadas de Bootstrap, e xa están incluídos no portal.

Consulte tamén