Verwenden von Standard-CSS-Dateien in SharePoint 2010 (Wrox)

Zusammenfassung: Erfahren Sie, wie Sie eine Microsoft SharePoint 2010-Website mit Branding versehen und die Benutzeroberfläche mithilfe von SharePoint CSS-Webserversteuerelementen erweitern und anpassen können.

Wrox-Bücher zu SharePoint

Letzte Änderung: Montag, 9. März 2015

Gilt für: Business Connectivity Services | Open XML | SharePoint Designer 2010 | SharePoint Foundation 2010 | SharePoint Online | SharePoint Server 2010 | Visual Studio

Inhalt dieses Artikels
Einführung in die Verwendung von Standard-CSS-Dateien in SharePoint 2010
Voraussetzungen
SharePoint-Brandingaktivitäten
Speicherorte der SharePoint-Brandingartefakte
CSS-Websteuerelemente in SharePoint
Anwenden benutzerdefinierter Formate auf eine SharePoint-Website
Erwägungen beim Anwenden benutzerdefinierter Stylesheets auf SharePoint
Bereitstellungsaspekte
Informationen zum Autor
Weitere Ressourcen

Autor: Johnny Harbieh

Herausgeber: WROX-Fachredakteure für SharePoint 2010-Artikel

Inhalt

• Einführung in die Verwendung von Standard-CSS-Dateien in SharePoint 2010

• Voraussetzungen

• SharePoint-Brandingaktivitäten

• Speicherorte der SharePoint-Brandingartefakte

• CSS-Websteuerelemente in SharePoint

• Anwenden benutzerdefinierter Formate auf eine SharePoint-Website

• Erwägungen beim Anwenden benutzerdefinierter Stylesheets auf SharePoint

• Bereitstellungsaspekte

• Informationen zum Autor

• Weitere Ressourcen

Einführung in die Verwendung von Standard-CSS-Dateien in SharePoint 2010

Microsoft SharePoint 2010 bietet mehrere Möglichkeiten zum Anpassen der Benutzeroberfläche. Websitebesitzer können eine alternative CSS-Datei konfigurieren, ein benutzerdefiniertes Design anwenden oder ein vorhandenes ändern. Außerhalb des Browsers können Sie auch Anpassungstools wie Microsoft SharePoint Designer 2010 in SharePoint aktivieren, um die Standarddarstellung und das Standardverhalten anzupassen und zu überschreiben.

Hinweis
SharePoint basiert auf der ASP.NET-Technologie, die die zugrunde liegende Infrastruktur und die Ressourcen wie ASP.NET-Pipeline, Webserversteuerelemente, Layoutseiten, Inhaltsseiten und Gestaltungsvorlagen bereitstellt. Diese Elemente bilden zusammen die Struktur und die Plattform für die Erstellung und das Branding einer SharePoint-Website.

Voraussetzungen

In Tabelle 1 sind die Elemente aufgelistet, die Sie benötigen, um alle Informationen in diesem Artikel anzuwenden.

Tabelle 1. Voraussetzungen

Element	Beschreibung
SharePoint Server 2010 oder SharePoint Foundation 2010.	Zugriff auf eine SharePoint-Entwicklungsumgebung wird empfohlen. Befolgen Sie die Schritte unter Einrichten der Entwicklungsumgebung für SharePoint 2010 unter Windows Vista, Windows 7 und Windows Server 2008, um Ihre eigene Entwicklungsumgebung einzurichten.
Allgemeine Kenntnisse der SharePoint-Entwicklung. Weitere Informationen finden Sie im Microsoft SharePoint 2010 SDK.	Allgemeine Kenntnisse der SharePoint-Entwicklung sind erforderlich für den Umgang mit Gestaltungsvorlagen, Webserversteuerelementen, HTML sowie CSS- und XSL-Dateien.
Microsoft Visual Studio 2010 oder SharePoint Designer.	Durch diese werden die benötigten Tools zum Ändern von SharePoint-Websites und -Seiten bereitgestellt.

SharePoint-Brandingaktivitäten

Das SharePoint-Branding kann folgende Aktivitäten umfassen:

• Suchen und Überprüfen von Stylesheet- (CSS) und XSL-Dateien

• Ändern und Aktualisieren von CSS-Dateien

• Hinzufügen von neuen CSS-Klassen, Bildern und Farben

• Erstellen neuer oder Ändern vorhandener Designs

• Entfernen, Ausblenden oder Auskommentieren vorhandener CSS-Klassen

• Ausblenden des neuen Menübands oder Ändern der Hintergrundfarben von Fenstern

• Überschreiben einiger Rich-Editor-Steuerelementformate

In den folgenden Abschnitten wird beschrieben, wie die Standardbrandingartefakte, Tools und Ressourcen zu finden sind und wie sie verwendet werden.

