Contenidos de la biblioteca de estilos en SharePoint 2010

Controles web CSS en SharePoint

Los controles del servidor web son responsables de administrar y representar enlaces de archivos CSS y hojas de estilo. De forma predeterminada, los controles del servidor web se encuentran en las páginas maestras de SharePoint. Para buscar páginas maestras, busque en la Galería de páginas maestras y diseños de página o, en SharePoint Foundation, en la galería de páginas maestras. La ruta relativa a la galería es /_catalogs/masterpage/Forms/AllItems.aspx.

Localización de la página maestra

Para examinar los controles del servidor web CSS en SharePoint, debe obtener una copia de la página maestra que se utiliza en el sitio. Pero para descargar una copia de la página maestra de su sitio, debe saber qué página maestra utiliza su sitio.

Utilice uno o más de los siguientes para determinar qué página maestra utiliza su sitio:

• En un sitio de SharePoint Server 2010 donde las funciones de publicación están habilitadas y activadas, acceda a la página Configuración de la página maestra del sitio a través de Acciones del sitio,  . .Página maestra , haz clic en el enlace Apariencia. Luego, en la sección Configuración, Sitio

• En lugar de utilizar el menú para ubicar la página Configuración de la página maestra del sitio, agregue el siguiente fragmento de URL al final de la dirección del servidor de su sitio: /_layouts/ChangeSiteMasterPage.aspx; por ejemplo, https://contoso.com/\_layouts/ChangeSiteMasterPage.aspx

• En un sitio de SharePoint Foundation, puede usar Windows PowerShell para determinar qué página maestra usa el sitio, como se muestra en la Figura 4. A continuación se muestra un script de ejemplo.

  Potencia Shell

  $web = get-spweb("https://contoso.com");$web.masterurl

Figura 4. v4.master en un sitio de grupo de SharePoint

La Tabla 4 enumera todos los controles del servidor web relacionados con CSS y que están disponibles en SharePoint Server. Puede encontrar estos controles en el espacio de nombres Microsoft.SharePoint.WebControls, que forma parte del ensamblado Microsoft.SharePoint.dll.

Tabla 4. Controles del servidor web CSS en SharePoint 2010

Ampliar tabla

Las siguientes secciones describen cada control que se enumera en la Tabla 4 y resumen los beneficios de cada uno.

Enlace CSS

El control web CSSLink se encuentra en las páginas maestras de SharePoint y es responsable de representar el código HTML <LINK>. elemento. El control CSSLink funciona con los controles CSSRegistration. Si hay controles CSSRegistration en la página, el control CSSLink registra y representa las referencias de archivos CSS adicionales que realiza el control de registro.

El control CSSLink tiene los siguientes miembros:

• UIVersion (opcional): permite a los propietarios de sitios cambiar la apariencia de un sitio de SharePoint actualizado o migrado. Habilita la vista previa del sitio en la interfaz de usuario de SharePoint o la interfaz de usuario de Microsoft Office SharePoint Server (MOSS) 2007. Establezca el valor en 4 para SharePoint y configúrelo en 3 para sitios MOSS 2007.

• Versión (opcional): anula la versión de control de la clase SPControl.

• Alternativo (opcional): indica si el CSS principal (Core.css o Corev4.css) se representa con otras referencias de archivos CSS o si se representa un CSS alternativo. El valor predeterminado es Falso, que especifica que se representa el archivo CSS principal (core.css o corev4.css).

• DefaultUrl (opcional): establece u obtiene la URL predeterminada que se utiliza para el archivo CSS.

  El siguiente ejemplo muestra cómo se podría representar este control.

  HTML

  <link rel="hoja de estilo" tipo = "texto/css" href="/_layouts/1033/styles/Themable/search.css?rev=Uoc0fsLIo87aYwT%2FGX5UPw%3D%3D"/> <link rel="hoja de estilo" tipo = "texto/css" href="/_layouts/1033/styles/Themable/wiki.css?rev=9pXM9jgtUVYAHk21JOAbIw%3D%3D"/> <link rel="hoja de estilo" tipo = "texto/css" href="/_layouts/1033/styles/Themable/corev4.css?rev=iIikGkMuXBs8CWzKDAyjsQ%3D%3D"/>

El control CSSLink agrega un parámetro de cadena de consulta ?rev= a la referencia del archivo para controlar el almacenamiento en caché del navegador y forzar al navegador a obtener una nueva copia del archivo.

El control CSSLink también es responsable de los comportamientos descritos en la siguiente sección.

CSSRegistro

El control web CSSRegistration se utiliza con el control CSSLink para registrar archivos CSS para que puedan representarse en la página. Registre archivos CSS por URL relativa o estática.

El control CSSRegistration tiene los siguientes miembros:

