Einbindung und Anwendung von CSS in SharePoint 2013
Die Möglichkeiten zur Einbindung von eigenen Stylesheets wurde in SharePoint 2013 grundlegend erweitert. Microsoft ermöglicht nun die Einbindung direkt über die SharePoint Benutzerobefläche. Im folgenden Beitrag beschreibe ich verschiedene Alternativen, wie CSS Dateien in SharePoint zunächst erstellt und dann eingebunden werden können.
Erstellung einer CSS Datei
Bevor aber die Einbindung erfolgen kann, muss erst ein eine CSS Datei erstellt werden. Die Erstellung kann in wenigen Schritten mit dem SharePoint Designer 2013 durchgeführt werden. Dafür muss die Webseitensammlung im SharePoint Designer geöffnet werden. Ist der Aufruf erfolgt, findet sich im unteren linken Bereich der Menüpunkt „Alle Dateien“, der die FileStruktur der Webseitensammlung anzeigt. Generell kann die CSS Datei an den verschiedensten Orten platziert werden. Es empfiehlt sich allerdings folgender Pfad (Warum wird im Verlauf deutlich) : „SiteCollection“/Style Libary. An dieser Stelle kann über den Punkt „Datei“ eine neue CSS Datei erzeugt werden.
Nachdem der Titel geändert ist, wird über „Datei bearbeiten“ der Quellcode hinzugefügt.
Im folgenden werde ich ein anhand eines Beispiels eine mögliche Vorgehensweise einer CSS Anpassung in SharePoint erläutern. Eine wesentliche Veränderung von SharePoint 2013 zu den Vorgängerversionen ist die Erweiterung um „Newsfeed“ und des Clouddienstes „OneDrive“. Diese Dienste werden standardmäßig im Header von SharePoint angezeigt. Oftmals sind Unternehmen aber noch skeptisch gegenüber Cloud und Social Media Komponeneten und wünschen, die Ausblendung der Links „Newsfeed“, „OneDrive“ und „Websites“.
Um dies mit CSS zu realisieren, müssen zunächst die Details analysiert werden. Ich verwende hierfür das Entwicklertool im Internet Explorer.
Im Entwicklertool kann nun die Klasse oder ID herausgefunden werden, welche verantworlich fürdie Darstellung der Links ist. In unserem Beispiel ist es die Klasse „ms-core-deltaSuiteLinks“. Nun kann mit wenigen Zeilen die Klasse „unsichtbar gemacht werden“
.ms-core-deltaSuiteLinks{
visibility:hidden;
}
Nachdem diese Zeilen in das Stylesheet eingetragen wurden, können die Änderungen gespeichert und die Datei eingecheckt werden. Hinweis: Nach dem speichern ist die Datei zunächst ausgecheckt. Die Änderungen greifen selbstverstänlich noch nicht, da wir noch von keiner Stelle auf dieses Stylesheet referenzieren. Im nächsten Schritt zeige ich deshalb wie das CSS File nun eingebunden werden kann.
Einbindung von CSS in SharePoint
Zu Beginn möchte ich die klassische Methode mittels Referenzierung innerhalb der MasterPage vorstellen. Hierfür muss die verwendete Masterpage bearbeitet („seattle“ oder „oslo“) und der individuelle Stylesheet als Referenz hinzugefügt werden. Die Anpassungen gelten dann für alle SharePoint Seiten auf denen die Masterpage verwendet wird.
Dazu muss die entsprechende SiteCollection wiederum mit dem SharePoint Designer geöffnet werden und folgender Pfad gefunden werden: „SiteCollection“/-catalogs/masterpage. Hier finden sich die Masterpages „seattle“ und „oslo“. Die Original Dateien sollten allerdings nicht verändert werden, sondern eine Kopie zur Bearbeitung erstellt werden. In meinem Beispiel habe ich den Seattle Master kopiert und in „MySeattle“ umbenannt.
In Bearbeitungsmodus sieht man nun im Header die Referenzierung auf die Standard CSS Datei „corev15.css“.
Unterhalb dieser Referenzierung sollte nun unser Stylesheet eingebunden werden. Wichtig ist das es tatsächlich in der Zeile darunter referenziert wird, da ansonsten das ursprüngliche Stylesheet unserer Änderungen überschreiben würde.
Nach dem speichern der Änderungen muss nun die Masterpage „MySeattle“ als Standardgestaltungsvorlage definiert werden. Da wir eine Kopie erstellt haben ist zunächst weiterhin der ursprüngliche Seattle Master die Standardgestaltungsvorlage. Mit einem Rechtsklick auf die „MySeattle“ wird die Auswahl „Als Standardvorlage festlegen“ angeboten.
Nach dem festlegen des „MySeattle“ als Standardvorlage sind die „unerwünschten“ Links verborgen.
Das gewünschte Ergebnis ist erreicht und die Links ausgeblendet. Ab SharePoint 2013 stellt Microsoft allerdings eine weitere Alternative zur Bereitstellung einer eigenen CSS Datei bereit. Ist der Veröffentlichungsmodus aktiviert, existiert in den Webseiteneinstellungen der Menüpunkt „Gestaltungsvorlagen“. Innerhalb dieses Menüpunktes kann im Bereich „Alternative URL für CSS-Datei“ über das Feld „Geben Sie eine CSS-Datei an, die von dieser Website und allen Websites verwendet werden soll, die von ihr erben“ eine eigene CSS-Datei direkt aus der Benutzeroberfläche referenziert werden.
Da wir die unsere CSS-Datei „MyStyle.css“ in der Style Libary abgelegt haben, steht diese auch direkt zur Auswahl bereit. Unter anderem aus diesem Grund empfiehlt es sich, CSS-Dateien generell in diesem Ordner abzulegen.
Analog zur vorherigen Lösung sind nach der Auswahl nun ebenfalls die Links ausgeblendet.
Fazit
Durch die neue Möglichkeit zur Einbindung von CSS in SharePoint 2013 hat Microsoft für Erleichterung gesorgt und damit den Einstieg in das individuelle Customizing deutlich vereinfacht. Insbesondere für User ohne Entwicklerhintergrund ist die Hemmschwelle gesunken das Design an die eigenen Wünsche und Anforderungen anzupassen.