Speicherorte der SharePoint-Brandingartefakte

Artefakte für das SharePoint-Branding sind Dateien und Ressourcen, die mit SharePoint installiert und bereitgestellt oder später von Websitebesitzern und Entwicklern hinzugefügt werden.

In diesem Abschnitt wird gezeigt, wie die Standardstylesheets und Gestaltungsvorlagen in SharePoint zu finden sind und verändert werden können.

CSS-Dateien (*.css)

Um die Darstellung einer SharePoint-Website zu ändern, suchen Sie die CSS-Dateien, die standardmäßig von SharePoint verwendet werden. In Tabelle 2 sind einige der zentralen von SharePoint verwendeten CSS-Dateien aufgeführt.

Tabelle 2. Zentrale SharePoint-Stylesheets

Dateiname	Speicherort (C:\Programme\Gemeinsame Dateien\Microsoft Shared\Web Server Extensions\14)
Search.css	TEMPLATE\LAYOUTS\{Gebietsschema-ID}\STYLES\Themable\Search.css
Wiki.css	TEMPLATE\LAYOUTS\{Gebietsschema-ID}\STYLES\Themable\Wiki.css
Corev4.css	TEMPLATE\LAYOUTS\{Gebietsschema-ID}\STYLES\Themable\Corev4.css
Controls.css	/Style Library/{Sprache-Kultur}/Themable/Core Styles/Controls.css
Page-Layouts-21.css	/Style Library/{Sprache-Kultur}/Themable/Core Styles/Page-Layouts-21.css
Nightandday.css	/Style Library/{Sprache-Kultur}/Themable/Core Styles/Nighandday.css

{Sprache-Kultur} ist ein Platzhalter für Sprache und Kultur, z. B. de-de. {Gebietsschema-ID} ist ein weiterer Platzhalter für die Gebietsschema-ID, z. B. ist 1031 die Gebietsschema-ID für Deutsch-Deutschland.

Tipp
Weitere Informationen finden Sie unter Von Microsoft zugewiesene Gebietsschema-IDs.

Einige Stylesheets in Tabelle 2 sind im Dateisystem gespeichert, andere in der SharePoint-Formatbibliothek. Dateien in der Formatbibliothek sind in der Inhaltsdatenbank gespeichert. Wenn Sie diese Dateien ändern möchten, müssen Sie einen der folgenden Schritte ausführen:

• Laden Sie die Dateien aus der Formatbibliothek herunter, ändern Sie sie lokal auf dem Computer, und laden Sie sie dann hoch.

• Öffnen Sie die Website mit SharePoint Designer, und ändern Sie die Dateien dort.

Microsoft empfiehlt, Dateien während der Arbeit zu sichern und in einem secure-code repository zu speichern.

Hinweis
Ändern Sie die Dateien nicht direkt. Wenden Sie stattdessen Überschreibungen an, oder erstellen Sie neue Dateien, in denen die in diesen Dateien angegebenen CSS-Klassen überschrieben werden.

Internet Explorer verfügt über Tools, mit denen Sie die auf SharePoint-Seiten verwendeten CSS-Klassen anzeigen können, beispielsweise die IE-Entwicklersymbolleiste.

Abbildung 1. IE-Entwicklersymbolleiste

Abbildung 1 zeigt Links zu zwei Stylesheets, die auf der Teamwebsite verwendet werden: Wiki.css und Corev4.css. Beide CSS-Dateien befinden sich im Dateisystem.

In Tabelle 3 sind einige der in SharePoint häufig verwendeten Klassen aufgeführt. Diese Klassen enthalten die Basisauswahlen und das Standardverhalten.

Tabelle 3. Gängige CSS-Klassen in SharePoint

Klasse	Beschreibung	Dateiname
V4master	Globales HTML-BODY-Element	Corev4.css
S4-pr s4-ribbonrowhidetitle ms-cui-ribbon ms-cuiribbonTopBars ms-cui-topBar2	Menüband	Corev4.css
S4-title S4-lp	Titelbereich	Corev4.css
S4-tn	Globale Navigation	Corev4.css
Ms-quickLaunch	Schnellstartleiste	Corev4.css
Ms-dlgContent Ms-dlgOverlay	Modales Dialogfeld	Corev4.css

 

Mit der Internet Explorer-Entwicklersymbolleiste können Sie diese Klassen und Eigenschaften untersuchen, wie in Abbildung 2 dargestellt.

 

Abbildung 2. Erkunden von CSS-Klassen mit der IE-Entwicklersymbolleiste

XSL-Dateien (*.xsl)

