Verwenden von CSS zum Branding von SharePoint-Seiten
Cascading Stylesheets (CSS) spielen beim SharePoint-Branding eine große Rolle. Um das Websitedesign in SharePoint und SharePoint Online erfolgreich anzupassen, ist es sinnvoll, dass Sie sich damit vertraut machen, wie SharePoint CSS verwendet.
Wichtig
Diese Erweiterbarkeitsoption ist nur für klassische SharePoint-Oberflächen verfügbar. Sie können diese Option nicht mit modernen Benutzeroberflächen in SharePoint Online, wie z. B. mit Kommunikationswebsites, verwenden. Beachten Sie, dass Sie keine Abhängigkeit von der HTML-Seitenstruktur oder den einsatzbereiten CSS-Formatvorlagennamen verwenden sollten, da diese ohne vorherige Änderung angepasst werden können.
Übersicht über CSS-Branding
Beim Erstellen einer SharePoint -Websitesammlung erstellt SharePoint einen Gestaltungsvorlagenkatalog (_catalogs/masterpage), in dem die meisten Brandindressurcen, einschließlich MASTER-, CSS, Bild-, HTML- und JavaScript-Dateien, gespeichert sind.
SharePoint verwendet die Seite „seattle.master“ standardmäßig für Teamwebsites, Veröffentlichungswebsites und Teamwebsites mit aktivierter Veröffentlichung. „mysite15.master“ wird für OneDrive for Business-Websites verwendet. Jede Master-Datei verweist auf die Datei „corev15.css“, die aus einer Vielzahl von CSS-Dateien besteht, die standardmäßig in SharePoint enthalten sind.
Alle Standard-Masterseiten verwenden "corev15.css" beim Verarbeiten von Formatvorlagen und basieren auf der CSS-Überlappung und die CSS-Dateifreigabe, um zu lösen, welche Formatvorlagen auf bestimmte Steuerelemente und Elemente in Abschnitten einer Seite angewendet werden. Es werden auch mehrere CSS-Dateien kombiniert, woraus die Datei „oslo.css“ entsteht, die mit der oslo.master-Masterseite verwendet wird.
CSS auf Masterseiten
Der <SharePoint:CssRegistration>-Inhaltsplatzhalter, der der WebControls.CssRegistration-Klasse im serverseitigen Objektmodell entspricht, definiert die CSS-Datei. Wie ein Verweis auf eine Masterseite ersetzt SharePoint die Token in der Masterseite, wenn die Seite verarbeitet wird. Die WebControls.CssLink-Klasse liest die Registrierung aus der Masterseite und fügt ein <link>-Tag in die resultierende HTML-Datei ein, die generiert wird.
Sehen Sie sich das folgende Beispiel an:
<SharePoint:CssRegistration name="<% $SPUrl:~SiteCollection/Style Library/~language/Core Styles/contoso.css%>" runat="server"/>
Dieser Code wird zur Laufzeit wie folgt dargestellt.
<link rel="stylesheet" type="text/css" href="/sites/nopub/Style%20Library/Core%20Styles/contoso.css">
Die CSSLink-Klasse rendert alle Formatvorlagen, wenn die Seite gerendert wird. Wenn Sie Formatvorlagen in einer benutzerdefinierten CSS-Datei definieren, die auch in „corev15.css“ definiert sind, werden diese überschrieben.
Datei „Corev15.css“
Standardmäßig werden zahlreiche CSS auf SharePoint angewendet. Die Datei „corev15.css“ ist die Hauptquelle für Formatvorlagen in SharePoint. Diese Datei wird im SharePoint 15-Ordner auf dem Server unter \TEMPLATE\LAYOUTS\1033\STYLES\Themable\COREV15.CSS gespeichert und nicht im Gestaltungsvorlagenkatalog der Stammwebsite und Startseite.
Sehen Sie sich die Datei „corev15.css“ mithilfe der Entwicklertools in Ihrem Webbrowser an, um zu verstehen, wie SharePoint CSS standardmäßig verwendet. Verwenden Sie in Internet Explorer die Internet Explorer-Symbolleiste für Entwickler (indem Sie die Taste F12 drücken), und wählen Sie die Registerkarte CSS aus, um „corev15.css“ anzuzeigen.
Die in „corev15.css“ definierten Formatvorlagen verwenden die Präfixe MS und S4, die Formatvorlagen angeben, die von Microsoft erstellt wurden. „corev15.css“ verwendet auch viele untergeordnete Selektoren.
Wenn Sie die Datei anzeigen, werden Sie feststellen, dass viele Kommentare das folgende Format aufweisen: /* [ReplaceFont ( themeFont:"body")] */. SharePoint liest diese Kommentare, wenn ein zusammengesetztes Design angewendet wird. Über die Kommentare wird SharePoint angewiesen, das Attribut der CSS zu ändern, die unmittelbar auf den Kommentar folgt. Durch Anwenden eines zusammengesetzten Erscheinungsbilds werden möglicherweise viele der Standardfarben, Schriftarten und Hintergrundbilder geändert, die angewendet werden, und folglich die Einstellungen in „corev15.css“ aktualisiert.
Hinweis
Durch Auswählen der Datei „corev15.css“ auf diese Weise wird die gerenderte CSS und nicht die gespeicherte CSS geladen. Manchmal finden Sie möglicherweise Unterschiede zwischen diesen beiden. Benutzer-Agents wie Browser können das Rendern als Reaktion auf Benutzeraktionen ändern.
Warnung
Melden Sie sich nicht beim Server an, und bearbeiten oder passen Sie keine Kern-CSS-Dateien von SharePoint am SharePoint-Stamm an. Dies hat negative Auswirkungen auf den Support und das Upgrade. Bearbeiten Sie die Datei „corev15.css“ nie direkt; erstellen Sie immer eine Kopie, benennen Sie diese auf, und bearbeiten Sie stattdessen die neue Datei. Durch Bearbeiten von „corev15.css“ wird das Branding auf alle Webanwendungen auf dem Server angewendet.
So erstellen Sie eine benutzerdefinierte Formatvorlage für SharePoint
Erstellen Sie eine Kopie von „corev15.css“, und nennen Sie sie „contosov15.css“.
Öffnen Sie die relevante Gestaltungsvorlage (in diesem Beispiel „contoso.masterpage“), und ändern Sie die Zeile „CssRegistration“ so, dass sie auf „corev15.css“ von „corev15.css“ zeigt, wie im folgenden Beispiel gezeigt.
<SharePoint:CssRegistration Name="Themable/contoso.css" runat="server" />
- Fügen Sie unterhalb der Zeile "CssRegistration" Folgendes hinzu.
<SharePoint:CssRegistration name="/_catalogs/masterpage/contoso/contoso.css"
runat="server">
Zusammengesetzte Designs in benutzerdefiniertem Branding
Sie können zusammengesetzte Designs in benutzerdefiniertem Branding verwenden, wenn CSS von einer Masterseite aufgerufen wird. Die CSS-Datei wird im SharePoint-Dateisystem an einem der folgenden Speicherorte gespeichert:
15\TEMPLATE\LAYOUTS\{LCID}\STYLES\Themable/Style Library/Themable//Style Library/{culture}/Themable/
Sie können benutzerdefinierte Brandingdateien in /Style Library/Themable/ und /Style Library/{culture}/Themable/platzieren, können aber 15\TEMPLATE\LAYOUTS\{LCID}\STYLES\Themable nicht bearbeitet werden, sodass Sie keine benutzerdefinierten Dateien an diesem Speicherort speichern können.
Hinweis
Wenn diese Speicherorte standardmäßig nicht vorhanden sind, können Sie sie manuell erstellen; diese werden dann von SharePoint erkannt.
Anwenden von benutzerdefiniertem CSS auf eine SharePoint-Seite
Sie können benutzerdefinierte CSS zu Rich-Text-Felder und Webpartzonen hinzufügen. Um CSS zu einem Rich-Text-Feld hinzuzufügen, setzen Sie die Seite in den Bearbeitungsmodus, und wählen Sie Einfügen>Code einbetten im Menüband aus. Verwenden Sie für Webpartzonen das Skript-Editor-Webpart, um HTML, Skripts oder eine interne Formatvorlage hinzuzufügen. Sie können diesen Ansatz verwenden, um die Navigation über den Schnellstartbereich in der standardmäßigen SharePoint-Benutzeroberfläche auszublenden. Wenn Sie SharePoint Online und das Feature „NoScript“ verwenden, deaktiviert NoScript das Skript-Editor-Webpart.
Wenden Sie CSS auf eine SharePoint -Website mithilfe einer externen Formatvorlage an, und fügen Sie einen Verweis zu der Formatvorlage im <link>-Tag innerhalb der <head>-Tags der SharePoint-Seite ein.
Im folgenden Codebeispiel wird veranschaulicht, wie benutzerdefiniertes CSS in die Objektbibliothek hochgeladen, ein Verweis auf die CSS-URL mit einer benutzerdefinierten Aktion angewendet und dann eine benutzerdefinierte Aktion zum Erstellen eines Links zu der neuen CSS-Datei erstellt wird. Dieser Code ist Teil des Branding.AlternateCSSAndSiteLogo-Beispiels auf GitHub.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.IO;
using Microsoft.SharePoint.Client;
using Microsoft.SharePoint.Client.EventReceivers;
namespace AlternateCSSAppAutohostedWeb.Services
{
public class AppEventReceiver : IRemoteEventService
{
public SPRemoteEventResult ProcessEvent(SPRemoteEventProperties properties)
{
SPRemoteEventResult result = new SPRemoteEventResult();
try
{
using (ClientContext clientContext = TokenHelper.CreateAppEventClientContext(properties, false))
{
if (clientContext != null)
{
Web hostWebObj = clientContext.Web;
List assetLibrary = hostWebObj.Lists.GetByTitle("Site Assets");
clientContext.Load(assetLibrary, l => l.RootFolder);
// First, upload the CSS files to the Asset library.
DirectoryInfo themeDir = new DirectoryInfo(System.Web.Hosting.HostingEnvironment.ApplicationPhysicalPath + "CSS");
foreach (var themeFile in themeDir.EnumerateFiles())
{
FileCreationInformation newFile = new FileCreationInformation();
newFile.Content = System.IO.File.ReadAllBytes(themeFile.FullName);
newFile.Url = themeFile.Name;
newFile.Overwrite = true;
Microsoft.SharePoint.Client.File uploadAsset = assetLibrary.RootFolder.Files.Add(newFile);
clientContext.Load(uploadAsset);
break;
}
string actionName = "SampleCSSLink";
// Now, apply a reference to the CSS URL via a custom action.
// Clean up existing actions that you might have deployed.
var existingActions = hostWebObj.UserCustomActions;
clientContext.Load(existingActions);
// Run uploads and initialize the existing Actions collection.
clientContext.ExecuteQuery();
// Clean up existing actions.
foreach (var existingAction in existingActions)
{
if(existingAction.Name.Equals(actionName, StringComparison.InvariantCultureIgnoreCase))
existingAction.DeleteObject();
}
clientContext.ExecuteQuery();
// Build a custom action to write a link to our new CSS file.
UserCustomAction cssAction = hostWebObj.UserCustomActions.Add();
cssAction.Location = "ScriptLink";
cssAction.Sequence = 100;
cssAction.ScriptBlock = @"document.write('<link rel=""stylesheet"" href=""" + assetLibrary.RootFolder.ServerRelativeUrl + @"/cs-style.css"" />');";
cssAction.Name = actionName;
// Apply.
cssAction.Update();
clientContext.ExecuteQuery();
}
result.Status = SPRemoteEventServiceStatus.Continue;
return result;
}
}
catch (Exception ex)
{
result.Status = SPRemoteEventServiceStatus.CancelWithError;
result.ErrorMessage = ex.Message;
return result;
}
}
public void ProcessOneWayEvent(SPRemoteEventProperties properties)
{
// This method is not used by app events.
}
}
}