Eine weitreichende Änderung im Vergleich zu allen früheren SharePoint Versionen ist, dass man mithilfe des neuen SharePoint Designers aus einer beliebigen html-Seite eine SharePoint Masterpage generieren kann. So ist es auch für Webdesigner die wenig Erfahrung mit SharePoint haben möglich ein Branding für SharePoint 2013 zu erstellen.
Das Branding basiert auf einer html-Seite, die in eine Masterpage umgewandelt wird. Die html-Seite wird in eine SharePoint Bibliothek geladen und dort in eine aspx-Seite umgewandelt. Die html-Datei bleibt jedoch editierbar und alle Änderungen am Design werden an der html-Datei durchgeführt. Bei jedem Abspeichern der html-Datei wird diese mit der aspx-Datei synchronisiert und somit ist die Masterpage immer auf dem Versionsstand der html-Datei.
In diesem Post wird an einem Beispiel gezeigt, wie eine neue Masterpage erzeugt und eingebunden wird. Als Grundlage dient das Template DESIGN HQ von http://www.csstemplatesfree.org/.
Um das Arbeiten mit den html- und css-Dateien zu erleichtern sollte zunächst die Bibliothek <<SITE_URL>>/_catalogs/masterpage/ als Netzlaufwerk in den Explorer eingebunden werden. Der so eingebundene Ordner verhält sich nun wie ein Ordner im Filesystem, in den die Dateien hochgeladen und danach bequem bearbeitet werden können.
Unter Punkt 4 des Design Managers Edit Master Pages findet sich der entscheidende Link: Convert an HTML file to a SharePoint master page.
Hier wird nun die html-Seite ausgewählt, die als Vorlage für die Masterpage dient. Nach dem Importieren zeigt sich folgendes Bild:
An der Fehlermeldung in der Rubrik Status ist zu erkennen, dass die importierte Seite noch einen Fehler aufweist: „Your master page has one or more HTML <FORM> tags. For your master page to work, remove the tags (but you can leave the content in them)”. Der Fehler wird durch das Entfernen des <FORM> -Tags behoben.
Über den Link Conversion successfull gelangt man zu einer Vorschauansicht der neuen Masterpage.
Über die Schaltfläche Snippets gelangt man zu einer Ansicht, in der vorgefertigte Elemente der Masterpage wie z.B. die Top Navigation, die vertikale Navigation und das Suchfeld an das neue Design angepasst werden können.
Nach dem Anpassen der Snippets können diese einfach an die gewünschten Stellen in der html-Seite kopiert werden. Wichtig ist zu beachten das Snippet PlaceHolderMain, welches den späteren Content repräsentiert, an die richtige Stelle in der Seite zu kopieren.
Wenn das Bearbeiten der Masterpage abgeschlossen ist, muss diese über das Kontextmenü in einer Hauptversion veröffentlicht werden, erst dann kann sie in Schritt 7 des Design Managers (Publish and Apply Design) ausgewählt und verwendet werden.
Ist die neue Masterpage auf einer Seite aktiviert, kann der Inhalt wie gewohnt über PAGE -> Edit bearbeitet werden. Das Endergebnis sieht dann wie folgt aus:
Viel Spaß beim Ausprobieren
Christian