Mit SharePoint werden standardmäßig einige XSL-Dateien installiert, die vom RSS-Reader-Webpart, dem Hyperlinkübersicht-Webpart, dem Inhaltsverzeichnis-Webpart und dem Webpart für Inhaltsabfragen (CQWP) verwendet werden. Für alle diese Webparts müssen Resultsets in lesbarem HTML formatiert werden. XSL-Stylesheets sind zusammen mit verschiedenen XSL-Vorlagen in der Formatbibliothek zu finden, wie in Abbildung 3 dargestellt.

Abbildung 3. XSL-Stylesheets und -Vorlagen

Tipp
Weitere Informationen zum Anpassen von XSL-Dateien finden Sie unter Anpassen der XSL für das Inhalt-nach-Abfrage-Webpart.

CSS-Websteuerelemente in SharePoint

Webserversteuerelemente dienen zum Verwalten und Rendern von CSS-Dateiverknüpfungen und Stylesheets. Standardmäßig befinden sich die Webserversteuerelemente in den SharePoint-Gestaltungsvorlagen. Sie finden Gestaltungsvorlagen im Gestaltungsvorlagen- und Seitenlayoutkatalog bzw., in SharePoint Foundation, im Gestaltungsvorlagenkatalog. Der relative Pfad zum Katalog lautet /_catalogs/masterpage/Forms/AllItems.aspx.

Suchen der Gestaltungsvorlage

Zur Ermittlung der CSS-Webserversteuerelemente in SharePoint müssen Sie eine Kopie der auf der Website verwendeten Gestaltungsvorlage abrufen. Zum Herunterladen einer Kopie der Gestaltungsvorlage Ihrer Website müssen Sie jedoch wissen, welche Gestaltungsvorlage auf der Website verwendet wird.

Mit folgenden Schritten können Sie bestimmen, welche Gestaltungsvorlage auf der Website verwendet wird:

• Greifen Sie auf einer SharePoint Server 2010-Website, auf der Veröffentlichungsfeatures aktiviert sind, über Websiteaktionen, Website und Einstellungen auf die Seite Einstellungen für die Gestaltungsvorlage der Website zu. Klicken Sie dann im Abschnitt Aussehen und Verhalten auf den Link Gestaltungsvorlage.

• Statt über das Menü auf die Seite Einstellungen für die Gestaltungsvorlage der Website zuzugreifen, können Sie auch folgenden URL-Ausschnitt ans Ende der Serveradresse der Website anfügen: /_layouts/ChangeSiteMasterPage.aspx. Beispiel: https://contoso.com/\_ layouts/ChangeSiteMasterPage.aspx

• Auf einer SharePoint Foundation-Website können Sie die verwendete Gestaltungsvorlage mithilfe von Windows PowerShell bestimmen, wie in Abbildung 4 dargestellt. Im Folgenden ist ein Beispielskript aufgeführt.

  $web = get-spweb("https://contoso.com");$web.masterurl
  

  Tipp
  Weitere Informationen finden Sie unter Windows PowerShell und SharePoint.

Abbildung 4. "v4.master" auf einer SharePoint-Teamwebsite

In Tabelle 4 sind alle Webserversteuerelemente aufgelistet, die sich auf CSS beziehen und die in SharePoint Server verfügbar sind. Sie finden die Steuerelemente im Microsoft.SharePoint.WebControls-Namespace, der Teil der Assembly Microsoft.SharePoint.dll ist.

Tabelle 4. CSS-Webserversteuerelemente in SharePoint 2010

Steuerelement	Beschreibung	Speicherort des Steuerelements
CSSLink	<SharePoint:CssLink runat="server" Version="4"/>	Gestaltungsvorlagen
Theme	<SharePoint:Theme runat="server"/>	Gestaltungsvorlagen
CSSRegistration	<SharePoint:CssRegistration Name="minimalv4.css" runat="server" />	Gestaltungsvorlagen, Seitenlayouts

In den folgenden Abschnitten sind die einzelnen in Tabelle 4 aufgeführten Steuerelemente beschrieben und ihre Vorteile zusammengefasst.

CSSLink

Das CSSLink-Websteuerelement befindet sich in SharePoint-Gestaltungsvorlagen und dient zum Rendern des HTML-Elements <LINK>. Das CSSLink-Steuerelement arbeitet mit den CSSRegistration-Steuerelementen zusammen. Wenn die Seite CSSRegistration-Steuerelemente enthält, registriert und rendert das CSSLink-Steuerelement die zusätzlichen CSS-Dateiverweise des Registrierungssteuerelements.

Das CSSLink-Steuerelement verfügt über die folgenden Elemente:

• UIVersion (optional) – Ermöglicht Websitebesitzern das Ändern von Aussehen und Verhalten einer aktualisierten oder migrierten SharePoint-Website. Ermöglicht die Websitevorschau auf der SharePoint-Benutzeroberfläche oder der Benutzeroberfläche von Microsoft Office SharePoint Server (MOSS) 2007. Legen Sie den Wert für SharePoint auf 4 und für MOSS 2007-Websites auf 3 fest.

