Mit SharePoint-Designs zum eigenen Stil
Veröffentlichung des Originalartikels: 30.10.2012
Lionel Robinson ist ein Program Manager im SharePoint Engineering Team mit Schwerpunkt Benutzerumgebung.
Designs in SharePoint 2013 vereinfachen ungemein eine umfassende Veränderung des Aussehens Ihrer Website Ihren eigenen Vorstellungen entsprechend. Andererseits ist das neue Aussehen von SharePoint-Websites richtig gut, warum also sollten Sie es ändern? Hier erst einmal eine persönliche Erfahrung:
Nach der Geburt unserer Zwillinge passte ich buchstäblich nicht mehr in den Fahrersitz meines Autos, nachdem beide Kindersitze eingebaut waren. Und selbst im Beifahrersitz berührten meine Knie in angewinkelter Position das Armaturenbrett. Zeit für ein größeres Auto. Meine Frau und ich sind mit Minivans aufgewachsen, und zu unserem Glück haben wir das gewünschte Modell in der exakt gewünschten Farbe gefunden. Es bietet Platz für die ganze Familie und noch jede Menge Stauraum. Hurra!
Vielleicht war es nur ein Psychotrick, doch ab diesem Tag schien es, als würde jeder Dritte auf der Straße dasselbe Auto fahren: unseren hellblau-metallic-farbenen Honda Odyssey. Mehr als einmal fand ich mich auf einem großen Parkplatz wieder, den Öffnen-Knopf auf dem Schlüsselanhänger wie wild drückend, bis ich endlich merkte, dass mein Auto tatsächlich zwei Reihen weiter dahinter stand.
Welche Möglichkeiten haben Sie, damit Ihr Auto wirklich Ihres ist? Der einfachste Weg ist das Anbringen eines Autoaufklebers oder Abziehbilds am Heck. Das andere Ende des Spektrums ist, jemanden zu beauftragen, Ihr Auto nach Herzenslust umzugestalten. Oder es tapfer selbst zu versuchen.
Kunden haben uns von demselben Problem mit aktuellen SharePoint-Websites berichtet. Wenn jeder dieselben gebotenen Vorlagen nutzt, kann die ihre in einem Meer auffallend ähnlicher Websites untergehen. Sie können mit der Ähnlichkeit leben und hoffen, dass Sie die Websites aufgrund kleinerer Unterschiede (Autoaufkleber) auseinanderhalten können, oder Sie müssen mit CSS und HTML arbeiten, um Ihre Website anzupassen, was aufwendig und zeitraubend sein kann.
Dies sind die Probleme, die wir mit der neuen SharePoint-Designumgebung in den Griff bekommen wollen. In dieser Umgebung können Sie Ihre Website binnen Minuten anpassen, indem Sie an vier grundlegenden Hebeln ansetzen: Farben, Websitelayout, Schriftarten und Hintergrundbild. Durch entsprechende Änderungen können Sie für ein Aussehen sorgen, das tatsächlich einzigartig ist.
Schnelle exemplarische Vorgehensweise
- Klicken Sie unter Erste Schritte mit Ihrer Website auf die Kachel Was entspricht Ihrem Stil? . (Wenn die Kacheln ausgeblendet sind, können Sie auch im Einstellungsmenü auf Aussehen ändern klicken oder unter der Überschrift Aussehen und Verhalten im Abschnitt Websiteeinstellungen Aussehen ändernauswählen.)
- Auf der ersten Seite befinden sich einige Ausgangspunkte, die wir zusammengestellt haben, um Ihnen die Optionen für das Aussehen und Verhalten Ihrer Website zu veranschaulichen. Wählen Sie als Erstes eine dieser Optionen aus.
- Nun fängt der Spaß an. Sie können bei einem beliebige der vier zuvor genannten Hebel (Hintergrund, Layout, Farben und Schriftarten) ansetzen und unmittelbar eine Vorschau anzeigen. Ziehen Sie Ihr eigenes Hintergrundbild auf das Rechteck in der linken oberen Ecke, und wählen Sie eine passende Farbpalette, das gewünschte Seitenlayout und das Schriftartenschema Ihnen Vorstellungen entsprechend aus.
- Klicken Sie, nachdem Sie die gewünschte Optionskombination ausgewählt haben, (rechts oben) auf Testen, um eine Vorschau auf Ihrer eigenen Website anzuzeigen.
- Hier kommt die Magie zum Tragen! Wir erstellen eine Kopie des CSS Ihrer Website (der Dateien, mit denen das Aussehen und die Formatierung bestimmt werden), und ändern diese in die neuen Farben und Bilder. Sie können diese Einstellung anschließend beibehalten oder eine andere Variante testen.
Haben Sie eine bestimmte Farbe oder Schriftart im Sinn?
Wir haben verschiedene Farbpaletten und Schriftarten hinzugefügt, die uns gefallen. Sie können aber stets eigene hinzufügen. Alles, was Sie brauchen, ist Ihr bevorzugter Texteditor. Ab jetzt wird es etwas technischer (und wenn Sie mit Designs in SharePoint 2010 vertraut sind, haben Sie einen Vorsprung). Der Hauptunterschied ist, dass wir nicht mehr mit dem Dateiformat THMX arbeiten. Wir haben eine Sammlung neuer und einfacher XML-Formate entwickelt, um Designoptionen zu beschreiben. SPColor-Dateien dienen zum Beschreiben der Farbpalette, SPFont-Dateien zum Beschreiben des Schriftartenschemas. Die einfachste Möglichkeit zum Erstellen eigener Paletten und Farbschemas ist, bei den Standardeinstellungen Ihrer Teamwebsite zu beginnen. Navigieren Sie zur Stammwebsite der Websitesammlung, klicken Sie im Menü Einstellungen auf Websiteeinstellungen und anschließend auf Designkatalog. Sie finden die Farbpaletten und Schriftartenschemas im Ordner 15.
Farbpaletten
Jede SPColor-Datei enthält einfachen XML-Code zur Definition des Farbwerts (im Hexadezimalformat) aller verfügbaren Farbrichtungen. Wenn Sie die Farbrichtung kennen, die Sie ändern möchten, geben Sie den neuen Wert ein und speichern eine Kopie der Datei im Ordner des Designkatalogs (wenn die Versionsverwaltung oder Veröffentlichung aktiviert ist, müssen Sie die Datei einchecken und veröffentlichen). Ihre neue Palette steht anschließend in der Designumgebung in der Farbauswahl zur Verfügung (Schritt 3, siehe oben).
Hier sehen Sie einen Codeabschnitt einer SPColor-Datei. Neu in dieser Version ist die Möglichkeit, neben der Farbe auch Deckkraftwerte anzugeben. Hierzu dient ein achtstelliger Hexadezimalwert, dessen erste beiden Stellen die Deckkraft und die folgenden herkömmlichen sechs Stellen Rot-, Grün- und Blauwerte darstellen.
<?xml version="1.0" encoding="utf-8"?>
<s:colorPalette isInverted="false" previewSlot1="BackgroundOverlay" previewSlot2="BodyText" previewSlot3="AccentText" xmlns:s="https://schemas.microsoft.com/sharepoint/">
<s:color name="BodyText" value="444444" />
<s:color name="SubtleBodyText" value="777777" />
<s:color name="StrongBodyText" value="262626" />
<s:color name="DisabledText" value="B1B1B1" />
<s:color name="SiteTitle" value="262626" />
<s:color name="WebPartHeading" value="444444" />
<s:color name="ErrorText" value="BF0000" />
<s:color name="AccentText" value="0072C6" />
<s:color name="SearchURL" value="338200" />
<s:color name="Hyperlink" value="0072C6" />
<s:color name="BackgroundOverlay" value="D8FFFFFF" />
...
</s:colorPalette>
Schriftartenschemas
Mithilfe von Schriftarten können Sie eine Website persönlicher gestalten. Eine der interessantesten Eigenschaften von Designs in SharePoint ist die Unterstützung von Webschriftarten. Zuvor hatten Sie die Wahl zwischen denselben alten 8-10 websicheren Schriftarten (die bekanntermaßen standardmäßig auf nahezu allen Geräten installiert sind, z. B. Arial, Times New Roman und Georgia). Wenn Sie mit Webschriftarten arbeiten, können Sie aus der großen Vielfalt von im Internet verfügbaren Schriftarten eine Auswahl treffen, woraufhin die benötigten Dateien von Webbrowsern zusammen mit dem Rest der Seite heruntergeladen werden.
Ähnlich wie die SPColor-Datei für Farbpaletten definiert eine SPFont-Datei die Schriftart, die für jede der verfügbaren Schriftartgruppen verwendet wird. Der einfachste Weg zum Erstellen eines benutzerdefinierten Schriftartschemas ist, bei einem bereits verfügbaren anzusetzen und die gewünschten Änderungen vorzunehmen. SharePoint unterstützt viele Sprachen und Skripts. Gleiches gilt für Schriftartendesigns. Für jede Schriftartengruppen müssen Sie die Schriftart definieren, die im jeweiligen Skript verwendet werden soll. Bei websicheren Schriftarten müssen Sie nur den Namen im Attribut "typeface" für jede Schriftartengruppe hinzufügen. Wenn Sie eine Webschriftart angeben, müssen Sie die URL zu Ihren Webschriftartendateien in vier Schriftartenformaten (zur Unterstützung mehrerer Browser) sowie ein kleines und ein großes Miniaturbild bereitstellen, das zum Rendern der Schriftartennamen in der Schriftartenauswahl verwendet wird (siehe Schritt 3 weiter oben).
<?xml version="1.0" encoding="utf-8"?>
<s:fontScheme name="Impact" previewSlot1="title" previewSlot2="body" xmlns:s="https://schemas.microsoft.com/sharepoint/">
<s:fontSlots>
<s:fontSlot name="title">
<s:latin typeface="Impact"
eotsrc="https://blogs.msdn.com/_layouts/15/fonts/Impact.eot"
woffsrc="https://blogs.msdn.com/_layouts/15/fonts/Impact.woff"
ttfsrc="https://blogs.msdn.com/_layouts/15/fonts/Impact.ttf"
svgsrc="https://blogs.msdn.com/_layouts/15/fonts/Impact.svg"
largeimgsrc="https://blogs.msdn.com/_layouts/15/fonts/ImpactLarge.png"
smallimgsrc="https://blogs.msdn.com/_layouts/15/fonts/ImpactSmall.png" />
...
<s:font script="Arab" typeface="Segoe UI Light" />
<s:font script="Deva" typeface="Nirmala UI" />
<s:font script="Grek" typeface="Segoe UI Light" />
...
</s:fontSlot>
<s:fontSlot name="navigation">
<s:latin typeface="Segoe UI" />
...
<s:font script="Arab" typeface="Segoe UI" />
<s:font script="Deva" typeface="Nirmala UI" />
<s:font script="Grek" typeface="Segoe UI" />
...
</s:fontSlot>
...
</s:fontSlots>
</s:fontScheme>
Zusammengesetzte Designs
"Zusammengesetzte Designs" sind die Ausgangspunkte, die im ersten Schritt der Designumgebung gezeigt werden. Sie können neue zusammengesetzte Designs hinzufügen, die Ihre benutzerdefinierten Farbpaletten und Schriftartenschemas verwenden. Dies ist eine gute Möglichkeit, eine Reihe von Designs zu speichern, die Sie anschließend jederzeit zuweisen können. Die Liste zusammengesetzter Designs finden Sie im Bereich Websiteeinstellungen unter Web-Designer-Kataloge. Sie können die vorhandene Gruppe zusammengesetzter Designs verwalten und neue hinzufügen. Zum Hinzufügen müssen Sie ein neues Listenelement hinzufügen und einen Namen, Titel und die URLs zur Gestaltungsvorlage, eine SPColor-Datei, ein Hintergrundbild (optional) und eine SPFont-Datei (optional) eingeben. Nach Hinzufügen eines Listenelement wird eine Vorschau Ihres neuen zusammengesetzten Designs als Ausgangspunkt auf der Seite Aussehen ändern hinzugefügt.
Lassen Sie Ihrer Kreativität freien Lauf! Versehen Sie Ihre Website mit einem tollen Look, der die besondere Persönlichkeit Ihres Teams zum Ausdruck bringt. Wenn ich nur dasselbe bei meinem Minivan tun könnte…
Es handelt sich hierbei um einen übersetzten Blogbeitrag. Sie finden den Originalartikel unter Show Off Your Style with SharePoint Theming