Share via

Personalizar una página de SharePoint con aprovisionamiento remoto y CSS

  • Artículo

Puede usar hojas de estilos en cascada (CSS) para personalizar los campos de texto enriquecido y zonas de elementos web de SharePoint. Puede personalizar campos de texto enriquecido directamente en la página que se está editando. Para las zonas de elementos web, puede usar el elemento web Editor de scripts para agregar HTML o script, o asociar una hoja de estilos interna.

Para el ejemplo de código que está asociado a este artículo, vea Branding.AlternateCSSAndSiteLogo del proyecto modelos y prácticas de Office 365 Developer en GitHub.

Importante

Esta opción de extensibilidad solo está disponible para experiencias clásicas de SharePoint. No puede usar esta opción con experiencias modernas en SharePoint Online, como con los sitios de comunicación. Tenga también en cuenta que no debe tomar una dependencia en la estructura de la página html o en los nombres de estilo de fábrica CSS, ya que se pueden ajustar sin previo aviso.

Personalizar campos de texto enriquecido

Puede personalizar campos de texto enriquecido con CSS directamente en el editor de página:

  1. En la página de SharePoint, elija Editar para abrir el editor de página.

  2. En la cinta de opciones, elija Insertar>Código para insertar.

Ahora puede agregar o modificar elementos CSS de un campo de texto enriquecido.

Personalizar zonas de elementos web

Para personalizar las zonas de elementos web con CSS, use el elemento web Editor de scripts.

Nota:

Si está usando SharePoint Online y la característica NoScript, el elemento web Editor de scripts está deshabilitado.

En el ejemplo de código siguiente se carga el CSS personalizado a la biblioteca de activos, se aplica una referencia a la dirección URL de CSS con una acción personalizada y luego se crea una acción personalizada para crear un vínculo al nuevo archivo CSS.

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.
        }
    }
}

Vea también