Arbeiten mit dem SharePoint-Designmodul

  • Article

Veröffentlichung des Originalartikels: 10.04.2011

Hallo, hier ist wieder Kolby. Da wir uns der Veröffentlichung von SharePoint 2010 nähern, freue ich mich immer mehr auf unser Produkt und die neue Funktionalität, die wir in 2010 hinzugefügt haben. Insbesondere die Designfunktionen sind hervorzuheben, um die sich das SharePoint-Team bei dieser Version besonders gekümmert hat. Letzte Woche habe ich gelernt, wie ich eine CSS-Datei für eine Gestaltungsvorlage in SharePoint Designer 2010 einrichte, und da dachte ich: „Das sollten alle kennen lernen!“

Welche Möglichkeiten gibt es beim Design?  

Das Designmodul arbeitet mit CSS-Dateien und kann folgende Aktionen vornehmen (Tokennamen sind kursiv geschrieben):

  • Ersetzen von Farben (z. B. für einen Hintergrund oder eine Schriftfarbe) – ReplaceColor
  • Ersetzen von Schriftarten – ReplaceFont
  • Erneutes Einfärben von Bildern (mithilfe einer der drei Methoden: Einfärben (Tint), Mischen (Blend) und Ausfüllen (Fill)) – RecolorImage

Sie können an der Benutzeroberfläche (UI) des Browsers ein vorgefertigtes Websitedesign auswählen oder mit SharePoint Server (SPS) ein neues erstellen, indem Sie 12 Farben und 2 Schriftarten auswählen. Diese Werte sind in einer THMX-Datei gespeichert, ein Standard, der auch in Microsoft Office verwendet wird. Sie können ein Design auch in Microsoft PowerPoint erstellen und als THMX-Datei speichern, um es in SharePoint zu nutzen. Die THMX-Dateien sind im Designkatalog Ihrer Stammwebsite gespeichert. Sie können Designs auch via SPD oder über den Browser hinzufügen: Websiteeinstellungen > Designkatalog. Die zwölf Designfarben werden durch folgende Tokens dargestellt:

  • Dark1, Dark2
  • Light1, Light2
  • Accent1, Accent2, Accent3, Accent4, Accent5, Accent6
  • Hyperlink
  • Followed Hyperlink

Das Designmodul arbeitet mit diesen Farben und produziert jeweils 5 zusätzliche Variationsmöglichkeiten: Lightest (am hellsten), Lighter (heller), Medium (mittel), Darker (dunkler) und Darkest (am dunkelsten). Verwenden Sie das folgende Format, um auf Variationsmöglichkeiten in der CSS-Datei zu verweisen: Color-Permutation (zum Beispiel “Light2-Darkest” ).

Syntax 

Das Designmodul liest die Kommentare in Ihrer CSS-Datei und verarbeitet sie entsprechend. Definieren Sie für eine Designformatvorlage eine Standardauswahl, und platzieren Sie das Designtoken direkt vor den Style, also die Formatvorlage. Hier ein Beispiel: Es gibt ein background-color-Element, das dem Design Light2-Darkest zugeordnet werden soll. In meiner Definition der CSS-Datei würde es dann so aussehen:

/* [ReplaceColor(themeColor:"Light2-Darkest")] */ background-color:#707070;

Im Standarddesign wird der Hintergrund (background) als #707070 angezeigt, sobald aber ein Design angewendet wurde, wird die Hintergrundfarbe durch Light2-Darkest ersetzt. Weitere Beispiele für die Verwendung anderer Tokens finden Sie am Ende dieses Artikels. Sie können sich aber auch die CSS-Standarddatei für v4.master (corev4.css) näher ansehen. Diese CSS-Datei ist als Referenz sehr geeignet.

Dateisetup 

Um eine Gestaltungsvorlage mit Designfunktion einzurichten, müssen Sie zwei Dinge erledigen:

  1. Platzieren Sie die CSS-Datei an einen Speicherort, an dem das Modul es findet.
  2. Registrieren Sie die CSS-Datei ordnungsgemäß in der Gestaltungsvorlage.

Speicherort 

Das Designmodul wird die CSS-Dateien nur verarbeiten, wenn diese sich an der richtigen Stelle befinden. Für unsere Anpassungen werden wir den Ordner RootSite/Style Library/~language/Themable verwenden. Diesen Ordner gibt es nur für SPS-Websites mit aktiviertem SharePoint Server-Veröffentlichungsfeature. Wenn Sie in einer Stammwebsite ohne diese Struktur arbeiten, benötigen Sie nur einen Ordner mit dem Namen Style Library unter der Stammwebsite und den Unterordner Themable. Der Inhalt des Ordners Themable wird vom Designmodul verarbeitet (einschließlich des Inhalts in Unterordnern). Erstellen Sie in SharePoint Designer oder mit dem Browser genau die gleiche Ordnerstruktur. Der Sprachordner language ist optional. Wenn Sie aber verschiedene CSS-Dateien für unterschiedliche Sprachen haben möchten, dann brauchen Sie den Ordner. Benennen Sie den Ordner für Englisch (USA) in en-us um.

