Freigeben über

Anpassen einer SharePoint-Seite mithilfe von Remotebereitstellung und CSS

  • Artikel

Sie können Cascading Style Sheets (CSS) verwenden, um Rich-Text-Felder und Webpartzonen in SharePoint anzupassen. Rich-Text-Felder können Sie direkt auf der Seite anpassen, die Sie gerade bearbeiten. Bei Webpartzonen können Sie das Skript-Editor-Webpart verwenden, um HTML oder Skripts hinzuzufügen oder ein CSS-Stylesheet zuzuweisen.

Ein Codebeispiel, das diesem Artikel zugeordnet ist, finden Sie auf GitHub im Projekt „Office 365-Entwicklungsmuster und -übungen“ unter Branding.AlternateCSSAndSiteLogo.

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.

Anpassen von Rich-Text-Feldern

Sie können Rich-Text-Felder mithilfe von CSS direkt im Seiten-Editor anpassen:

  1. Wählen Sie auf Ihrer SharePoint-Seite Bearbeiten aus, um den Seiten-Editor zu öffnen.

  2. Wählen Sie im Menüband Einfügen>Code einbetten aus.

Sie können jetzt CSS-Elemente für ein Rich-Text-Feld hinzufügen oder ändern.

Anpassen von Webpartzonen

Zum Anpassen von Webpartzonen mithilfe von CSS verwenden Sie das Skript-Editor-Webpart.

Hinweis

Wenn Sie SharePoint Online und das Feature „NoScript“ verwenden, wird das Skript-Editor-Webpart deaktiviert.

Im folgenden Codebeispiel werden benutzerdefinierte CSS in die Objektbibliothek hochgeladen, ein Verweis auf die CSS-URL mit einer benutzerdefinierten Aktion angewendet und dann eine benutzerdefinierte Aktion erstellt, um eine Verknüpfung zu der neuen CSS-Datei zu erstellen.

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 we may 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 your 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.
        }
    }
}

Siehe auch