Hier einige Tipps, welche helfen sollen, wenn man SharePoint Server ab der Version 2010 optisch anpassen möchte. Die Tipps sind primär für SharePoint Server 2010, sollten aber auch für SharePoint Server 2013 Gültigkeit haben. Dort allerdings gibt es mit dem neuem Designer Manager in der Enterprise Version eine völlig neue Möglichkeit, welche viel Arbeit erspart bzw. erleichtert. Diese Möglichkeit betrachte ich hier aber nicht.

Tipp 1: Niemals Originaldateien bearbeiten

Es gibt keinen Grund, Originaldateien zu bearbeiten. Das Arbeiten mit Originaldateien wird nicht unterstützt und kann im Fall eines Upgrade zu bösen Fehlern führen. Erstelle immer eine Kopie der Datei und arbeite mit dieser. CSS Anpassungen, welche schon vorhandene Klassen überschreiben, werden in eigene CSS Dateien ausgelagert. Diese CSS Dateien werden dann entsprechend eingebunden. Aus verschiedenen Gründen sollten die CSS Dateien sich immer im Ordner

SPUrl:~sitecollection/Style Library

Tipp 2: Die richtige CSS Datei finden

SharePoint verwendet mehrere CSS Dateien, welche sich u.U. untereinander ergänzen oder auch nur in ganz bestimmten Konstellationen genutzt werden. Die Tabelle unten zeigt die wichtigsten Dateien und deren Speicherorte. Der Name lässt auch darauf schließen, wann die Datei verwendet wird. Natürlich dient diese Information nur zum Ansehen, nicht zum Bearbeiten der Dateien.

Dateiname	Speicherort (C:\Programme\Gemeinsame Dateien\Microsoft Shared\Web Server Extensions\14)
Search.css	TEMPLATE\LAYOUTS\{Gebietsschema-ID}\STYLES\Themable\Search.css
Wiki.css	TEMPLATE\LAYOUTS\{Gebietsschema-ID}\STYLES\Themable\Wiki.css
Corev4.css	TEMPLATE\LAYOUTS\{Gebietsschema-ID}\STYLES\Themable\Corev4.css
Controls.css	/Style Library/{Sprache-Kultur}/Themable/Core Styles/Controls.css
Page-Layouts-21.css	/Style Library/{Sprache-Kultur}/Themable/Core Styles/Page-Layouts-21.css
Nightandday.css	/Style Library/{Sprache-Kultur}/Themable/Core Styles/Nighandday.css

{Sprache-Kultur} ist ein Platzhalter für Sprache und Kultur, z. B. de-de. {Gebietsschema-ID} ist ein weiterer Platzhalter für die Gebietsschema-ID, z. B. ist 1031 die Gebietsschema-ID für Deutsch-Deutschland, 1033 für Englisch-US.

Tipp 3: CSS Dateien in Masterpages einbinden

Mit der Variable SPUrl:~sitecollection hat man einen Verweis auf die aktuelle Websitesammlung. Dies ist besonders praktisch, wenn man an vielen Stellen gleichzeitig arbeitet. Es reduziert die Wahrscheinlichkeit von Fehlern drastisch. In meinem Beispiel binde ich die Datei custom.css ein. Da diese Anpassungen enthält, welche SharePoint interne CSS Klassen überschreiben, muss meine CSS nach der core4.css geladen werden. Eingebunden wird die Datei in den Header der Masterpage.

Tipp 4: Die richtige Masterdatei finden

Ähnlich wie CSS Dateien gibt es abgestimmte Masterseiten. Die Tabelle unten zeigt, welche Masterpage für welchen Einsatz verwendet wird. Demensprechend sollten dann auch die eigenen Masterpages abgeleitet werden. Am häufigsten werden dies wohl die minimal.master und nightandday.master sein.

Name der Masterdatei	Beschreibung			Nutzung in SharePoint
v4.master	Wird für Inhalts- und Administrationsseiten benutzt. Nicht geeignet für Seiten auf Basis der Veröffentlichungsinfrastruktur.			Team Sites Homepage, Listen – und Bibliotheken Seiten, Seite für die Websiteeinstellungen
minimal.master		Masterpage, welche die minimalsten Anforderungen enthält, die eine Masterpage benötigt um in SharePoint zu arbeiten.	Suchcenter
nightandday.master		Für Seiten, welche die Veröffentlichungsinfrastruktur von SharePoint Server nutzen.	Alle Seiten mit Veröffentlichungsinfrastruktur.
default.master		Nur für Sites genutzt, welche noch im SharePoint 2007 Modul laufen und nicht auf SharePoint migriert wurden.	SharePoint 2007 Sites vor dem visual upgrade.

Tipp 5: Die richtige CSS Klassen finden

In SharePoint mit seiner großen Anzahl an verwendeten CSS Klassen ist es nicht ganz einfach die richtige zu finden. Verschiedene Wege führen hier zum Ziel.

Nachschlagen

Die Microsoft MVP Heather Solomon hat auf ihrer Website viele Klassen zusammengetragen und erläutert. Sehr wichtig und sehr interessant: http://sharepointexperience.com/csschart/csschart.html

Selber finden mit Microsoft Explorer Bordmitteln

Am einfachsten lassen sich eine bzw. mehrere verwendete CSS Klassen finden, indem mithilfe der integrierten Microsoft Internet Explorer Entwicklertools diese gesucht werden. Dazu ruft man die gewünschte SharePoint Seite auf und drückt dann auf F12. Im sich öffnenden Fenster klickt man auf das Pfeil Symbol – Element auswählen und markiert dann den gewünschten Bereich. In den Entwicklertools werden dann die entsprechenden Klassen im rechten Fenster angezeigt. Wer möchte, kann dort auch direkt manipulieren, um eine spätere Auswirkung zu testen.

Arbeiten im SharePoint Designer

Im SharePoint Designer ist es möglich, einen Code Hyperlink zu klicken, wobei sich, sofern die Klasse vergeben ist, die Datei in der sich diese Klasse befindet, öffnet. Immer daran denken, wenn es sich um eine SharePoint interne Datei handelt, diese nicht editieren. Um den Link zu folgen auf diesen zeigen, die Shifetaste gedrück halten und klicken.