Usar a CSS em páginas de identidade visual do SharePoint
A Folha de estilos em cascata (CSS) desempenha um papel grande na identidade visual do SharePoint. Para personalizar o design de site no SharePoint e no SharePoint Online com sucesso, é importante saber como o SharePoint usa a CSS.
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.
Visão geral de identidade visual CSS
Quando você cria um conjunto de sites do SharePoint, o SharePoint cria uma galeria de páginas mestras (_catalogs/página mestre) onde a maioria dos ativos de identidade visual, incluindo. master,. CSS, imagens, HTML e JavaScript arquivos são armazenados.
O SharePoint usa a página seattle.master por padrão para sites de equipe, sites de publicação e sites de equipe com publicação habilitada. Ele usa o mysite15 do OneDrive para sites de negócios. Cada arquivo. master refere-se ao arquivo corev15.css, que faz parte de uma variedade de arquivos .css entregues com o SharePoint pronto para uso.
Todas as páginas mestras padrão usam corev15.css ao processar estilos e confiam na cascata CSS e no compartilhamento de arquivos CSS para resolver quais estilos foram aplicados aos controles e elementos específicos em regiões de uma página. Vários arquivos CSS também são combinados para criar o arquivo oslo.css, que é usado com a página mestra oslo.master.
CSS em páginas mestras
O espaço reservado para conteúdo <SharePoint:CssRegistration>, que corresponde à classeWebControls.CssRegistration no modelo de objeto do servidor, define o arquivo CSS. Como uma referência a uma página mestra, o SharePoint substitui tokens na página mestra quando a página é processada. A classe WebControls.CssLink lê o registro da página mestra e insere uma <link> etiqueta no arquivo HTML resultante que é gerado.
Considere o exemplo seguinte.
<SharePoint:CssRegistration name="<% $SPUrl:~SiteCollection/Style Library/~language/Core Styles/contoso.css%>" runat="server"/>
Durante a execução, o código é processado da seguinte maneira.
<link rel="stylesheet" type="text/css" href="/sites/nopub/Style%20Library/Core%20Styles/contoso.css">
As classeCSSLink renderiza todas as planilhas de estilo quando a página é processada. Se você definir estilos em um arquivo personalizado .css que também são definidas em corev15.css, eles serão substituídos.
Arquivo corev15.css
Grande parte do CSS é aplicado ao SharePoint por padrão. O arquivo corev15.css é a principal fonte de estilos do SharePoint. Este arquivo é armazenado na pasta 15 do SharePoint no servidor em \TEMPLATE\LAYOUTS\1033\STYLES\Themable\COREV15.CSS e não na Galeria de Páginas Mestras do site raiz e na página inicial.
Para ver como o SharePoint usa o CSS pronto para uso, examine o arquivo corev15.css usando as ferramentas de desenvolvedor no navegador da web. No Internet Explorer, use a barra de ferramentas de desenvolvedor do Internet Explorer (acesse-a pressionando F12) e escolha a guia CSSpara exibir o corev15.css.
Os estilos estipulados no corev15.css usam os prefixos .ms – e .s4-, que indicam estilos criados pela Microsoft. Corev15.CSS também usa muitos seletores filhos e descendentes.
Ao visualizar o arquivo, você observará o número de comentários no seguinte formato: /* [ReplaceFont ( themeFont:"body")] */. O SharePoint lê esses comentários quando uma aparência composta é aplicada. Os comentários dizem para o SharePoint alterar o atributo CSS imediatamente após o comentário. Aplicar uma aparência composta pode alterar muitas das cores, fontes e imagens de tela de fundo padrão que são aplicadas e atualizar as configurações corev15.css posteriormente.
Observação
Selecionar o arquivo corev15.css dessa forma carrega o CSS renderizado em vez do CSS salvo. Às vezes, você pode encontrar discrepâncias entre os dois. Agentes de usuário como navegadores também podem alterar a renderização em resposta às ações do usuário.
Aviso
Não acesse o servidor e edite ou personalize os principais arquivos CSS do SharePoint na raiz do SharePoint. Fazer isso impacta negativamente o suportes e as atualizações. Nunca edite corev15.css diretamente. Sempre crie uma cópia, renomeie e edite o novo arquivo em vez dele. A edição do corev15.css aplica a identidade visual a todos os aplicativos web no servidor.
Para criar uma folha de estilos personalizada do SharePoint
Faça uma cópia do corev15.css e a nomeie contosov15.css.
Abra a página de mestre relevante (neste exemplo, contoso.masterpage) e modifique a linha CssRegistration para apontar para contosov15.css de corev15.css, conforme mostrado no exemplo a seguir.
<SharePoint:CssRegistration Name="Themable/contoso.css" runat="server" />
- Abaixo da linha CssRegistration, adicione o seguinte.
<SharePoint:CssRegistration name="/_catalogs/masterpage/contoso/contoso.css"
runat="server">
Aparências compostas na identidade visual personalizada
Você pode usar aparências compostas na identidade visual personalizada quando o CSS é chamado de uma página mestra. O arquivo CSS é armazenado no sistema de arquivos do SharePoint em um dos seguintes locais:
15\TEMPLATE\LAYOUTS\{LCID}\STYLES\Themable/Style Library/Themable//Style Library/{culture}/Themable/
Você pode colocar arquivos de identidade visual personalizados em /Style Library/Themable/ e /Style Library/{culture}/Themable/, mas 15\TEMPLATE\LAYOUTS\{LCID}\STYLES\Themable não é editável, portanto, não é possível armazenar arquivos personalizados nesse local.
Observação
Caso não haja locais por padrão, você pode criá-los manualmente e o SharePoint os reconhecerá como themable.
Aplicar o CSS personalizado a uma página do SharePoint
Você pode adicionar o CSS personalizado em zonas de web parts e campos de rich text. Para adicionar o CSS em um campo rich text, coloque a página no modo de edição e escolha Inserir>Código de Inserção na faixa de opções. Para zonas de web parts, use a web part de editor de scripts para adicionar HTML ou scripts, ou uma folha de estilos interna. Você pode usar essa abordagem para ocultar a navegação Início Rápido no SharePoint UI padrão. Se estiver usando o SharePoint Online e o recurso NoScript, o NoScript desabilitará a Web Part de Editor de Script.
Aplique o CSS a um site do SharePoint usando uma folha de estilos externa e incluindo uma referência a folha de estilos na etiqueta <link> dentro das etiquetas <head> da página do SharePoint.
O exemplo de código a seguir mostra como carregar um CSS personalizado à biblioteca de ativos, aplicar uma referência à URL do CSS com uma ação personalizada e criar uma ação personalizada para gerar um link para o novo arquivo de CSS. Esse código faz parte do exemplo Branding.AlternateCSSAndSiteLogo no 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.
}
}
}