Erweitertes CSS
Cascading Stylesheets (CSS) ist eine Sprache, die den Stil einer Webseite festlegt, indem die Art der Anzeige ihrer HTML-Elemente beschrieben wird, einschließlich Text, Zeichensätzen, Farben, Hintergründen, Rahmen und Rändern.
Das Ändern des Stils der Seiten Ihr Website kann so einfach sein wie das Anwenden von CSS-Anweisungen auf eine Seite. Wenn Sie den Inhalt der Seite mit Visual Studio Code bearbeiten, ist CSS als separate Datei verfügbar. Diese Datei ist Teil des Seiteninhalts und für diese Seite gilt CSS. Wenn Sie beispielsweise die Höhe der Navigationsleiste oben auf einer Homepage vergrößern müssen, um sie an ein Logo anzupassen, können Sie einfach die CSS-Datei bearbeiten und eine benutzerdefinierte CSS-Anweisung hinzufügen.
.navbar-static-top.navbar { min-height: 100px; }
Hinweis
CSS-Anweisungen, die einer Webseite hinzugefügt werden, gelten nur für diese Webseite.
Dieser Ansatz funktioniert für kleinere Anpassungen auf einer einzelnen Seite. Besser ist es jedoch, Anpassungen in einer oder mehreren CSS-Dateien aufzuzeichnen und sie auf die gesamte Website oder Teile davon anzuwenden.
Power Pages-Themen
Power Pages verwendet das Bootstrap-Front-End-Framework zum Steuern von Design und Layout der Website. Bootstrap ist ein Paket aus HTML‑ und CSS-Designvorlagen für Typografie, Formulare, Schaltflächennavigation und andere Elemente, einschließlich optionale JavaScript-Erweiterungen. Eines der ansprechendsten Merkmale von Bootstrap besteht darin, dass es standardmäßig ein dynamisches Layout bereitstellt. Die Lösung passt Ihre Website automatisch an, damit sie auf allen Geräten ansprechend aussieht – von kleinen Telefonen bis zu großen Desktops.
Das Design bestimmt das Erscheinungsbild aller Seiten Ihrer Website, um die visuelle Konsistenz sicherzustellen. Es steuert die Navigationsstruktur, das Banner, die Farben, die Schriftarten und andere visuelle Elemente einer Webseite.
Sie können Power Pages implementieren, indem Sie Bootstrap-Standardkomponenten mit minimalen benutzerdefinierten Kernstilen verwenden. Das bedeutet, dass es die Anpassungsoptionen von Bootstrap nutzen kann, um die Designs auf einfache Weise anzupassen und konsistent auf die gesamte Website anzuwenden.
Anpassungen anwenden
Power Pages bietet eine umfassende Sammlung von Designs und Tools zum Gestalten Ihrer Website. Wählen Sie aus mehreren Designs aus, die Sie auf Ihrer Website verwenden möchten, und personalisieren Sie sie mit den Gestaltungsoptionen weiter.
Der Arbeitsbereich Styling im Power Pages-Designstudio legt fest, welche CSS-Stile auf die Website angewendet werden, und ermöglicht Ihnen das universelle Implementieren von Websitedesigns. Sie können Änderungen am Branding für das Unternehmen einbinden und Änderungen in der Vorschau auf der rechten Seite des App-Fensters anzeigen. Styling bietet mehrere vorgefertigte Designs, und für jedes können Sie das Farbschema, die Hintergrundfarbe, die Schriftarten, die Schaltflächendesigns und den Abschnittsabstand ändern.
Designs
Designs erstellen ein allgemeines Erscheinungsbild und Verhalten für die Website, indem sie Stile für verschiedene Textelemente, Schaltflächen, Links und Abschnittslayouts definieren. Wenn die Website andere Anpassungen erfordert, können Sie die Funktion CSS verwalten verwenden.
Im Arbeitsbereich Styling können Sie aus den verfügbaren Designs auswählen. Nachdem Sie ein Design ausgewählt haben, können Sie einzelne Elemente weiter anpassen, um den gewünschten Stil zu erstellen.
CSS verwalten
Wählen Sie das Menü mit den Auslassungspunkten (...) aus, und klicken Sie dann im Designtitel auf die Option CSS verwalten, um auf CSS verwalten zuzugreifen.
Auf allen Power Pages-Websites sind folgende Dateien bereits auf allen Seiten enthalten: bootstrap.min.css, theme.css und portalbasictheme.css. Diese Dateien legen Stile für Ihre gesamte Website fest. Sie können weitere CSS-Dateien hochladen, indem Sie den Link Hochladen verwenden und diese dann im Visual Studio Code-Editor bearbeiten. Weitere Informationen finden Sie unter CSS-Dateien in Power Pages verwalten.
Berücksichtigen Sie die folgenden Faktoren, wenn Sie bestimmen, wie Sie für Stiländerungen für Ihre Website vorgehen:
Entwickeln Sie ein umfassendes Format für die gesamte Website und ersetzen Sie dann den Inhalt einer CSS-Datei. Dieser Prozess funktioniert gut, wenn Sie Zugriff auf gute Designer haben, die sicherstellen können, dass alle relevanten Elemente definiert sind. Dieser Ansatz führt zu einer zentral gesteuerten Formatierung und stellt die Konsistenz in der gesamten Website sicher.
Definieren Sie nur die Elemente, die geändert werden müssen, neu, z. B. Farben und Schriftgröße. Erstellen Sie eine CSS-Datei, die nur diese inkrementellen Anpassungen enthält, und laden Sie diese Datei hoch. Dieser Prozess funktioniert gut, wenn Ihr Zieldesign dem Design, das Teil der ausgewählten Vorlage ist, sehr ähnlich ist und nur geringfügige Formatierungsänderungen erforderlich sind. Dieser Ansatz ermöglicht inkrementelle Änderungen, die rückgängig gemacht werden können.
Warnung
Wenn Sie die Dateien bootstrap.min.css oder theme.css überschreiben möchten, achten Sie darauf, eine Sicherungskopie dieser Dateien herunterzuladen, bevor Sie sie ersetzen. Wenn Ihre Ersatz-CSS ungültig oder unvollständig ist, können Sie die Ersetzung möglicherweise nicht rückgängig machen und müssen den Inhalt dieser Dateien wiederherstellen, wenn die Website nicht mehr funktioniert.
Anpassungen auf bestimmte Websitebereiche anwenden
Sie können bestimmten Seiten oder Abschnitten Ihrer Website Anpassungen hinzufügen, indem Sie mithilfe der Portalverwaltungs-App einen Webdatei-Datensatz mit einem CSS-Datei-Anhang hinzufügen. Sie müssen die übergeordnete Seite im Webdatei-Datensatz angeben, damit die Stile auf die übergeordnete Seite und alle untergeordneten Elemente dieser Seite angewendet wird. Mit diesem Ansatz können Sie vollständig angepasste Abschnitte für Ihre Website erstellen.
Wichtig
Die Teil-URL muss auf .css für Power Pages enden, damit sie erkannt wird und auf die Webseite und ihre untergeordneten Seiten angewendet werden kann.
Bootstrap anpassen
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 viele andere Sites für diesen Zweck erstellt. Diese Sites bieten möglicherweise eine benutzerfreundlichere 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.
Tipp
Wählen Sie während der Anpassung von Bootstrap nur Elemente aus, die Änderungen erfordern. Wenn Sie beispielsweise lediglich die Standard-Schriftarten durch die Standardschriftarten Ihres Unternehmens ersetzen möchten, wählen Sie die Typografie-Komponente von Bootstrap aus. Mit diesem Ansatz wird die Wahrscheinlichkeit verringert, dass andere CSS-Elemente versehentlich neu geschrieben werden.
Nachdem Sie Bootstrap angepasst haben, generiert es eine oder mehrere Dateien, die Sie als Webdateien hochladen sollten. Achten Sie darauf, in den Teil-URLs die Dateien bootstrap.css, bootstrap.min.css, theme.css oder theme.min.css nicht zu verwenden, es sei denn, Sie möchten das ursprüngliche Format vollständig ersetzen. Der Grund hierfür liegt in der Power Pages-Behandlung von CSS-Dateien.
CSS für einfache Anpassungen
CSS wird häufig übersehen, wenn einfache Anpassungen erforderlich sind, z. B. das Ausblenden des Elements oder das Anpassen von Rändern für eine breite Beschriftung. Das Bootstrap-Framework ist die Grundlage für die Formatierung in Power Pages-Websites, und es definiert viele Formate, die das Erscheinungsbild und das mehrspaltige dynamische Layout steuern. Wenn Sie beispielsweise eine bestimmte Spalte ausblenden und einen Standardwert übermitteln möchten, können Sie, anstatt die Benutzereingaben zu erfassen, Tabellenformular-Metadaten für die Spalte verwenden und dann folgende Parameter definieren:
Legen Sie eine Beschriftung auf ein einzelnes Leerzeichen fest.
Setzen Sie die CSS-Klasse auf hide.
Stellen Sie den Standardwert wie erforderlich ein.
Anstatt JavaScript neu zu sortieren, können Sie diese Aufgabe nur mithilfe der Konfiguration ausführen. Jedoch hat die Verwendung von CSS, wo möglich, bestimmte Vorteile:
CSS wird beim Laden angewendet, es ist schneller, da Sie nicht warten müssen, bis das Dokument vollständig geladen ist.
CSS ist immer aktiviert und gilt auch dann für die relevanten Elemente, wenn JavaScript die Dokumentstruktur ändert und die Elemente hinzufügt oder entfernt.
Für bestimmte Aufgaben im Zusammenhang mit der Sichtbarkeit von Elementen und dem dynamischen Layout kann die Verwendung von CSS wesentlich einfacher als der Einsatz von JavaScript sein, was weniger Wartung und eine geringere Fehleranfälligkeit bedeutet.