• Version (optional) – Überschreibt die Steuerelementversion der SPControl-Klasse.

• Alternate (optional) – Kennzeichnet, ob die zentrale CSS-Datei (Core.css oder Corev4.css) mit anderen CSS-Dateiverweisen gerendert wird oder ob eine alternative CSS gerendert wird. Der Standardwert ist False. Er gibt an, dass die zentrale CSS-Datei (core.css oder corev4.css) gerendert wird.

• DefaultUrl (optional) – Legt die Standard-URL für die CSS-Datei fest oder ruft sie ab.

  Im folgenden Beispiel wird das Rendern durch dieses Steuerelement veranschaulicht.

  <link rel="stylesheet" type="text/css" href="/_layouts/1033/styles/Themable/search.css?rev=Uoc0fsLIo87aYwT%2FGX5UPw%3D%3D"/>
  <link rel="stylesheet" type="text/css" href="/_layouts/1033/styles/Themable/wiki.css?rev=9pXM9jgtUVYAHk21JOAbIw%3D%3D"/>
  <link rel="stylesheet" type="text/css" href="/_layouts/1033/styles/Themable/corev4.css?rev=iIikGkMuXBs8CWzKDAyjsQ%3D%3D"/>
  

Das CSSLink-Steuerelement fügt einen Zeichenfolgenparameter ?rev= query an den Dateiverweis an, um das Zwischenspeichern im Browser zu steuern und den Browser zu zwingen, eine neue Kopie der Datei zu erstellen.

Das CSSLink-Steuerelement ist auch für die im folgenden Abschnitt beschriebenen Verhaltensweisen zuständig.

CSSRegistration

Das CSSRegistration-Websteuerelement wird zusammen mit dem CSSLink-Steuerelement verwendet, um CSS-Dateien zu registrieren, damit sie auf der Seite gerendert werden können. Registrieren Sie CSS-Dateien durch eine relative oder statische URL.

Das CSSRegistration-Steuerelement verfügt über die folgenden Elemente:

• Name (erforderlich) – Der zu registrierende Dateiname. Wird der Name nicht angegeben, wird von SharePoint der Fehler in Abbildung 5 ausgelöst. Der Wert der Name-Eigenschaft sollte ein Dateiname oder eine URL sein. Wird ein Dateiname verwendet, muss die CSS-Datei im Formatordner unter LAYOUTS vorhanden sein.

  Das folgende Beispiel zeigt, wie die oben referenzierte Datei custom.css verwendet wird, die im Ordner Styles bereitgestellt wurde (C:\Programme\Gemeinsame Dateien\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\{Gebietsschema-ID}\STYLES).

  <SharePoint:CssRegistration runat="server" Name="custom.css" />
  

  Im folgenden Beispiel wird das Rendern der Registrierung von custom.css durch das CSSLink-Steuerelement veranschaulicht.

  <link rel="stylesheet" type="text/css" href="/_layouts/1033/styles/custom.css?rev=pFayZ3XaoWhaMymtxOLHNA%3D%3D"/>
  

  Neben dem Verweis auf eine Datei im Verzeichnis LAYOUTS\{Gebietsschema-ID}\Styles können Sie eine Datei auch durch eine URL registrieren. Geben Sie in der Name-Eigenschaft eine einzelne URL mithilfe von Token an. Einige bekannte URL-Token sind folgende: ~site, ~sitecollection und ~language. Verwenden Sie diese Token zusammen mit einem Ausdrucks-Generator, wie z. B. SPUrl. Das ~language-Token entspricht einer Sprach-Kultur-Zeichenfolge wie z. B. en-us.

  Durch Hinzufügen eines Eintrags ähnlich dem folgenden Beispiel…

  <SharePoint:CssRegistration Name="<%$ SPUrl:~sitecollection/Style Library/~language/Custom/2ndcustom.css %>" runat="server" />
  

  …wird die folgende HTML generiert, wie in Abbildung 5 dargestellt.

  <link rel="stylesheet" type="text/css" href="/Style%20Library/en-US/Custom/2ndcustom.css"/>
  

Abbildung 5. SharePoint-Seitenfehler

