Benutzerdefinierte CSS-Stile zu einer SharePoint-Seite hinzufügen
- Einleitung
- Benutzerdefinierte CSS in klassischem SharePoint
- Benutzerdefinierte CSS im modernen SharePoint (SharePoint Online)
- Fazit
Einleitung
Das Hinzufügen von benutzerdefinierten CSS-Stilen zu einer SharePoint-Seite ermöglicht es Ihnen, das Aussehen und Verhalten Ihrer Website über die Standardvorlagen hinaus anzupassen. Dies kann hilfreich sein, um spezifische Designanforderungen zu erfüllen oder um ein einheitliches Branding durchzusetzen. Die Vorgehensweise hängt dabei davon ab, ob Sie SharePoint Online (modernes Erlebnis) oder SharePoint On-Premises (klassisches Erlebnis) verwenden.
Benutzerdefinierte CSS in klassischem SharePoint
In klassischen SharePoint-Seiten können Sie benutzerdefinierte CSS-Stile relativ einfach einbinden. Eine Möglichkeit besteht darin, eine CSS-Datei in eine Dokumentenbibliothek hochzuladen, beispielsweise in die Style Library, und diese dann über die Websiteeinstellungen als benutzerdefinierte Formatvorlage anzugeben.
Dazu laden Sie zuerst Ihre CSS-Datei in die Style Library Ihrer SharePoint-Webseite hoch. Anschließend navigieren Sie zu den Websiteeinstellungen, dort unter "Aussehen ändern" (bzw. Design ändern) finden Sie die Option, benutzerdefinierte CSS-Dateien anzugeben. Hier können Sie den Pfad zu Ihrer hochgeladenen CSS-Datei eintragen. Dadurch wird die CSS-Datei auf allen Seiten der Website geladen und Ihre Stile wirken sich entsprechend aus.
Alternativ können Sie über einen Script-Editor-Webpart oder Inhalts-Editor-Webpart benutzerdefinierten CSS-Code direkt in eine einzelne Seite einfügen. Dazu bearbeiten Sie zunächst die Seite, fügen einen Script-Editor-Webpart hinzu und tragen innerhalb eines <style>-Tags Ihren CSS-Code ein. Dies ist jedoch eher für kleine Anpassungen oder einzelne Seiten sinnvoll.
Benutzerdefinierte CSS im modernen SharePoint (SharePoint Online)
Im modernen SharePoint-Online-Erlebnis ist das direkte Einfügen von benutzerdefiniertem CSS deutlich eingeschränkter, da Microsoft das Aussehen durch das Framework strikt kontrolliert, um Konsistenz und Performance zu gewährleisten. Das Einbetten von CSS über klassische Webparts oder durch direkte Referenzen wird häufig blockiert.
Eine Möglichkeit, benutzerdefinierte Gestaltung umzusetzen, ist die Verwendung von SharePoint Framework (SPFx) Extensions, insbesondere durch Application Customizers. Über diese Erweiterungen können Sie benutzerdefinierte Skripte und Styles in SharePoint-Seiten einbinden. Dabei erstellen Sie ein SPFx-Projekt, binden Ihre CSS-Dateien ein oder schreiben CSS direkt in die Komponente und deployen die Erweiterung dann in Ihre SharePoint-Umgebung.
Der Vorteil dieser Methode ist, dass die Anpassungen nicht nur auf eine Seite beschränkt sind, sondern vor allem wiederverwendbar und zentral verwaltbar sind. Zudem entspricht sie den empfohlenen Vorgehensweisen von Microsoft.
Für einfache, nicht programmatische Anpassungen können Sie zudem den Embed-Webpart verwenden, um Inline-CSS in bestimmten Seitenabschnitten einzufügen, dies ist aber limitiert und nicht für umfangreiche Style-Anpassungen geeignet.
Fazit
Das Hinzufügen von benutzerdefiniertem CSS in SharePoint hängt maßgeblich von der Art der Seite ab. Während klassische Seiten relativ unkompliziert Anpassungen durch eigene CSS-Dateien erlauben, erfordert das moderne SharePoint mit seinem restriktiveren Framework den Einsatz von SPFx-Erweiterungen, um benutzerdefinierte Styles sauber und nachhaltig zu integrieren. Für beide Varianten ist es wichtig, die Auswirkungen auf Performance und Wartbarkeit zu berücksichtigen und möglichst zentralisierte Lösungen zu bevorzugen.