Bearbeiten von CSS für Themen

  • Artikel

Hinweis

CSS-Seiten (Cascading Style Sheets) (CSS) ermöglicht es Ihnen die Formatierung Ihrer Website zu steuern. Standardmäßig sind bootstrap.min.css- und theme.css-Dateien verfügbar. Sie können die vorhandene Daten CSS bearbeiten und neue Dateien CSS hochladen. Wenn Sie eine neue Datei CSS hochladen, ist sie als Internet-Datei in der Portalverwaltungs-App verfügbar.

Wichtig

Power Apps-Portale basieren auf Bootstrap 3.3.x mit Ausnahme vom Veranstaltungsportal. Portalentwickler sollten Bootstrap 3 nicht durch andere CSS-Bibliotheken ersetzen, da einige der Szenarien in Power Apps-Portalen abhängig von Bootstrap 3.3.x sind. Weitere Informationen finden Sie unter Grundlegendes zum Bootstrap-Framework in den Abschnitten und Passen Sie Bootstrap an in diesem Artikel.

Eine CSS im Code-Editor zu öffnen

Um ein CSS im Code-Editor zu öffnen, bearbeiten Sie das Portal, um es in Power Apps Portals Studio zu öffnen.

  1. Das Design Design-Symbol auf der linken Seite des Bildschirms auswählen Die verfügbaren Designs werden angezeigt.

    Design

  2. Wählen Sie die gewünschte CSS aus, um sie im Code-Editor zu öffnen.

  3. Bearbeiten Sie den Code und speichern Sie die Änderungen.

Eine neue CSS-Datei hochladen

Um eine neue CSS-Datei hochzuladen, bearbeiten Sie das Portal, um es in Power Apps Portals Studio zu öffnen.

  1. Das Design Design-Symbol auf der linken Seite des Bildschirms auswählen Die verfügbaren Designs werden angezeigt.

  2. Wählen Sie Benutzerdefiniertes CSS hochladen.

    Benutzerdefiniertes CSS hochladen

  3. Navigieren Sie zu der hochzuladenden CSS-Datei.

Eine benutzerdefinierte CSS-Datei löschen

Die CSS-Dateien werden als Webdateien gespeichert.

  1. Gehen Sie zum Entfernen der CSS-Datei zur Portalverwaltungs-App und wählen Sie Webdateien aus.

  2. Finden Sie den CSS-Dateidatensatz. Möglicherweise müssen Sie nach den Werten Name und Website filtern, um den richtigen Datensatz zu finden.

  3. Sobald der Webdateidatensatz ausgewählt ist, wählen Sie Löschen aus.

  4. Wählen Sie im Portal Studio Konfiguration synchronisieren aus, um die Gestaltungsänderungen aus dem benutzerdefinierten CSS zu löschen.

Bootstrap-Framework verstehen

Bootstrap ist ein Front-End-Framework mit CSS und JavaScript-Komponenten für allgemeine Webanwendungs-Oberflächenelemente. Es enthält Stile für Navigationselemente, Formulare, Schaltflächen und ein reagierendes Rasterlayoutsystem. Dies ermöglicht die dynamische Anpassung von Seitenlayouts auf Geräten mit unterschiedlichen Bildschirmgrößen, z. B. Telefone und Tablets. Durch Verwenden des Bootstrap-Layoutsystems können Sie eine einzelne Website entwickeln, die eine passende Schnittstelle für alle Geräte darstellt, die Ihre Kunden möglicherweise verwenden.

Die in den Portalen einbezogenen Vorlagen werden mithilfe standardmäßiger Bootstrap-Komponenten mit minimalen zusätzlichen benutzerdefinierten Stilen implementiert. Wenn Sie die Vorlagen implementieren, können Sie die Bootstrap-Anpassungsoptionen nutzen. Sie können das Design (Schriftarten, Farben usw.) schnell anpassen und es wird einheitlich im Portal angewendet.

Bootstrap anpassen

Bootstrap unterstützt Anpassungen durch einen Variablensatz. Sie können eine oder alle dieser Variablen auf benutzerdefinierte Werte festlegen und dann eine benutzerdefinierte Version von Bootstrap herunterladen, die basierend auf diesen Werten erstellt ist.

Die besondere Leistungsstärke von Bootstrap-Variablen liegt darin, dass sie nicht einfach den Stil eines einzelnen Elements vorschreiben. Alle Stile im Framework basieren auf diesen Werten und sind von ihnen abgeleitet. Betrachten Sie zum Beispiel die Variable @font-size-base. Dadurch wird die Größe angegeben, die Bootstrap dem normalen Textkörper zuweist. Allerdings verwendet Bootstrap diese Variable auch, um die Schriftgröße für Überschriften und andere Elemente angeben. Die Größe für ein H1-Element kann als 300 Prozent der Größe von @font-size-base. Indem Sie diese Variable festlegen, steuern Sie die gesamte typografische Skala Ihres Portals auf eine einheitliche Weise. Dem entsprechend steuert die @link-color Variable die Farbe von Hyperlinks. Für die Farbe, die Sie diesem Wert zuweisen, definiert Bootstrap die Farbe für Links beim Zeigen mit der Maus darauf als 15 Prozent dunkler als Ihr benutzerdefinierter Wert.

Die Standardmethode zum Erstellen einer benutzerdefinierten Version von Bootstrap besteht in der Verwendung der offiziellen Bootstrap-Website. Aufgrund der Verbreitung von Bootstrap wurden jedoch auch zahlreiche Drittanbieterwebsites für diesen Zweck erstellt. Diese Websites bieten möglicherweise eine einfachere Oberfläche für die Anpassung von Bootstrap oder vordefinierte Versionen von Bootstrap, die Sie herunterladen können. Auf der offiziellen Bootstrap-Website für Anpassungen finden Sie weitere Informationen zur Anpassung von Bootstrap.

Wenn Sie eine angepasste Version von Bootstrap herunterladen, enthält sie die folgende Verzeichnisstruktur.

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

Oder, je nach verwendeter Anpasser-Anwendung, enthält sie möglicherweise nur bootstrap.min.css. Jedenfalls ist bootstrap.min.css die Datei, die Ihre Anpassungen enthält. Die anderen Dateien sind für alle benutzerdefinierten Versionen von Bootstrap gleich und im Portal bereits enthalten.

Siehe auch

Hinweis

Können Sie uns Ihre Präferenzen für die Dokumentationssprache mitteilen? Nehmen Sie an einer kurzen Umfrage teil. (Beachten Sie, dass diese Umfrage auf Englisch ist.)

Die Umfrage dauert etwa sieben Minuten. Es werden keine personenbezogenen Daten erhoben. (Datenschutzbestimmungen).