Usar CSS para la personalización de marcas en páginas de SharePoint
La hoja de estilos en cascada (CSS) desempeña un papel importante en la personalización de marca de SharePoint. Para personalizar correctamente el diseño de un sitio en SharePoint y SharePoint Online, resulta útil estar familiarizado con el uso que SharePoint hace de CSS.
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.
Información general sobre la personalización de marca de CSS
Cuando se crea una colección de sitios de SharePoint, SharePoint crea una galería de páginas maestras (_catalogs/masterpage) donde se almacenan la mayoría de los activos de marca, incluidos los archivos .master, .css, image, HTML y JavaScript.
SharePoint usa la página seattle.master de manera predeterminada para los sitios de grupo, los sitios de publicación y los sitios de grupo con publicación habilitada. Para los sitios de OneDrive para la Empresa, usa mysite15.master. Cada archivo .master hace referencia al archivo corev15.css, que se genera a partir de una variedad de archivos .css entregados con SharePoint listos para ser usados.
Todas las páginas maestras predeterminadas usan corev15.css al procesar los estilos y dependen de la cascada de CSS y el uso compartido de archivos de CSS para resolver qué estilos se aplican a determinados controles y elementos de las regiones de una página. También se combinan varios archivos CSS para generar el archivo oslo.css, que se usa con la página principal oslo.master.
CSS en páginas maestras
El marcador de contenido <SharePoint:CssRegistration>, que corresponde a la clase WebControls.CssRegistration del modelo de objetos del lado servidor, define el archivo CSS. Como una referencia a una página maestra, SharePoint reemplaza los tokens en dicha página cuando esta se procesa. La clase WebControls.CssLink lee el registro de la página principal e inserta una etiqueta <link> en el archivo HTML resultante que se genera.
Veamos el ejemplo siguiente.
<SharePoint:CssRegistration name="<% $SPUrl:~SiteCollection/Style Library/~language/Core Styles/contoso.css%>" runat="server"/>
En el tiempo de ejecución, este código se presenta de la siguiente manera.
<link rel="stylesheet" type="text/css" href="/sites/nopub/Style%20Library/Core%20Styles/contoso.css">
La clase CSSLink presenta todas las páginas de estilo al presentar la página. Si define estilos en un archivo .css personalizado que también se definen en corev15.css, estos se sobrescriben.
Archivo corev15.css
Gran parte de CSS se aplica a SharePoint de forma predeterminada. El archivo corev15.css. es el origen principal de estilos de SharePoint. Este archivo se almacena en la carpeta SharePoint 15 en el servidor en \TEMPLATE\LAYOUTS\1033\STYLES\Themable\COREV15.CSS y no en la Galería de páginas maestras del sitio raíz y la página principal.
Para ver cómo SharePoint usa CSS de forma inmediata, fíjese en el archivo corev15.css usando las herramientas de desarrollo en el explorador web. En Internet Explorer, use la barra de herramientas del desarrollador de Internet Explorer (se abre presionando F12) y elija la ficha CSS para ver corev15.css.
Los estilos que se definen en corev15.css usan los prefijos .ms- y .s4-, que indican que los estilos los creó Microsoft. Corev15.CSS también usa una gran cantidad de selectores secundarios y descendientes.
Al ver el archivo, verá muchos comentarios en este formato: /* [ReplaceFont ( themeFont:"body")] */. SharePoint lee estos comentarios cuando se aplica un aspecto compuesto. Los comentarios le indican a SharePoint que cambie el atributo de CSS que sigue inmediatamente al comentario. Aplicar un diseño compuesto podría cambiar muchos de los colores predeterminados, fuentes e imágenes de fondo que se aplican y posteriormente actualizar la configuración de corev15.css.
Nota:
Seleccionar el archivo corev15.css de esta forma carga el CSS representado en lugar del CSS guardado. A veces, es posible que encuentre discrepancias entre los dos. Los agentes de usuario, como los exploradores, también pueden cambiar la representación en respuesta a las acciones del usuario.
Advertencia
No inicie sesión en el servidor y edite o personalice los archivos CSS principales de SharePoint en la raíz de SharePoint. Si lo hace, afectará al soporte y a la actualización. Nunca modifique corev15.css directamente. Cree siempre una copia, cámbiele el nombre y edite el archivo nuevo. La edición de corev15.css aplicará la personalización de marca a todas las aplicaciones web que haya en el servidor.
Para crear una hoja de estilo personalizada para SharePoint
Haga una copia de corev15.css y asígnele el nombre “contosov15.css”.
Abra la página maestra correspondiente (en este ejemplo, “contoso.masterpage”) y modifique la línea de CssRegistration para que apunte a corev15.css desde corev15.css, como se muestra en el ejemplo siguiente.
<SharePoint:CssRegistration Name="Themable/contoso.css" runat="server" />
- Debajo de la línea de CssRegistration, agregue lo siguiente.
<SharePoint:CssRegistration name="/_catalogs/masterpage/contoso/contoso.css"
runat="server">
Diseños compuestos en marcas personalizadas
Puede usar diseños compuestos en marcas personalizadas cuando se llama a CSS desde una página maestra. El archivo CSS se almacena en el sistema de archivos de SharePoint en una de las siguientes ubicaciones:
15\TEMPLATE\LAYOUTS\{LCID}\STYLES\Themable/Style Library/Themable//Style Library/{culture}/Themable/
Puede colocar archivos de personalización de marca en /Style Library/Themable/ y /Style Library/{culture}/Themable/, pero 15\TEMPLATE\LAYOUTS\{LCID}\STYLES\Themable no es editable, por lo que no puede almacenar archivos personalizados en esa ubicación.
Nota:
Si estas ubicaciones no existen de manera predeterminada, puede crearlas manualmente y SharePoint las reconocerá como definibles mediante temas.
Aplicar CSS personalizado a una página de SharePoint
Puede agregar CSS personalizados a campos de texto enriquecido y zonas de elementos web. Para agregar CSS a un campo de texto enriquecido, coloque la página en modo de edición y elija Insertar>Código para insertar en la cinta de opciones. Para las zonas de elementos web, use el elemento web Editor de secuencias de comandos para agregar HTML, secuencias de comandos o una hoja de estilos interna. Puede usar este método para ocultar la navegación de Inicio rápido en la interfaz de usuario predeterminada de SharePoint. Si está usando SharePoint Online y la característica NoScript, esta última deshabilita el elemento web Editor de secuencias de comandos.
Aplique CSS a un sitio de SharePoint usando una hoja de estilos externa e incluyendo una referencia a la hoja de estilo en la etiqueta <link> dentro de las etiquetas <head> de la página de SharePoint.
En el ejemplo de código siguiente se ve cómo cargar CSS personalizado en el panel biblioteca, aplicar una referencia a la dirección URL de CSS con una acción personalizada y luego crear una acción personalizada para compilar un vínculo al nuevo archivo CSS. Este código forma parte del ejemplo Branding.AlternateCSSAndSiteLogo en 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.
}
}
}