Inhalt der Stilbibliothek in SharePoint 2010

CSS-Websteuerelemente in SharePoint

Webserver-Steuerelemente sind für die Verwaltung und Darstellung von CSS-Dateilinks und Stylesheets verantwortlich. Standardmäßig befinden sich die Webserver-Steuerelemente auf den SharePoint-Masterseiten. Um Masterseiten zu finden, schauen Sie in der Masterseiten- und Seitenlayout-Galerie oder in SharePoint Foundation in der Masterseiten-Galerie nach. Der relative Pfad zur Galerie lautet /_catalogs/masterpage/Forms/AllItems.aspx.

Suchen der Masterseite

Um die CSS-Webserver-Steuerelemente in SharePoint zu untersuchen, müssen Sie eine Kopie der Masterseite erhalten, die auf der Website verwendet wird. Um jedoch eine Kopie der Masterseite für Ihre Site herunterzuladen, müssen Sie wissen, welche Masterseite Ihre Site verwendet.

Verwenden Sie eine oder mehrere der folgenden Methoden, um zu bestimmen, welche Masterseite Ihre Website verwendet:

• Auf einer SharePoint Server 2010-Site, auf der Veröffentlichungsfunktionen aktiviert und aktiviert sind, greifen Sie über Site-Aktionen auf die Seite „Site-Masterseiteneinstellungen“ zu.  .Masterseite auf den Link Look and Feel. Klicken Sie dann im Abschnitt Einstellungen, Site

• Anstatt das Menü zu verwenden, um die Seite mit den Site-Masterseiteneinstellungen zu finden, hängen Sie den folgenden URL-Ausschnitt an das Ende der Serveradresse für Ihre Site an: /_layouts/ChangeSiteMasterPage.aspx; zum Beispiel https://contoso.com/\_layouts/ChangeSiteMasterPage.aspx

• Auf einer SharePoint Foundation-Site können Sie Windows PowerShell verwenden, um zu bestimmen, welche Masterseite die Site verwendet, wie in Abbildung 4 dargestellt. Im Folgenden finden Sie ein Beispielskript.

  Power Shell

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

Abbildung 4. v4.master auf einer SharePoint-Teamwebsite

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

Tabelle 4. CSS-Webserversteuerelemente in SharePoint 2010

Tabelle erweitern

Kontrolle	Beschreibung	Finden Sie das Steuerelement in . . .
CSSLink	<SharePoint:CssLink runat="server" Version="4"/>	Masterseiten
Thema	<SharePoint:Theme runat="server"/>	Masterseiten
CSSRegistrierung	<SharePoint:CssRegistration Name="minimalv4.css" runat="server" />	Masterseiten, Seitenlayouts

In den folgenden Abschnitten werden alle in Tabelle 4 aufgeführten Steuerelemente beschrieben und die jeweiligen Vorteile zusammengefasst.

CSSLink

Das CSSLink-Websteuerelement befindet sich in SharePoint-Masterseiten und ist für die Darstellung des HTML-Codes <LINK> verantwortlich. Element. Das CSSLink-Steuerelement funktioniert mit den CSSRegistration-Steuerelementen. Wenn auf der Seite CSSRegistration-Steuerelemente vorhanden sind, registriert und rendert das CSSLink-Steuerelement die zusätzlichen CSS-Dateiverweise, die das Registrierungssteuerelement erstellt.

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

• UIVersion (optional) – Ermöglicht Websitebesitzern, das Erscheinungsbild einer aktualisierten oder migrierten SharePoint-Website zu ändern. Ermöglicht die Site-Vorschau in der SharePoint-Benutzeroberfläche oder der Microsoft Office SharePoint Server (MOSS) 2007-Benutzeroberfläche. Legen Sie den Wert für SharePoint auf 4 und für MOSS 2007-Sites auf 3 fest.

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

• Alternativ (optional) – Flags, ob das Kern-CSS (Core.css oder Corev4.css) mit anderen CSS-Dateiverweisen oder ein alternatives CSS gerendert wird. Der Standardwert ist False und gibt an, dass die Kern-CSS-Datei (core.css oder corev4.css) gerendert wird.

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

  Das folgende Beispiel zeigt, wie dieses Steuerelement gerendert werden könnte.

  HTML

  <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 der Dateireferenz einen ?rev=-Abfragezeichenfolgenparameter hinzu, um das Browser-Caching zu steuern und den Browser zu zwingen, eine neue Kopie der Datei abzurufen.

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

CSSRegistrierung

Das CSSRegistration-Websteuerelement wird mit dem CSSLink-Steuerelement verwendet, um CSS-Dateien zu registrieren, damit sie auf der Seite gerendert werden können. Registrieren Sie CSS-Dateien nach relativer oder statischer URL.

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