• After (optional) – Gibt die Renderingreihenfolge der zu registrierenden CSS-Datei an. Möchten Sie beispielsweise ein benutzerdefiniertes Stylesheet mit dem Namen custom.css nach core4.css rendern, konfigurieren Sie das Registrierungssteuerelement mit folgendem Code.

  <SharePoint:CssRegistration Name="<%$ SPUrl:~sitecollection/Style Library/~language/Custom/2ndcustom.css %>" runat="server" After="core4.css" />
  

  Hierdurch wird das CSSLink-Websteuerelement gezwungen, die benutzerdefinierte Datei nach dem Link auf core4.css zu rendern.

  <link rel="stylesheet" type="text/css" href="/_layouts/1033/styles/Themable/corev4.css?rev=iIikGkMuXBs8CWzKDAyjsQ%3D%3D"/>
  <link rel="stylesheet" type="text/css" href="/Style%20Library/en-US/Custom/2ndcustom.css"/>
  

  Hinweis
  Sie können den Ausdrucks-Generator SPUrl nur auf SharePoint Server-Websites verwenden. In SharePoint Foundation ist er nicht verfügbar.

• EnableCSSTheming – Kennzeichnet, ob Ihre Stylesheets designfähig ("themable") sein sollen, d. h. im Rahmen angepasster SharePoint-Designs angewendet werden können.

  • Legen Sie die EnableCSSTheming-Eigenschaft des CSSRegistration-Steuerelements auf true fest.

  • Fügen Sie den CSS-Formatklassen Designkommentare hinzu. Beispiele hierfür finden Sie im Verzeichnis Themable, das mit SharePoint installiert wird (C:\Programme\Gemeinsame Dateien\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\{Gebietsschema-ID}\STYLES\Themable).

    Im folgenden Beispiel wird die CSS-Klasse ms-toolbar in der designfähigen Datei Corev4.css dargestellt. Wenn Sie ein Design anwenden, wird bei jeder Verwendung der Klasse ms-toolbar die Farbe #0072BC durch die im Design selbst definierte Hyperlink-Designfarbe ersetzt.

    .ms-toolbar{
    font-family:verdana;
    font-size:8pt;
    text-decoration:none;
    /* [ReplaceColor(themeColor:"Hyperlink")] */ color:#0072BC;
    }
    

• ConditionalExpression – Dient zur Angabe, ob dieses Stylesheet für eine bestimmte Browserversion anzuwenden ist. Ein Wert von IE 9.0 gibt beispielsweise an, dass die Registrierung für Internet Explorer, Version 9.0, angewendet wird. Der Wert wird vom CSSLink-Steuerelement ermittelt.

Theme

Das Theme-Webserversteuerelement wendet ein Design auf eine SharePoint-Website an. Zum Erstellen von Designs stehen verschiedene Tools zur Verfügung, beispielsweise Theme Builder auf Microsoft Connect. Wenn Sie ein Design (eine THMX-Datei) erstellt haben, laden Sie es in den Katalog Designs hoch, der sich auf der Seite Einstellungen befindet (/_catalogs/theme/Forms/AllItems.aspx). Um ein Design anzuwenden, greifen Sie auf die Seite Websitedesign zu (/_layouts/themeweb.aspx).

Der folgende Code ist ein Beispiel dafür.

<link rel="stylesheet" type="text/css" href="/_catalogs/theme/Themed/54E2D43/search-7E1AFF02.css?ctag=1"/>
<link rel="stylesheet" type="text/css" href="/_catalogs/theme/Themed/54E2D43/wiki-ECF524AA.css?ctag=1"/>
<link rel="stylesheet" type="text/css" href="/_catalogs/theme/Themed/54E2D43/corev4-8A0ABD2F.css?ctag=1"/>

Wenn Sie ein Design anwenden, wird von SharePoint ein neuer Designordner mit allen CSS- und Bilddateien erstellt, die zum Rendern des Designs erforderlich sind. Der neue Designordner wird nicht unter Websiteeinstellungen oder unter Alle Websiteinhalte einblenden angezeigt. Sie können Designdateien mit SharePoint Designer anzeigen, wie in Abbildung 6 dargestellt.

Abbildung 6. SharePoint-Designs

Anwenden benutzerdefinierter Formate auf eine SharePoint-Website

Nachdem Sie eine CSS-Datei mit den gewünschten Überschreibungen und Formaten erstellt haben, können Sie sie implementieren.

Wenn Sie ein benutzerdefiniertes Stylesheet auf Ihre SharePoint-Website anwenden möchten, müssen Sie zunächst entscheiden, wo die Datei gespeichert wird und wie sie anzuwenden ist. Sie können das Stylesheet im SharePoint-Dateisystem bereitstellen – beispielsweise im Verzeichnis Layouts (C:\Programme\Gemeinsame Dateien\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS) – oder Sie können es auf der SharePoint-Website in der Formatbibliothek speichern. Alternativ können Sie das Stylesheet an einem anderen Ort speichern und in SharePoint darauf verweisen – beispielsweise auf einem Medienwebserver. Viele Varianten sind möglich. Eine bewährte Methode besteht darin, die Datei an einem Speicherort abzulegen, an dem Sie ihre Versionen verwalten und sie problemlos wiederherstellen können. Ist der Zugriff auf den SharePoint-Server in Ihrer Organisation untersagt oder haben Sie keinen Zugriff auf Visual Studio einen anderen automatisierten Entwicklungsprozess, sollten Sie die CSS-Dateien besser in der Formatbibliothek speichern. So ist sie besser zugänglich. Die Versionsverwaltung und der Zugriff auf Stylesheets in der Formatbibliothek kann über SharePoint Designer oder mit der SharePoint-Objektauswahl in einem Webbrowser erfolgen.

