Informació general sobre temes
Nota
- Des de l'octubre de 2022, els portals del Power Apps són Power Pages.
- A partir del 26 de febrer de 2024, l'estudi de portals heretat del Power Apps es retirarà. Utilitzeu el Power Pages estudi de disseny per editar els vostres llocs web. Més informació: Retirada de l'estudi de portals del Power Apps
- Aquest tema s'aplica a funcionalitats heretades. Per obtenir més informació, aneu a la documentació del Microsoft Power Pages.
Als portals del Power Apps, la característica Habilita el tema bàsic està definida com a Desactivat. Quan activeu aquesta característica, podeu utilitzar temes per defecte anomenats Ajustaments predefinits. També podeu crear còpies dels temes predefinits per a la personalització addicional.
En aquest article, veureu la característica de temes bàsics. Per veure la personalització de temes avançats, vegeu Editar CSS.
Habilitar els temes bàsics per als portals existents
Inicieu la sessió a Power Apps.
Seleccioneu Aplicacions a la subfinestra de navegació esquerra i, a continuació, seleccioneu el portal.
Seleccioneu Més ordres (...) i, a continuació, Edita.
Seleccioneu Temes a la subfinestra de navegació esquerra i, a continuació, activeu el botó de commutació Habilita el tema bàsic.
Canviar el tema del portal
Podeu definir qualsevol tema existent al portal a un tema per defecte.
Inicieu la sessió a Power Apps.
Seleccioneu Aplicacions a la subfinestra de navegació esquerra i, a continuació, seleccioneu el portal.
Seleccioneu Més ordres (...) i, a continuació, Edita.
Seleccioneu Tema a la subfinestra de components.
Seleccioneu qualsevol tema per defecte a partir dels valors predefinits disponibles (a l'exemple, hem seleccionat Verd).
El tema seleccionat s'aplica al portal.
Nota
Després de canviar el tema o les propietats d'un tema, com ara els colors, a l'Studio, seleccioneu Navega pel lloc web per veure els canvis en una pestanya del navegador diferent. Si feu diversos canvis mitjançant aquest mètode i canvieu a diferents pàgines al navegador, la memòria cau fixa del navegador pot provocar que el navegador mostri canvis del tema que no són els més recents. Si això passa, utilitzeu Ctrl+F5 per tornar a carregar la pàgina.
Crear un tema nou
Inicieu la sessió a Power Apps.
Seleccioneu Aplicacions a la subfinestra de navegació esquerra i, a continuació, seleccioneu el portal.
Seleccioneu Més ordres (...) i, a continuació, Edita.
Seleccioneu Tema a la subfinestra de components.
Seleccioneu Tema nou.
Editar detalls del tema
Podeu actualitzar el nom del tema, la descripció, el color i altres opcions de configuració de la tipografia al Power Apps Studio.
Inicieu la sessió a Power Apps.
Seleccioneu Aplicacions a la subfinestra de navegació esquerra i, a continuació, seleccioneu el portal.
Seleccioneu Més ordres (...) i, a continuació, Edita.
Seleccioneu Tema a la subfinestra de components.
Seleccioneu el tema que s'aplica actualment o seleccioneu-ne un de nou a partir dels valors predefinits. La selecció d'un tema obre la subfinestra de detalls a la part dreta de l'espai de treball.
Editeu els detalls del tema, com ara el nom, la descripció i el color per a diferents àrees.
Opció de color Àrea afectada Principal Color dels enllaços i botons. Capçalera Color de fons de la capçalera. Text del menú de capçalera Color del text del menú de capçalera. Passa el punter per sobre del menú de capçalera Color de fons dels elements del menú quan s'hi passa el punter per sobre. Fons del cos Color de fons de la secció del cos. Fons del peu de pàgina Color de fons del peu de pàgina. Text de peu de pàgina Color del text del peu de pàgina. Desa i publica els canvis.
Copiar un tema predefinit
Inicieu la sessió a Power Apps.
Seleccioneu Aplicacions a la subfinestra de navegació esquerra i, a continuació, seleccioneu el portal.
Seleccioneu Més ordres (...) i, a continuació, Edita.
Seleccioneu Tema a la subfinestra de components.
Seleccioneu el tema dels predefinits que voleu copiar, seleccioneu ... i seleccioneu Personalitza.
Actualitzeu els detalls del tema tal com es descriu a la secció anterior i, a continuació, deseu el tema.
Variables Sass
Sass és un llenguatge de fulls d'estil amb sintaxi totalment compatible amb CSS. Quan habiliteu la característica de temes bàsics, podeu utilitzar variables Sass en comptes de valors per configurar els colors dels temes.
Per exemple, si voleu que el color de la Capçalera sigui un 25 per cent més clar que el color Principal, podeu utilitzar el valor següent en comptes d'un color específic:
lighten($primaryColor, 25%);
Podeu utilitzar les variables Sass següents amb temes bàsics:
| Opció de color | Nom de la variable Sass |
|---|---|
| Principal | $primaryColor |
| Capçalera | $headerColor |
| Text del menú de capçalera | $headerMenuTextColor |
| Passa el punter per sobre del menú de capçalera | $headerMenuHoverColor |
| Fons del cos | $bodyBackground |
| Fons del peu de pàgina | $footerColor |
| Text de peu de pàgina | $footerTextColor |
Ordre de la variable Sass
Les variables Sass funcionen de dalt a baix. Podeu definir el color de la Capçalera com a lighten($primaryColor, 25%);. Però no podeu definir el color Principal com a lighten($headerColor, 25%); perquè Capçalera apareix sota Principal a la llista d'opcions de color.
Consideracions sobre temes bàsics
- No podeu tenir dos temes amb el mateix nom de tema o el mateix nom de fitxer de tema.
- Qualsevol valor de color que introduïu manualment ha de ser per a un color vàlid.
- No es permet canviar el CSS dels temes predefinits.
- La proporció de contrast recomanada entre els colors de primer pla i de fons del tema és 4,5:1, per motius d'accessibilitat.
Passos següents
Consulteu també
Portals Studio del Power Apps
Crear i administrar pàgines web
Editor WYSIWYG
Nota
Ens podeu dir quines són les vostres preferències d'idioma per a la documentació? Responeu una breu enquesta. (tingueu en compte que l'idioma de l'enquesta és l'anglès)
Trigareu uns set minuts a completar l'enquesta. No es recopilen dades personals (declaració de privadesa).