SharePointCommunity
Die deutschsprachige Community für SharePoint, Microsoft 365, Teams, Yammer und mit Azure
SharePoint 2010-Theming Teil 3 – Theme-fähige Webparts

Blogs

Fabian´s Blog [SharePoint MVP]

Syndication

SharePoint 2010-Theming Teil 1 – Einführung
SharePoint 2010-Theming Teil 2 - Die Theme-Engine

In den ersten beiden Teilen dieser Serie habe ich mich ausführlich mit der Theorie des Themings unter SharePoint 2010 auseinandergesetzt. Heute soll es praktischer werden! In diesem Artikel werde ich beschreiben, wie Theme-fähige Anwendungen realisiert werden. Hierzu bedarf es folgende Zutaten: Eine Anwendung (hier ein visueller Webpart), eine Theme-fähige CSS-Datei (hier im Layouts-Verzeichnis bereitgestellt) sowie eine CSS-Registrierung (hier direkt im User Control).

Das hierfür zuständige Visual Studio-Projekt hat folgenden Aufbau.

01

Schauen wir uns die Anwendungskomponenten im Detail an. Das Projekt habe ich auf Basis der Vorlage eines visuellen Webparts erzeugt. Das hierin enthaltene User Control (VisualWebPart1UserControl.ascx) habe ich zunächst um folgenden Code erweitert.

   1:  <asp:Panel ID="pnlBox" runat="server" CssClass="Panel">
   2:      <asp:Label ID="lblTitle" runat="server" CssClass="Label">Hallo SharePointCommunity!</asp:Label>
   3:      <br />
   4:      <asp:Button ID="btnSend" runat="server" CssClass="Button" Text="Klick mich!" />
   5:  </asp:Panel>


Der visuelle Webpart besteht im Wesentlichen aus einem Panel, einem Label und einem Button. Alle drei Elemente wurden mit einer CSS-Klasse versehen. Die dazugehörige CSS-Datei hat folgenden Aufbau.

   1:  .Button
   2:  {    
   3:      /* [ReplaceColor(themeColor:"Light2-Dark")] */ border: solid 1px #d9dde1; 
   4:      /* [ReplaceColor(themeColor:"Light2")] */ background-color: #f5f6f7; 
   5:      /* [ReplaceColor(themeColor:"Dark1")] */ color: #003366; 
   6:      margin-top:10px;
   7:  }
   8:   
   9:  .Label
  10:  {
  11:      font-size: 20px; 
  12:      /* [ReplaceColor(themeColor:"Accent1")] */ color: #003366;
  13:  }
  14:   
  15:  .Panel
  16:  {
  17:      padding: 20px; 
  18:      /* [ReplaceColor(themeColor:"Accent1")] */ border: solid 1px #d9dde1; 
  19:      /* [ReplaceColor(themeColor:"Light2-Lightest")] */ background-color: #f5f6f7;     
  20:  }
  21:   


Man kann gut erkennen, dass jede Farbe durch ein Replacemt-Tag ergänzt wurde, welches eine Farbe aus der Theme-Farbpalette referenziert. Diese CSS-Datei wird durch das Solution-Deployment im Layouts-Verzeichnis des SharePoint-Severs bereitgestellt. Dazu muss in der Projektstruktur ein Mapped Folder zum Layouts-Verzeichnis hinzugefügt werden. Wichtig ist, dass die Datei unterhalb des Themed-Orders gespeichert wird. Sie wird dann genutzt, wenn ein Theme angewandt wird.

Zu guter Letzt muss die CSS-Datei noch von der Anwendung referenziert werden. Ich nutze hierzu das von SharePoint bereitgestellte Standard-Control CssRegistration, welches ich vor dem Panel direkt im User Control eingebunden habe. Durch das EnableCssTheming-Attribut wird definiert, dass die Replacements in der CSS-Datei angewandt werden, wenn ein benutzerdefiniertes Theme aktiviert wird.

   1:  <SharePoint:CssRegistration runat="server" ID="css" EnableCssTheming="true" Name="Custom.css" />

Nach dem Deployment der Solution hat der Webpart folgenden grafischen Aufbau.

t1

Nach Änderung des Themes kann man gut erkennen, dass die Farben sich an das jeweilige Schema angleichen.

t2

Der Quellcode von diesem Beispiel kann hier heruntergeladen werden.


Bereitgestellt 20 Mrz 2011 18:19 von Fabian Moritz