Beiträge

Eingenes SP Design erstellen

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).

SharePoint Color Palette Tool

Öffnen Sie das Tool:

SharePoint Color Palette 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:

Umschalten auf die uigroups Anischt

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:

SharePoint Color Palette Tool Vorschau

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.

Farbpalette und eye picker

Nachdem die Anpassungen abgeschlossen wurden, lässt sich das Template über File -> Save als „.spcolor“ Datei an einem beliebigen Pfad abspeichern.

Die Designdatei ".spcolor"

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   Rad-Symbol -> Websiteeinstellungen in den Bereich „Web-Designer-Kataloge -> Durchkomponierte Looks“ indem später auch Ihr eigenes Designtemplate erstellt wird.

Durchkomponierte Looks

Speichern Sie eine lokale Kopie der „.spfont“-Datei und öffne Sie diese mit einem Texeditor.

Bearbeiten der .spfont Datei

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.

mydesign

Nachdem die Dateien im SharePoint abgelegt wurden navigieren Sie wieder in den Bereich „Websiteeinstellungen -> Web-Designer-Kataloge -> Durchkomponierte Looks“

Durchkomponierte Looks

Erstellen des neuen Designs:

Liste der Designvorlagen

Entweder über „+ Neues Element“: (für einzelne Desings)

Neues Design erstellen

* 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.

Titelspalte anhaken

Ansonsten erscheint beim Speichern des Datensatzes die folgende Fehlermeldung:

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.

Eigenes Design erstellen

Auswählen des eigenen Designs als Vorlage:

Nun kann das eigene Design im Bereich Websiteeinstellungen -> Aussehen ändern als Vorlage verwendet werden.

Eigenes Design auswählen

Wie üblich lässt sich über „testen“ nochmal eine Vorschau des neuen Designs anzeigen, bevor die Änderungen endgültig angewendet werden.