Compartir a través de

Hacer que los archivos CSS personalizados tengan temas disponibles en SharePoint

Obtenga información sobre cómo agregar el marcado de estilo de comentario a un archivo CSS para que se puede utilizar en el motor de creación de temas de SharePoint.

Introducción a las anotaciones

Las anotaciones son marcado de estilo de comentario especiales que indican al motor de creación de temas de SharePoint cómo las propiedades de tema en un archivo CSS. Cuando se aplica un tema a un sitio, el motor de creación de temas reemplaza los valores de propiedad CSS con los valores de tema adecuado. En SharePoint, puede usar anotaciones para cambiar el color, la fuente o la imagen de fondo. También puede cambiar el color de una imagen. Si usa archivos CSS personalizados, debe agregar estas anotaciones en los archivos CSS si desea usarlos con el motor de creación de temas de SharePoint. Si se aplica un tema a un sitio que usa archivos CSS personalizados y no ha agregado anotaciones, no se modifican las propiedades de CSS. Esto se puede producir en un sitio que tiene un diseño que no coinciden.

En este artículo se describe las anotaciones disponibles y cómo registrar archivos CSS.

Para obtener más información sobre temas personalizados, vea How to: Deploy a custom theme in SharePoint (Cómo: Implementar un tema personalizado en SharePoint ) y How to: Create a master page preview file in SharePoint (Cómo: Crear un archivo de vista previa de página maestra en SharePoint).

Agregar anotaciones a archivos CSS personalizados

Anotaciones indican al motor de creación de temas de SharePoint cómo las propiedades de tema en un archivo CSS. Esta sección describen las anotaciones disponibles y cómo puede usarse.

Anotación ReplaceColor

La anotación de ReplaceColor reemplaza el valor de color con el color del tema especificado. Se puede usar con las propiedades CSS que definen un valor de color, como color, background-color, border y así sucesivamente.

A continuación muestra el formato de la anotación de ReplaceColor.

/* [ReplaceColor(themeColor:"ColorSlot"[, themeShade:"ShadeValue"][, themeTint:"TintValue"][, opacity:"OpacityValue"])] */

Reemplace ColorSlot con el nombre de la anotación de la ranura de color que va a usar. Para ver una lista de ranuras de color disponibles, vea la sección Asignación de ranuras de color en Paletas de colores y fuentes de SharePoint.

Use el parámetro opcional themeShade si desea oscurecer el color del tema. Reemplace ShadeValue con un valor numérico de 0,0 (sin cambio) a 1,0 (más oscuro).

Use el parámetro opcional themeTint si desea aclarar el color del tema. Reemplace TintValue con un valor numérico de 0,0 (sin cambio) a 1,0 (más claro).

Use el parámetro opcional opacity si desea especificar la opacidad del color del tema. Reemplace OpacityValue con un valor numérico que especifica el valor de opacidad. Los intervalos de configuración opacidad de 0,0 (completamente transparente) a 1,0 (totalmente opaco).

A continuación muestra ejemplos de la anotación de ReplaceColor que se usa en un archivo CSS.

  • /* [ReplaceColor(themeColor:"BodyText")] */ color:#444;
  • /* [ReplaceColor(themeColor:"BackgroundOverlay",opacity:"0.5")] */ background-color:#fff;
  • /* [ReplaceColor(themeColor:"EmphasisBackground",themeTint:"0.05")] */ background-color:#f2faff;

Anotación ReplaceFont

La anotación de ReplaceFont agrega la fuente del tema especificado a la lista de fuentes disponibles. Se puede usar con las propiedades CSS font y font-family.

A continuación muestra el formato de la anotación de ReplaceFont.

/* [ReplaceFont(themeFont:"FontSlot")] */

Reemplace FontSlot por el nombre de la ranura de fuente que se va a usar. Para ver una lista de ranuras de fuente disponibles, vea la sección de Ranuras de fuente en Paletas de colores y fuentes de SharePoint.