Optionen für die Anwendung eines benutzerdefinierten Stylesheets

Verwenden Sie eine der folgenden Methoden, um ein benutzerdefiniertes Stylesheet auf die SharePoint-Website anzuwenden.

Alternative URL für CSS-Datei

Die alternative URL für die CSS-Datei ist eine Eigenschaft des Web-Objekts in den Klassen SPWeb und PublishingWeb. Sie können diese Eigenschaft auf der Benutzeroberfläche über die Seite Einstellungen für die Gestaltungsvorlage der Website oder mit Windows PowerShell festlegen. Untergeordnete Websites können die Einstellungen erben, und Ihre Formate können auf untergeordnete Ebenen verteilt werden. Führen Sie folgende Schritte aus, um diese Option zu verwenden:

1. Laden Sie eine benutzerdefinierte CSS-Datei in die Formatbibliothek hoch.

2. Zur Anwendung des Stylesheets klicken Sie auf Websiteaktionen > Websiteeinstellungen und dann unter der Gruppe Aussehen und Verhalten auf Gestaltungsvorlage.

3. Wählen Sie im Abschnitt Alternative URL für CSS-Datei das Optionsfeld Geben Sie eine CSS-Datei an aus, klicken Sie auf Durchsuchen, und suchen Sie Ihr benutzerdefiniertes Stylesheet.

4. Klicken Sie auf OK und dann nochmals auf OK, um die Einstellung zu speichern, wie in Abbildung 7 dargestellt.

   Abbildung 7. Alternative CSS-Einstellung

   

   Alternative URLs für die CSS-Datei werden auf Websitesammlungen der obersten Ebene angewendet. Bevor Sie sie auf dieser Website konfigurieren können, müssen die Veröffentlichungsfeatures aktiviert sein. Auf Unterwebsites, die Sie erstellen, müssen die Veröffentlichungsfeatures ebenfalls aktiviert sein. Die alternative URL für die CSS-Datei kann auch im Rahmen des Projektelements in der Datei onet.xml der Websitedefinition angegeben werden. Die Datei onet.xml wird zusammen mit SharePoint installiert und erfordert, dass Sie über Zugriff auf den Server verfügen.

Windows PowerShell

Gehen Sie folgendermaßen vor, um mit Windows PowerShell auf dem SharePoint-Server ein benutzerdefiniertes Stylesheet anzuwenden:

1. Klicken Sie auf Start > Alle Programme > Microsoft SharePoint 2010-Produkte.

2. Klicken Sie mit der rechten Maustaste auf SharePoint 2010-Verwaltungsshell, und wählen Sie Als Administrator ausführen aus.

3. Geben Sie das folgende Skript ein, um eine benutzerdefinierte CSS-Datei auf die SharePoint-Website anzuwenden.

   $spweb = get-spweb("https://contoso.com");$spweb.alternatecssurl = "/Style Library/en-us/CustomFolder/custom.css";$spweb.update();
   

Erwägungen beim Anwenden benutzerdefinierter Stylesheets auf SharePoint

Im vorherigen Abschnitt wurden verschiedene Möglichkeiten zum Branding von SharePoint-Websites erläutert. Sie können auch folgende Elemente verwenden, um benutzerdefinierte Formate anzuwenden:

• Statische HTML-LINK-Elemente. Beispiel: <link rel="stylesheet" type="text/css" href="/Style%20Library/en-US/Custom/2ndcustom.css"/>. Dies wird im Allgemeinen nicht empfohlen, da es sich um eine statische Methode handelt, die der Designer manuell verwaltet. Das statische HTML-LINK-Element wird in SharePoint nicht besonders behandelt.

• Inlineformatvorlagen auf Gestaltungsvorlagen oder in Seitenlayouts.

• CSS-Markup und JavaScript. Sie können mit dem Inhalts-Editor-Webpart CSS-Markup und JavaScript auf der Seite einfügen. Seitenautoren oder Designer können mit Inhalts-Editor-Webparts HTML-Markup auf der Seite hinzufügen. Sie können beispielsweise ein sich drehendes Bild hinzufügen oder bestimmte Daten in einem Kalender formatieren.

  Tipp
  Weitere Informationen zur Verwendung dieses Webparts finden Sie unter Verwenden des Inhalts-Editor-Webparts.