Die Bilder müssen nicht an einen bestimmten Ort platziert werden, der empfohlene Platz ist aber der Ordner RootSite/Style Library/Images.

Nun zu einigen Tipps beim erneuten Einfärben von Bildern. Wenn Sie ein Bild neu einfärben, das an vielen Orten gerendert wird, so wird immer die letzte Neueinfärbung des Bildes an allen Speicherorten mit Design verwendet. Beispiel: Ich möchte verschiedene Einfärbemethoden für dasselbe Bild zeigen (Tinting (Einfärben), Blending (Mixen) und Filling (Ausfüllen)), aber alle werden nur ausgefüllt angezeigt. Ich muss dann einzelne Kopien des Bildes speichern und diese dann mit unterschiedlichen Designs versehen (Hinweis: Eine letzte Alternative ist das Verwenden eines Detach-Attributs, um dem Modul mitzuteilen, dass ein neues Bild beim Neueinfärben erstellt werden muss. Diese Methode sollte jedoch eher seltener angewendet werden, da die Leistungsbeanspruchung durch das Herunterladen von vielen Bildern während des Renderns steigt. Aus diesem Grunde werde ich an dieser Stelle auch nicht ins Detail gehen). Sie können bei Bildclustern (eine einzelne Datei mit mehr als einem Bild) auch Teile des Bildes mithilfe des includeRectangle-Parameters neu einfärben (die Datei corev4.css dient hierfür als Beispiel, wie dies vorgenommen werden kann).

Registrierung 

Die CSS-Designdateien für die Gestaltungsvorlage müssen registriert werden und nicht nur verknüpft. Dadurch zeigt die Gestaltungsvorlage auf die CSS-Designdatei, sobald ein Design angewendet wird. Kopieren Sie die folgenden Parameter in das head-Tag der Gestaltungsvorlage:

<SharePoint:CssRegistration name="<% $SPUrl:~sitecollection/Style Library/~language/ Themable /myStyleSheet.css %>" After="corev4.css" runat="server"/>

Mit dem After-Parameter wird sichergestellt, dass die CSS-Designdatei auf die Seite nach corev4.css angewendet wird. Beachten Sie jedoch, dass das <% $SPUrl-Token in SharePoint Foundation (SPF) nicht aufgelöst wird. Sie müssen in SPF den Speicherort mit einer hartcodierten URL angeben. Das bedeutet leider eine Einschränkung, wenn Sie verschiedene CSS-Dateien für unterschiedliche Sprachen verwenden möchten (denn es gibt kein ~language-Token).

Demo 

So, alles sollte für die CSS-Designdatei vorbereitet sein. Entwerfen Sie eine professionell aussehende Gestaltungsvorlage, und testen Sie diese. Um die Farbpallette besser nachvollziehen zu können, die mir zu meinen Designs verhilft, erstelle ich in der v4.master eine große Tabelle mit allen Farbvariationsmöglichkeiten. Ich nehme auch ein Beispielbild auf und probiere, es neu einzufärben. Unten können Sie das Ergebnis mit dem Standardfarbschema sehen (beachten Sie, dass ich die Farbe Weiß als Standardeinstellung für die background-color-Formatvorlage verwendet habe.

Demo zur Formatvorlage

Als Nächstes wechsle ich zum Browser und nehme mir ein neues Websitedesign. Wie wäre es mit Zusammenkunft (Convention) mit Papyrus und Segoe Script als Schriftart. Jetzt sieht es in der Tabelle (siehe unten) schon etwas bunter aus. Ich habe die Hyperlinktexte und die Bildbeschriftungen mit Designs versehen. Zum Einfärben habe ich Dark2-Lightest verwendet (Sie können die perfekte Farbübereinstimmung zwischen der Dark2-Lightest-Zelle und dem Logo erkennen, das mit der Filling-Methode neu eingefärbt wurde).

Demo 2 zur Formatvorlage

Beispielcode 

Hier sehen Sie einen beispielhaften Ausschnitt aus der CSS-Datei des zweiten Logobildes, dessen Schrift, Schriftfarbe und die Bildfarbe mit einem Design versehen wurden:

/* [ReplaceFont(themeFont: "MinorFont")] */ font-family:Verdana;
/* [ReplaceColor(themeColor:"Dark2-Darker")] */ color:black;
/* [RecolorImage(themeColor:"Dark2-Lightest",method:"Tinting")] */ background:url("/Style Library/images/spdicon1.png") no-repeat;

Ich bin ziemlich fasziniert von der Qualität bei der Einfärbung von Bildern. Richtig und stilsicher angewendet kann das SharePoint-Designmodul denjenigen unter uns große Freude bereiten, die sowohl auf die visuellen Aspekte als auch auf die Funktionalität achten müssen :)

Vielen Dank dafür, dass Sie sich die Zeit genommen haben, diesen Beitrag zu lesen! Ich hoffe, das neue SharePoint-Designmodul bereitet auch Ihnen viel Freude und hat einen genauso großen Nutzen für Sie wie für mich.

Es handelt sich hierbei um einen übersetzten Blogbeitrag. Sie finden den Originalartikel unter Working with the SharePoint Theming Engine.