A continuación muestra un ejemplo de la anotación de ReplaceFont. En este ejemplo, si la ranura de fuente body se define como Courier en el tema, se agregará como el primer elemento de la lista de fuentes disponibles en el Asistente de Choose the Look Courier.

  • /* [ReplaceFont(themeFont:"body")] */ font-family:"Segoe UI","Segoe",Tahoma,Helvetica,Arial,sans-serif;

Anotación ReplaceBGImage

La anotación de ReplaceBGImage reemplaza la imagen de fondo en el archivo CSS con la imagen de fondo del tema. Se puede usar con las propiedades CSS background y background-image.

A continuación muestra el formato de la anotación de ReplaceBGImage. La anotación ReplaceBGImage también puede usarse con el filtro de AlphaImageLoader para admitir versiones anteriores de Internet Explorer.

/* [ReplaceBGImage] */

Anotación RecolorImage

La anotación de RecolorImage recolors la imagen especificada.

A continuación describe el formato de la anotación de RecolorImage.

/* [RecolorImage(themeColor:"ColorSlot"[, method:["Tinting"|"Blending"|"Filling"]][, includeRectangle: {x:x-Setting,y:y-Setting,width:RegionWidth,height:RegionHeight})] */

Reemplace ColorSlot por el nombre de anotación de la ranura de color. Para ver una lista de ranuras de color disponibles, vea la sección Asignación de ranuras de color en Paletas de colores y fuentes de SharePoint.

Use el parámetro opcional method si desea especificar el método de cambiar el color.

Use the optional includeRectangle parameter if you want to recolor only a specific region of an image. Reemplace x-Setting, y-Setting, RegionWidth y RegionHeight por las coordenadas x, y, ancho y alto de la región que desea volver a colorear.

A continuación muestra ejemplos de la anotación de RecolorImage que se usa en un archivo CSS.

  • /* [RecolorImage(themeColor:"SubtleBodyText",method:"Tinting")] */ background-image:url("/_layouts/15/images/tabtitlerowbottombg.png?rev=23");
  • /* [RecolorImage(themeColor:"BodyText",method:"Filling",includeRectangle:{x:161,y:178,width:16;height:16})] */ background:url("/_layouts/15/images/spcommon.png?rev=23") no-repeat -161px -178px;

Cargar el archivo CSS en la carpeta de temas en la biblioteca de estilos

Coloque los archivos CSS personalizados en la carpeta Themable en la biblioteca de estilos (no la carpeta Themable en la Galería de páginas maestras). Sólo los archivos CSS que se almacenan en la carpeta Themable en la biblioteca de estilos se reconocen por el motor de creación de temas. La carpeta Themable se crea automáticamente para sitios de publicación. De lo contrario, puede crear la carpeta Themable en la ubicación correcta (http:// SiteCollectionName/Style Library/ language/Themable/).

Nota:

El nombre de la carpeta de idioma debe tener el formato de 4 dígitos ll-cc para identificar el idioma y la referencia cultural, respectivamente. Por ejemplo, en-us o ar-sa. Para obtener más información, vea identificadores de idioma y valores de identificador OptionState en Office 2013.

Archivos CSS deben ser protegidos y publicados. Si se modifican los archivos CSS, debe volver a aplicar el tema para que los cambios que se reconozca.

Registrar el archivo CSS

Debe registrar el archivo CSS con una página maestra antes de que el archivo CSS puede ser utilizado por el motor de creación de temas. Esto indica a la página maestra para el archivo CSS cuando se aplica un tema a un sitio. Para registrar un archivo CSS, agregue un <elemento SharePoint:CssRegistration> al <head> elemento de la página maestra. A continuación se muestra el formato del <elemento SharePoint:CssRegistration> .

<SharePoint:CssRegistration Name="CSSFileLocation" runat="server" />

Reemplace CSSFileLocation con la ubicación del archivo CSS.

A continuación se muestra un ejemplo de un <elemento SharePoint:CssRegistration> .

<head>
…
<SharePoint:CssRegistration Name="<%$SPUrl:~SiteCollection/Style Library/~language/Themable/MyCustomFile.css%>" runat="server" />
</head>

Nota:

[!NOTA] No se puede usar el token de %$SPUrl en SharePoint Foundation 2013. Debe usar una dirección URL para especificar la ubicación del archivo CSS.

Consulte también