• Benutzerdefinierte Webserversteuerelemente, die CodeBehind erfordern. Letztlich bieten benutzerdefinierte Steuerelemente mehr Kontrolle über das Rendering durch den Browser.

• Stellvertretungs-Steuerelemente. In SharePoint werden mehrere Stellvertretungs-Steuerelemente verwendet, um benutzerdefinierten client- und serverseitigen Code in Seiten einzufügen. Sie können ein benutzerdefiniertes Steuerelement schreiben, auf einem SharePoint-Server bereitstellen und dann auf die ID des Stellvertretungs-Steuerelements in der Featuredatei elements.xml verweisen. Der folgende Code ist ein Beispiel für ein Stellvertretungs-Steuerelement in der Gestaltungsvorlage.

  <SharePoint:DelegateControl runat="server" ControlId="AdditionalPageHead" AllowMultipleControls="true"/>
  

Bereitstellungsaspekte

Beachten Sie vor dem Bereitstellen Ihrer Brandinglösungen Folgendes:

• Stylesheets sind globale Brandingressourcen. CSS-Dateien werden in der Regel von Hauptbenutzern, Grafikern, Designern und Websitebesitzern erstellt und verwaltet. Entwickler eines Unternehmens verwenden verwalteten Code, um ihre Anwendungen in SharePoint bereitzustellen. Ziehen Sie in Erwägung, Stylesheets auf SharePoint-Servern mithilfe von Sandkastenlösungen bereitzustellen.

• Für die Bereitstellung im Dateisystem des SharePoint-Servers ist Administratorzugriff und möglicherweise benutzerdefinierter Code erforderlich. Diese Option wirkt sich auf den gesamten Server und alle Webanwendungen auf diesem Server aus. Eine CSS-Datei, die im Verzeichnis Layouts bereitgestellt wird, kann auf jeder SharePoint-Website verwendet werden.

• Bei der Bereitstellung in der Formatbibliothek einer SharePoint-Website sollten Sie bedenken, dass diese zentral für diese Websitesammlung ist. Sie können ein Stylesheet in einer anderen Websitesammlung verwenden oder von dort darauf verweisen. Dies würde jedoch dem Sinn der Speicherung in der Formatbibliothek zuwider laufen. In diesem Fall sollten Sie die Datei im Dateisystem des SharePoint-Servers bereitstellen.

Informationen zum Autor

Johnny Harbieh ist ein erfahrener Berater und für Avtex Solutions LLC tätig, einem führenden Microsoft-Partner, der Clientinteraktionen mithilfe von Technologien auf Basis der Microsoft-Plattform optimiert. Als erfahrener Information Worker-Berater konzentriert sich Johnny auf die SharePoint-Plattform und deren Vorteile für die Clients. Seine Arbeit reicht von Strategiebriefings, Planung und Architektur bis hin zur Entwicklung, Bereitstellung und Unterstützung von SharePoint-basierten Lösungen. Johnny verfügt über mehrere Zertifizierungen für .NET, SQL Server und den Portal- und Zusammenarbeitsbereich, einschließlich MCTS und MCITP für SharePoint Foundation und SharePoint Server 2010. Johnny erreichen Sie unter der E-Mail-Adresse Johnny.Harbieh@live.com oder auf Twitter unter dem Namen @jharbieh. Darüber hinaus unterhält Johnny einen öffentlichen Blog.

Die folgenden Fachredakteure waren an Microsoft SharePoint 2010-Artikeln von Wrox beteiligt:

• Matt Ranlett ist ein SQL Server MVP und war über viele Jahre eine feste Institution der .NET-Entwicklercommunity in Atlanta. Als Gründungsmitglied von Atlanta Dot Net Regular Guys hat Matt mehrere regionale Benutzergruppen gegründet und leitet diese. Nach der Arbeit verbringt er viele Stunden mit lokalen und nationalen Communityaktivitäten, wie beispielsweise der SharePoint 1, 2, 3!-Reihe, der Organisation von drei Codecamps in Atlanta, der Tätigkeit als Vice President of Technology im Vorstand von INETA sowie Auftritten bei mehreren Podcasts wie z. B. .Net Rocks und dem ASP.NET-Podcast. Dennoch fand Matt kürzlich Zeit, sich mit einer wunderbaren Frau namens Kim zu verheiraten, die er bei der Aufzucht von drei riesigen Hunden unterstützt. Matt arbeitet derzeit als Seniorberater für Intellinet und gehört dem Team an, das mithilfe von innovativen Lösungen für den Erfolg von Unternehmen sorgt.

