Erstellen einer eigenen Designvorlage für SharePoint 2013
Wie beim Vorgänger SharePoint 2010 besteht auch in SharePoint 2013 die Möglichkeit eigene Designtemplates zu erstellen und diese im SharePoint einzubinden. Allerdings hat sich bei der Vorgehensweise einiges geändert.
Erstellen eines eigenen SharePoint-Designs:
Ein SharePoint 2013 Design basiert auf hautpsächlich drei Files:
- Das Masterpage-Template „.master“ wird von SharePoint vorgegeben und kann durch die beiden anderen Dateien modifiziert werden.
- Das Color-Design-Template als „.spcolor“-Datei legt die Designfarben für Hintergründe, Schriften, Links, Linien, etc. fest
- Über das Font-Template als „.spfont“-Datei können eigene Schriftarten verwendet werden (hier gilt ausprobieren, viele – aber nicht alle – Schriften können je nach Webbrowser im SharePoint dargestellt werden)
Erstellen eines Color-Design-Templates:
Hierfür bietet Microsoft im offiziellen Downloadbereich das SharePoint Color Palette Tool v1.00 an:
https://www.microsoft.com/en-us/download/details.aspx?id=38182
Laden Sie dieses herunter und installieren Sie es (Das Tool gibt es leider aktuell nur auf Englisch).
Öffnen Sie das Tool:
Im Bereich Layout können Sie die beiden Default-Layouts „oslo“ (Navigation oben) oder „seatle“ (Navigation links) auswählen. Als Standardtemplate wird cojama‘s Hosted SharePoint 2013 im Layout „seatle“ mit der Navigation auf der linken Seitenleiste bereitgestellt.
Um die Begrifflichkeiten besser zuordnen zu können, sollte die Ansicht auf „ui groups“ geändert werden:
Im rechten Hautpfenster sehen Sie eine Vorschau des neuen Designs im aktuellen Farbschema.
Mit Änderung des Farbcodes für einen Bereich wird die Vorschau enstprechend aktualsiert:
Sie können die Farbcodes aus einer öffentlichen Farbtabelle verwenden oder über einen Klick auf das Quadrat vor den Codes den „Color Picker“ öffnen. Hier besteht über den „Eye Droper“ auch die Möglichkeit den Farbcode aus einer bestehenden Grafik (z.B. Firmenlogo) zu übernehmen.
Nachdem die Anpassungen abgeschlossen wurden, lässt sich das Template über File -> Save als „.spcolor“ Datei an einem beliebigen Pfad abspeichern.
Bitte beachten Sie, dass es natürlich abhängig von Ihren Anpassungen mehrere Versuche in Anspruch nehmen kann, bis Sie endgültig das gewünschte Designergebnis erzielen.
Erstellen eines Font-Templates:
Zum Erstellen des Font-Templates verwenden Sie am Besten eine Kopie der bereits in den Standard-Templates verwendeten „.spfont“-Dateien.
Hierfür navigieren Sie im SharePoint über 
-> Websiteeinstellungen in den Bereich „Web-Designer-Kataloge -> Durchkomponierte Looks“ indem später auch Ihr eigenes Designtemplate erstellt wird.
Speichern Sie eine lokale Kopie der „.spfont“-Datei und öffne Sie diese mit einem Texeditor.
Innerhalb der Datei können Sie sich an den Bereichsbezeichnungen orientieren.
Im europäischen Sprachraum sollten Browser standardmäßig die in der Zeile <s:latin> festgelegten Schriftart verwenden.
Speichern Sie die Datei als „.spfont“-Datei ab.
(Achten Sie bitte darauf, dass Sie entweder lokal oder unter einem alternativen Dateinamen speichern um das Standardtemplate am SharePoint nicht zu überschreiben!)
Uploaden des eigenen Designs:
Navigieren Sie innerhalb des SharePoints über die URL-Zeile zu
https://IhreSiteUrl.orga-cloud.de/_catalogs/theme/15/ um zum Designkatalog/15 zu gelangen.
Hier uploaden Sie Ihre „.spfont“ und „.spcolor“-Dateien.
Nachdem die Dateien im SharePoint abgelegt wurden navigieren Sie wieder in den Bereich „Websiteeinstellungen -> Web-Designer-Kataloge -> Durchkomponierte Looks“
Erstellen des neuen Designs:
Entweder über „+ Neues Element“: (für einzelne Desings)
* Beschreibungen sind optional und ersetzen in der Designliste die einzelnen Pfade
oder durch direkte Bearbeitung in der QuickEdit-Ansicht über „bearbeiten“:
(besser geeignet beim Erstellen mehrerer Designvorlagen)
Um in der Quick-Edit Ansicht speichern zu können muss zuvor eine weitere Spalte „Titel“ hinzugefügt werden. -> „…“ -> Anischt ändern -> Titel anhaken und an Position 1 setzten.
Ansonsten erscheint beim Speichern des Datensatzes die folgende Fehlermeldung:
Nachdem die Spalte Titel hinzugefügt wurde können Zeilen in der QuickEdit-Anischt einfach kopiert und darunter eingefügt werden. Nun müssen nur noch die einzelnen Dateipfade angepasst werden.
Auswählen des eigenen Designs als Vorlage:
Nun kann das eigene Design im Bereich Websiteeinstellungen -> Aussehen ändern als Vorlage verwendet werden.
Wie üblich lässt sich über „testen“ nochmal eine Vorschau des neuen Designs anzeigen, bevor die Änderungen endgültig angewendet werden.