• Nombre (obligatorio): el nombre del archivo a registrar. Si no se proporciona el nombre, SharePoint genera el error que se muestra en la Figura 5. El valor de la propiedad Nombre debe ser un nombre de archivo o una URL. Si se utiliza un nombre de archivo, el archivo CSS debe existir en la carpeta Estilo LAYOUTS.

  El siguiente ejemplo muestra cómo utilizar el archivo custom.css al que se hizo referencia anteriormente y que se implementó en la carpeta Estilos (C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\{Locale- ID}\ESTILOS).

  XAML

  <SharePoint:CssRegistration runat="servidor" Nombre = "personalizado.css" />

  El siguiente ejemplo muestra cómo el control CSSLink representa el registro custom.css.

  HTML

  <link rel="hoja de estilo" tipo = "texto/css" href="/_layouts/1033/styles/custom.css?rev=pFayZ3XaoWhaMymtxOLHNA%3D%3D"/>

  Además de hacer referencia a un archivo ubicado en el directorio LAYOUTS\{Locale ID}\Styles, puede registrar un archivo mediante una URL. Especifique una única URL en la propiedad Nombre mediante tokens. Algunos tokens de URL conocidos son: ~site, ~sitecollection y ~language. Utilice estos tokens junto con un generador de expresiones, como SPURl. El token ~language se asigna a una cadena de idioma-cultura, como en-us.

  Agregando una entrada similar al siguiente ejemplo...

  XAML

  <SharePoint:CssRegistration Name="<%$ SPUrl:~sitecollection/Style Library/~language/Custom/2ndcustom.css %>" runat="servidor" />

  …genera el siguiente HTML, como se muestra en la Figura 5.

  HTML

  <link rel="hoja de estilo" tipo = "texto/css" href="/Style%20Library/en-US/Custom/2ndcustom.css"/>

Figura 5. Error de página de SharePoint

• Después (opcional): especifica el orden de representación del archivo CSS que está registrando. Por ejemplo, si desea representar una hoja de estilos personalizada denominada custom.css después de core4.css, utilice el siguiente código para configurar el control de registro.

  XAML

  <SharePoint:CssRegistration Name="<%$ SPUrl:~sitecollection/Style Library/~language/Custom/2ndcustom.css %>" runat="servidor" Después = "core4.css" />

  Hacer esto obliga al control web CSSLink a representar su archivo personalizado después del enlace del archivo core4.css.

  HTML

  <link rel="hoja de estilo" tipo = "texto/css" href="/_layouts/1033/styles/Themable/corev4.css?rev=iIikGkMuXBs8CWzKDAyjsQ%3D%3D"/> <link rel="hoja de estilo" tipo = "texto/css" href="/Style%20Library/en-US/Custom/2ndcustom.css"/>

   Nota

  Puede utilizar el generador de expresiones SPURl solo en sitios de SharePoint Server; no está disponible en SharePoint Foundation.

• EnableCSSTheming: marca si desea que sus hojas de estilo sean temáticas, lo que significa que se pueden aplicar como parte de temas personalizados de SharePoint.

  • Establezca la propiedad EnableCSSTheming del control CSSRegistration en verdadero.

  • Agregue comentarios temáticos a sus clases de estilo CSS. Para ver algunos ejemplos, examine el directorio Themable que está instalado con SharePoint (C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14 \TEMPLATE\LAYOUTS\{Locale-ID}\STYLES\Themable).

    El siguiente ejemplo muestra la clase CSS ms-toolbar en Themable Corev4.css. Si aplica un tema, cada vez que se utiliza la clase ms-toolbar, el tema reemplaza el color #0072BC con el color del tema Hipervínculo que se define en el propio tema.

    .ms-barra de herramientas{ font-family:verdana; tamaño de fuente: 8 puntos; decoración de texto: ninguna; /* [ReplaceColor(themeColor:"Hipervínculo")] */ color:#0072BC; }

• ConditionalExpression: se utiliza para especificar si se aplica esta hoja de estilo para una versión específica del navegador. Por ejemplo, un valor de IE 9.0 especifica que el registro se aplica para Internet Explorer versión 9.0. El control CSSLink detecta el valor.

Tema

El control del servidor web Tema aplica un tema a un sitio de SharePoint. Hay varias herramientas disponibles que puedes utilizar para crear temas; por ejemplo Theme Builder en Microsoft Connect. Después de crear un tema (archivos .thmx), lo carga en la galería Temas , que se encuentra en la página Configuración (/_catalogs/theme/ Formularios/AllItems.aspx). Para aplicar un tema, acceda a la página Tema del sitio (/_layouts/themeweb.aspx).

Lo siguiente es un ejemplo.

HTML

<link rel="hoja de estilo" tipo = "texto/css" href="/_catalogs/theme/Themed/54E2D43/search-7E1AFF02.css?ctag=1"/> <link rel="hoja de estilo" tipo = "texto/css" href="/_catalogs/theme/Themed/54E2D43/wiki-ECF524AA.css?ctag=1"/> <link rel="hoja de estilo" tipo = "texto/css" href="/_catalogs/theme/Themed/54E2D43/corev4-8A0ABD2F.css?ctag=1"/>

Cuando aplica un tema, SharePoint crea una nueva carpeta de tema que incluye todos los archivos CSS y de imagen necesarios para representar el tema. La nueva carpeta de temas no aparece en Configuración del sitio o en Ver todo el contenido. Al utilizar SharePoint Designer, puede ver archivos de temas, como se muestra en la Figura 6.

Figura 6. Temas de SharePoint