SharePointCommunity
Die deutschsprachige SharePoint Community für SharePoint 2013, 2010 und Office 365


SharePoint 2010-Theming Teil 2 – Die Theme Engine

Blogs

Fabian´s Blog [SharePoint MVP]

Syndication

SharePoint 2010-Theming Teil 1 - Einführung

Nachdem ich im ersten Teil dieser Serie auf die eher allgemeinen Themen des Theming eingegangen bin, möchte ich heute einen genaueren Blick auf die Theme Engine werfen.

Noch einmal in Erinnerung gerufen: Das Theming-Modell basiert auf einer speziellen Farbpalette, die sich aus 10 Farben, jeweils fünf Akzenten und zwei Farbvarianten für Hyperlinks zusammensetzt.

Jede Farbe lässt sich durch Ihre Bezeichnung und die jeweilige Abstufung genau adressieren. Zum Beispiel definiert der Farbwert Accent3-Darker die dunkelste Ausprägung der dritten Akzentfarbe wohingegen Dark1 den Standardwert der dunkelsten Farbe der Palette referenziert.

t32

Diese Kombinationen werden innerhalb der Standard CSS-Dateien genutzt, um einer Farbdeklaration einen Platz aus der Farbpalette zuzuweisen. Die Zuweisung erfolgt auf Basis sogenannter Replacement-Kommentare.

tx

Bei Anpassung eines Standard-Designs wird diese Zeile innerhalb der generierten CSS-Datei durch die jeweilige Farbe aus der Palette ersetzt.

Neben dem Austausch von Farben (ReplaceColor) liefert das Theming-Modell auch die Option, einen Schrifttyp zu ersetzten (ReplaceFont) sowie ein Bild einzufärben (RecolorImage). Je nach Replayment-Tag existieren bestimmte individuelle Einstellungsmöglichkeiten. Ein genauer Blick in die COREV4.CSS-Datei veranschaulicht die unterschiedlichen Varianten: %CommonProgramFiles%\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\1033\STYLES\Themable\COREV4.CSS

Bei der Betrachtung der Theme Engine sollte man wissen, wann genau die Theme-CSS-Dateien angewandt werden. Eine erste Voraussetzung ist, dass die jeweilige CSS-Referenz als „Theme-fähig“ deklariert wird. Diese Deklaration kann beispielweise über das EnableCssTheming-Attribut des CssRegistration-Controls definiert werden.

t5

Wird dieses Attribut für die CSS-Referenz gesetzt, werden die angewandten Themes aus dem Unterordner _catalogs/theme/themed referenziert. Ein Blick in den HTML-Output macht dieses Verhalten deutlich.

t7

Ohne diese Einstellung würde die CSS-Datei aus dem Standard-Pfad referenziert werden.

t6

Mit Unterstützung des SharePoint Designers wird das Modell noch deutlicher: Nachdem ein neues Theme über die Einstellungen der Website ausgewählt wurde, werden die innerhalb des Themes definierten Farben mit den Replacement-Tags der CSS-Quelle ausgetauscht und in einer neuen CSS-Datei abgespeichert. Hierbei werden sämtliche von der Masterseite referenzierten CSS-Dateien berücksichtigt. Die Dateien werden dann in einem Ordner mit einer dynamisch generierten 8-stelligen ID unterhalb des angesprochenen themed-Verzeichnisses abgelegt (_catalogs/theme/themed/#). Wiederholt man diesen Vorgang mehrmals, kann man feststellen, dass SharePoint jeweils weitere Unterordner mit anderen IDs erzeugt. Warum bleibt mir jedoch ein Rätsel…

79

Soviel zum zweiten Teil. Im nächsten Artikel werde ich mich mit der Umsetzung von Theme-fähigen Webparts auseinandersetzen.


Bereitgestellt 5 Mrz 2011 10:35 von Fabian Moritz