Compartilhar via

Personalizar uma página do SharePoint usando o provisionamento remoto e CSS

  • Artigo

É possível usar folhas de estilo em cascata (CSS) para personalizar campos rich text e zonas de Web Parts do SharePoint. A personalização de campos rich text pode ser feita diretamente na página que você está editando. Para zonas de Web Parts, use a Web Part de Editor de scripts para adicionar HTML ou scripts, ou associar a uma folha de estilo CSS.

Para obter um exemplo de código associado a este artigo, confira Branding.AlternateCSSAndSiteLogo no projeto Padrões e Práticas de Desenvolvedores do Office 365 no GitHub.

Importante

Essa opção de extensibilidade está disponível apenas para experiências clássicas do SharePoint. Você não pode usar essa opção com experiências modernas no SharePoint Online, como nos sites de comunicação. Observe também que você não deve depender da estrutura da página html ou dos nomes de estilo CSS prontos para uso, já que eles podem ser ajustados sem aviso prévio.

Personalizar campos rich text

É possível personalizar campos rich text usando o CSS diretamente no editor de página:

  1. Na página do SharePoint, escolha Editar para abrir o editor de página.

  2. Na faixa de opções, escolha Inserir>Código de Inserção.

Agora você pode adicionar ou modificar elementos CSS em um campo rich text.

Personalizar zonas de Web Parts

Para personalizar zonas de Web Parts usando CSS, use a Web Part do Editor de Scripts.

Observação

Se estiver usando o SharePoint Online e o recurso NoScript, a Web Part de Editor de Script estará desativada.

O exemplo de código a seguir carrega um CSS personalizado à Biblioteca de Ativos, aplica uma referência à URL do CSS com uma ação personalizada e cria uma ação personalizada para gerar um link para o novo arquivo de 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.
        }
    }
}

Confira também