Ein SharePoint 2013 Design basiert auf hautps\u00e4chlich drei Files:<\/p>\n
- \n
- Das Masterpage-Template \u201e.master\u201c wird von SharePoint vorgegeben und kann durch die beiden anderen Dateien modifiziert werden.<\/li>\n
- Das Color-Design-Template als \u201e.spcolor\u201c-Datei legt die Designfarben f\u00fcr Hintergr\u00fcnde, Schriften, Links, Linien, etc. fest<\/li>\n
- \u00dcber das Font-Template als \u201e.spfont\u201c-Datei k\u00f6nnen eigene Schriftarten verwendet werden (hier gilt ausprobieren, viele \u2013 aber nicht alle \u2013 Schriften k\u00f6nnen je nach Webbrowser im SharePoint dargestellt werden)<\/li>\n<\/ul>\n
Erstellen eines Color-Design-Templates:<\/strong><\/p>\n
Hierf\u00fcr bietet Microsoft im offiziellen Downloadbereich das SharePoint Color Palette Tool v1.00 an:<\/p>\n
https:\/\/www.microsoft.com\/en-us\/download\/details.aspx?id=38182<\/a><\/span><\/p>\n
Laden Sie dieses herunter und installieren Sie es (Das Tool gibt es leider aktuell nur auf Englisch).<\/p>\n
![\"SharePoint](\"https:\/\/www.cojama-hosting.com\/blog\/wp-content\/uploads\/2017\/01\/spcolorpalettetool.png\")
<\/a><\/p>\n\u00d6ffnen Sie das Tool:<\/p>\n
![\"SharePoint](\"https:\/\/www.cojama-hosting.com\/blog\/wp-content\/uploads\/2017\/01\/Standardansicht.png\")
<\/a><\/p>\nIm Bereich Layout k\u00f6nnen Sie die beiden Default-Layouts \u201eoslo\u201c (Navigation oben) oder \u201eseatle\u201c (Navigation links) ausw\u00e4hlen. Als Standardtemplate wird cojama\u2018s Hosted SharePoint 2013 im Layout \u201eseatle\u201c mit der Navigation auf der linken Seitenleiste bereitgestellt.<\/p>\n
Um die Begrifflichkeiten besser zuordnen zu k\u00f6nnen, sollte die Ansicht auf \u201eui groups\u201c ge\u00e4ndert werden:<\/p>\n
![\"Umschalten](\"https:\/\/www.cojama-hosting.com\/blog\/wp-content\/uploads\/2017\/01\/uigroups.png\")
<\/a><\/p>\nIm rechten Hautpfenster sehen Sie eine Vorschau des neuen Designs im aktuellen Farbschema.
\nMit \u00c4nderung des Farbcodes f\u00fcr einen Bereich wird die Vorschau enstprechend aktualsiert:<\/p>\n![\"SharePoint](\"https:\/\/www.cojama-hosting.com\/blog\/wp-content\/uploads\/2017\/01\/design-aendern.png\")
<\/a><\/p>\nSie k\u00f6nnen die Farbcodes aus einer \u00f6ffentlichen Farbtabelle verwenden oder \u00fcber einen Klick auf das Quadrat vor den Codes den \u201eColor Picker\u201c \u00f6ffnen. Hier besteht \u00fcber den \u201eEye Droper\u201c auch die M\u00f6glichkeit den Farbcode aus einer bestehenden Grafik (z.B. Firmenlogo) zu \u00fcbernehmen.<\/p>\n
![\"Farbpalette](\"https:\/\/www.cojama-hosting.com\/blog\/wp-content\/uploads\/2017\/01\/p1.png\")
<\/a><\/p>\nNachdem die Anpassungen abgeschlossen wurden, l\u00e4sst sich das Template \u00fcber File -> Save als \u201e.spcolor\u201c Datei an einem beliebigen Pfad abspeichern.<\/p>\n
![\"Die](\"https:\/\/www.cojama-hosting.com\/blog\/wp-content\/uploads\/2017\/01\/mydesign.png\")
<\/a><\/p>\nBitte beachten Sie, dass es nat\u00fcrlich abh\u00e4ngig von Ihren Anpassungen mehrere Versuche in Anspruch nehmen kann, bis Sie endg\u00fcltig das gew\u00fcnschte Designergebnis erzielen.<\/p>\n
Erstellen eines Font-Templates:<\/strong><\/p>\n
Zum Erstellen des Font-Templates verwenden Sie am Besten eine Kopie der bereits in den Standard-Templates verwendeten \u201e.spfont\u201c-Dateien.<\/p>\n
Hierf\u00fcr navigieren Sie im SharePoint \u00fcber \u00a0
![\"Rad-Symbol\"](\"https:\/\/www.cojama-hosting.com\/blog\/wp-content\/uploads\/2017\/01\/rad.png\")
<\/a> -> Websiteeinstellungen in den Bereich \u201eWeb-Designer-Kataloge -> Durchkomponierte Looks\u201c indem sp\u00e4ter auch Ihr eigenes Designtemplate erstellt wird.<\/p>\n![\"Durchkomponierte](\"https:\/\/www.cojama-hosting.com\/blog\/wp-content\/uploads\/2017\/01\/p2.png\")
<\/a><\/p>\nSpeichern Sie eine lokale Kopie der \u201e.spfont\u201c-Datei und \u00f6ffne Sie diese mit einem Texeditor.<\/p>\n
![\"Bearbeiten](\"https:\/\/www.cojama-hosting.com\/blog\/wp-content\/uploads\/2017\/01\/font.png\")
<\/a><\/p>\nInnerhalb der Datei k\u00f6nnen Sie sich an den Bereichsbezeichnungen orientieren.<\/p>\n
Im europ\u00e4ischen Sprachraum sollten Browser standardm\u00e4\u00dfig die in der Zeile <s:latin> festgelegten Schriftart verwenden.<\/p>\n
<\/p>\n
Speichern Sie die Datei als \u201e.spfont\u201c-Datei ab.<\/p>\n
(Achten Sie bitte darauf, dass Sie entweder lokal oder unter einem alternativen Dateinamen speichern um das Standardtemplate am SharePoint nicht zu \u00fcberschreiben!)<\/p>\n
Uploaden des eigenen Designs:<\/strong><\/p>\n
\u00a0<\/strong>Navigieren Sie innerhalb des SharePoints \u00fcber die URL-Zeile zu
\nhttps:\/\/IhreSiteUrl<\/em><\/strong>.<\/em>orga-cloud.de\/_catalogs\/theme\/15\/<\/a> um zum Designkatalog\/15\u00a0 zu gelangen.<\/p>\nHier uploaden Sie Ihre \u201e.spfont\u201c und \u201e.spcolor\u201c-Dateien.<\/p>\n
![\"mydesign\"](\"https:\/\/www.cojama-hosting.com\/blog\/wp-content\/uploads\/2017\/01\/mydesignisin.png\")
<\/a><\/p>\nNachdem die Dateien im SharePoint abgelegt wurden navigieren Sie wieder in den Bereich \u201eWebsiteeinstellungen -> Web-Designer-Kataloge -> Durchkomponierte Looks\u201c<\/p>\n
![\"Durchkomponierte](\"https:\/\/www.cojama-hosting.com\/blog\/wp-content\/uploads\/2017\/01\/durchkomponierte-Looks.png\")
<\/a><\/p>\nErstellen des neuen Designs:<\/strong><\/p>\n
![\"Liste](\"https:\/\/www.cojama-hosting.com\/blog\/wp-content\/uploads\/2017\/01\/looks.png\")
<\/a><\/p>\nEntweder \u00fcber \u201e+ Neues Element\u201c:<\/strong> (f\u00fcr einzelne Desings)<\/p>\n
![\"Neues](\"https:\/\/www.cojama-hosting.com\/blog\/wp-content\/uploads\/2017\/01\/mydesign_new.png\")
<\/a><\/p>\n* Beschreibungen sind optional und ersetzen in der Designliste die einzelnen Pfade<\/p>\n
oder durch direkte Bearbeitung in der QuickEdit-Ansicht<\/strong> \u00fcber \u201ebearbeiten<\/strong>\u201c:
\n(besser geeignet beim Erstellen mehrerer Designvorlagen)<\/em><\/p>\nUm in der Quick-Edit Ansicht speichern zu k\u00f6nnen muss zuvor eine weitere Spalte \u201eTitel\u201c hinzugef\u00fcgt werden. -> \u201e\u2026\u201c\u00a0 -> Anischt \u00e4ndern -> Titel anhaken und an Position 1 setzten.<\/p>\n
![\"Titelspalte](\"https:\/\/www.cojama-hosting.com\/blog\/wp-content\/uploads\/2017\/01\/titel-anhaken.png\")
<\/a><\/p>\nAnsonsten erscheint beim Speichern des Datensatzes die folgende Fehlermeldung:<\/p>\n
![\"Fehlermeldung\"](\"https:\/\/www.cojama-hosting.com\/blog\/wp-content\/uploads\/2017\/01\/leider.png\")
<\/a><\/p>\nNachdem die Spalte Titel hinzugef\u00fcgt wurde k\u00f6nnen Zeilen in der QuickEdit-Anischt einfach kopiert und darunter eingef\u00fcgt werden. Nun m\u00fcssen nur noch die einzelnen Dateipfade angepasst werden.<\/p>\n
![\"Eigenes](\"https:\/\/www.cojama-hosting.com\/blog\/wp-content\/uploads\/2017\/01\/mydesign_newwork.png\")
<\/a><\/p>\n![\"Eigenes](\"https:\/\/www.cojama-hosting.com\/blog\/wp-content\/uploads\/2017\/01\/mydesignishere.png\")
<\/a><\/p>\n