• Name (erforderlich) – Der zu registrierende Dateiname. Wenn der Name nicht angegeben wird, gibt SharePoint den in Abbildung 5 gezeigten Fehler aus. Der Wert der Name-Eigenschaft sollte ein Dateiname oder eine URL sein. Wenn ein Dateiname verwendet wird, muss die CSS-Datei im Ordner LAYOUTS Style vorhanden sein.

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

  XAML

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

  Das folgende Beispiel zeigt, wie das CSSLink-Steuerelement die custom.css-Registrierung rendert.

  HTML

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

  Zusätzlich zum Verweisen auf eine Datei, die sich im Verzeichnis LAYOUTS\{Locale ID}\Styles befindet, können Sie eine Datei mithilfe einer URL registrieren. Geben Sie mithilfe von Token eine einzelne URL in der Eigenschaft „Name“ an. Einige bekannte URL-Token sind: ~site, ~sitecollection und ~sprache. Verwenden Sie diese Token zusammen mit einem Ausdrucksgenerator wie SPUrl. Das ~Language-Token wird einer Sprachkulturzeichenfolge zugeordnet, z. B. en-us.

  Hinzufügen eines Eintrags ähnlich dem folgenden Beispiel…

  XAML

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

  …erzeugt den folgenden HTML-Code, wie in Abbildung 5 dargestellt.

  HTML

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

Abbildung 5. SharePoint-Seitenfehler

• Nach (optional) – Gibt die Renderreihenfolge der CSS-Datei an, die Sie registrieren. Wenn Sie beispielsweise ein benutzerdefiniertes Stylesheet mit dem Namen „custom.css“ nach „core4.css“ rendern möchten, verwenden Sie den folgenden Code, um die Registrierungssteuerung zu konfigurieren.

  XAML

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

  Dadurch wird das CSSLink-Websteuerelement gezwungen, Ihre benutzerdefinierte Datei nach dem Dateilink „core4.css“ zu rendern.

  HTML

  <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"/>

   Notiz

  Sie können den Ausdrucksgenerator SPUrl nur auf SharePoint Server-Sites verwenden; Es ist in SharePoint Foundation nicht verfügbar.

• EnableCSSTheming – Legt fest, ob Ihre Stylesheets thematisch anpassbar sein sollen, was bedeutet, dass sie als Teil benutzerdefinierter SharePoint-Themen angewendet werden können.

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

  • Fügen Sie Themenkommentare zu Ihren CSS-Stilklassen hinzu. Um einige Beispiele zu sehen, sehen Sie sich das Verzeichnis Themable an, das mit SharePoint installiert wird (C:\Programme\Gemeinsame Dateien\Microsoft Shared\Web Server Extensions\14). \TEMPLATE\LAYOUTS\{Locale-ID}\STYLES\Themable).

    Das folgende Beispiel zeigt die CSS-Klasse „ms-toolbar“ im Themaable Corev4.css. Wenn Sie ein Design anwenden, ersetzt das Design jedes Mal, wenn die ms-toolbar-Klasse verwendet wird, die Farbe #0072BC durch die Hyperlink-Designfarbe, die im Design selbst definiert ist.

    .ms-toolbar{ Font-Familie:verdana; Schriftgröße: 8pt; Textdekoration: keine; /* [ReplaceColor(themeColor:"Hyperlink")] */ color:#0072BC; }

• ConditionalExpression – Wird verwendet, um anzugeben, ob dieses Stylesheet für eine bestimmte Browserversion angewendet werden soll. Der Wert IE 9.0 gibt beispielsweise an, dass die Registrierung für Internet Explorer Version 9.0 angewendet wird. Das CSSLink-Steuerelement erkennt den Wert.

Thema

Das Theme-Webserversteuerelement wendet ein Theme auf eine SharePoint-Site an. Es stehen mehrere Tools zur Verfügung, mit denen Sie Themen erstellen können. zum Beispiel Theme Builder auf Microsoft Connect. Nachdem Sie ein Design (.thmx-Dateien) erstellt haben, laden Sie es in die Galerie Designs hoch, die sich auf der Seite „Einstellungen“ (/_catalogs/theme/) befindet. Forms/AllItems.aspx). Um ein Thema anzuwenden, greifen Sie auf die Seite „Site-Thema“ zu (/_layouts/themeweb.aspx).

Das Folgende ist ein Beispiel.

HTML

<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, erstellt SharePoint einen neuen Designordner, der alle CSS- und Bilddateien enthält, die zum Rendern des Designs erforderlich sind. Der neue Themenordner wird nicht in Website-Einstellungen oder in Alle Inhalte anzeigen. Mithilfe von SharePoint Designer können Sie Designdateien anzeigen, wie in Abbildung 6 dargestellt.

Abbildung 6. SharePoint-Themen