• Jake Dan Attis. Was Muster, Praxis und Steuerung im Hinblick auf die SharePoint-Entwicklung betrifft, sind Sie bei Jake Dan Attis goldrichtig. Er ist von Moncton, Kanada, in die Region Atlanta gezogen und hat einen Abschluss in angewandter Mathematik, ist aber ein hundertprozentiger SharePoint-Hardcoreentwickler. Normalerweise nimmt Dan an Community-Events in der Region Atlanta teil, hält dort Vorträge oder organisiert derartige Events, wie beispielsweise Codecamps, SharePoint-Samstage und die SharePoint-Benutzergruppe in Atlanta. Wenn Dan einmal nicht in Visual Studio arbeitet, verbringt er gerne Zeit mit seiner Tochter Lily, schaut sich Hockey und Football an und kostet weltweite Biersorten.

• Kevin Dostalek kann über 15 Jahre Erfahrung in der IT-Branche sowie über 10 Jahre Erfahrung in der Verwaltung großer IT-Projekte und der Führung von IT-Personal aufweisen. Er hat Projekte für Unternehmen ganz unterschiedlicher Größe geleitet und hatte verschiedene Funktionen inne, wie beispielsweise Entwickler, Architekt, Business Analyst, technischer Leiter, Manager Entwicklung, Projektmanager, Programm-Manager und Mentor/Coach. Darüber hinaus hat Kevin zwischen 2005 und 2008 auch als Vice President eine Lösungsbereitstellungsabteilung für einen MS Gold Partner mittlerer Größe geleitet und war später auch als Vice President of Innovation and Education tätig. Anfang 2010 gründete Kevin das Unternehmen Kick Studios, das Beratungs-, Entwicklungs- und Schulungsservices für die Spezialbereiche SharePoint und Social Computing anbietet. Seitdem ist er auch bei zahlreichen Benutzergruppenversammlungen, Treffen und Konferenzen im ganzen Land als Referent aufgetreten. Weitere Informationen zu Kevin finden Sie in seinem Blog "The Kickboard".

• Larry Riemann verfügt über mehr als 17 Jahre Erfahrung im Entwurf und der Entwicklung von Geschäftsanwendungen für einige der weltweit größten Unternehmen. Larry ist ein unabhängiger Berater, Eigentümer von Indigo Integrations und bietet SharePoint-Beratung ausschließlich über SharePoint911 an. Er ist Autor, veröffentlicht Artikel und hält gelegentlich Vorträge auf Konferenzen. In den letzten Jahren befasste er sich in erster Linie mit SharePoint, dem Entwickeln und Erweitern von über SharePoint hinausgehender Funktionalität. Neben seiner Arbeit an SharePoint ist Larry ein ausgebildeter .NET-Architekt und verfügt über umfangreiches Know-how in Sachen Systemintegration, Unternehmensarchitektur und Hochverfügbarkeitslösungen. Weitere Informationen zu Larry finden Sie in seinem Blog.

• Sundararajan Narasiman ist ein technischer Architekt bei der Content Management & Portals Group von Cognizant Technology Solutions, Chennai, und verfügt über mehr als 10 Jahre Branchenerfahrung. Sundararajan ist in erster Linie als Architektur- und Technologieberater für die SharePoint Server 2010-Stapel- und Mainstream .NET 3.5-Entwicklung tätig. Er ist ein begeisterter Programmierer und interessiert sich auch für Extremprogrammierung und EDT.

Weitere Ressourcen

Weitere Informationen zu den in diesem Artikel erwähnten Themen, Konzepten und Features finden Sie in den folgenden Ressourcen:

• SharePoint Designer

• Internet Explorer-Entwicklersymbolleiste

• Planen im Hinblick auf die Browserunterstützung

• Praxisbezogenes Branding mit SharePoint-Veröffentlichungsseiten

• W3C CSS Validator

• CSS-Lernprogramme von W3Schools

• Von Microsoft zugewiesene Gebietsschema-IDs

• ExpressionBuilder-Klasse

• Verwalten von SharePoint mit Windows PowerShell

• Bereitstellen von Brandinglösungen für SharePoint 2010-Websites mithilfe von Sandkastenlösungen

• Anpassen der XSL für das Inhalt-nach-Abfrage-Webpart

• Anpassen von RSS für das Webpart für Inhaltsabfragen

• Windows PowerShell und SharePoint

• Stellvertretungs-Steuerelement

• Vorgehensweise: Anpassen von Formaten

• SharePoint-Websteuerelement "CSSLink"

• SharePoint-Websteuerelement "CSSRegistration"

• SharePoint -Websteuerelement "Theme"

• AlternateCssUrl-Klasse

• Grundlegendes zu "Onet.xml"

• Project-Element in "Onet.xml"

• Verwendung von CSS-Klassen (Cascading Stylesheets) in SharePoint Foundation

• Verwenden des Inhalts-Editor-Webparts

• Theme Builder

• SharePoint Developer Center