Trabajar con el motor de creación de temas de SharePoint

 Artículo original publicado el sábado, 10 de abril de 2010

Hola, soy Kolby. A medida que nos acercamos al lanzamiento de SharePoint 2010, me siento cada vez más entusiasmado por nuestro producto y algunas de las funciones que hemos agregado en la versión 2010. En concreto espero con ansias las funciones para crear temas que el equipo de SharePoint agregó en esta versión. La semana pasada aprendí a configurar un archivo CSS para crear temas en una página maestra en SharePoint Designer 2010, y pensé que debía mostrárselo a todo el mundo.

¿Cuáles son las posibilidades de creación de temas?  

El motor de creación de temas funciona con archivos CSS y puede realizar lo siguiente (el nombre del token viene en cursiva):

• Reemplazar colores (como el color de fuente o de fondo): ReplaceColor
• Reemplazar fuentes: ReplaceFont
• Volver a colorear imágenes (con uno de estos tres métodos: tono, mezcla y relleno): RecolorImage

Mediante la interfaz de usuario del explorador, se puede seleccionar un tema del sitio integrado o, con SharePoint Server (SPS), crear uno nuevo eligiendo 12 colores y 2 fuentes. Estos valores se almacenan en un archivo THMX, un estándar que también Microsoft Office usa. También se puede crear un tema en Microsoft PowerPoint y guardarlo como archivo THMX para usarlo en SharePoint. Los archivos THMX se almacenan en la galería de temas del sitio raíz y se pueden agregar temas mediante SPD o Configuración del sitio > Galería de temas en el explorador). Los doce colores de temas se representan mediante los tokens:

• Dark1, Dark2
• Light1, Light2
• Accent1, Accent2, Accent3, Accent4, Accent5, Accent6
• Hyperlink
• Followed Hyperlink

El motor de creación de temas funciona con estos colores y produce otras cinco permutaciones de cada uno: el más claro, más claro, medio, más oscuro y el más oscuro. Para hacer referencia a una permutación en el archivo CSS, use el formato: Color-Permutación (“Light2-Darkest”, por ejemplo).

Sintaxis 

El motor de creación de temas funciona mediante la lectura de comentarios en el archivo CSS. Para un estilo temático, defina una opción predeterminada y coloque un token de creación de temas directamente antes del estilo. Por ejemplo: tengo un elemento background-color al que deseo aplicar el tema Light2-Darkest. Mi definición en el CSS tendría el siguiente aspecto:

/* [ReplaceColor(themeColor:"Light2-Darkest")] */ background-color:#707070;

En el tema predeterminado, el fondo aparecerá como #707070, pero cuando se aplique un tema, el color de fondo se reemplazará con Light2-Darkest. Para ver ejemplos de cómo usar los demás tokens, consulte el final de este artículo o busque el archivo CSS predeterminado para v4.master (corev4.css), que es una buena referencia.

Configuración del archivo 

Para configurar una página maestra con funcionalidad de creación de temas, debe hacer dos cosas:

1. Coloque el archivo CSS en una ubicación en la que el motor lo vea.
2. Registre correctamente el archivo CSS en la página maestra.

Ubicación 

El motor de creación de temas se ejecutará en archivos CSS sólo si se colocan en el lugar adecuado. Para nuestras personalizaciones, usaremos la carpeta RootSite/Style Library/~language/Themable. Esta carpeta existe para los sitios de SPS con la característica Publicación de SharePoint Server activada. Si va a trabajar en un sitio raíz sin esta estructura, sólo necesita una carpeta denominada “Style Library” en el sitio raíz con una carpeta denominada “Themable” dentro de ésta. El motor de creación de temas verá todo el contenido dentro de la carpeta Themable (incluido el contenido dentro de las subcarpetas). Vuelva a crear esta estructura de carpetas en SharePoint Designer o a través del explorador. La carpeta de idioma (language) es opcional, pero si desea tener distintos archivos CSS en diferentes idiomas, la necesitará. Para español, asigne a la carpeta el nombre es-es.

Las imágenes no tienen que colocarse en una ubicación específica, pero el lugar sugerido es una carpeta RootSite/Style Library/Images.

Estas son algunas sugerencias sobre cómo volver a colorear las imágenes. Si vuelve a colorear una imagen que se representa en varias ubicaciones, el último cambio de color realizado en la imagen se usará en todas las ubicaciones temáticas. Por ejemplo, quería mostrar diferentes métodos de cambio de color en la misma imagen (tono, combinación y relleno), pero todos aparecían rellenados. Tuve que guardar copias individuales de la imagen y crear temas diferentes (nota: una última alternativa es usar un atributo desasociar para indicar al motor que cree una nueva imagen al volver a colorearla, pero este método debe usarse con moderación por motivos de rendimiento al descargar varias copias de imágenes durante la representación. Por ese motivo, no entraré en detalles aquí). En el caso de los grupos de imágenes (un archivo único que contiene más de una imagen), puede volver a colorear partes de la imagen mediante el parámetro includeRectangle (vea el archivo corev4.css para obtener un ejemplo de cómo hacerlo).

Registro 

Para que los archivos CSS temáticos se apliquen a nuestra página maestra, tenemos que registrar el archivo CSS en lugar de simplemente vincularlo. Esto apuntará la página maestra al archivo CSS temático cuando se aplique un tema. Coloque el siguiente parámetro en la etiqueta de encabezado de la página maestra:

<SharePoint:CssRegistration name="<% $SPUrl:~sitecollection/Style Library/~language/ Themable /myStyleSheet.css %>" After="corev4.css" runat="server"/>

El parámetro After garantiza que el archivo CSS temático se aplique a la página después de corev4.css. Tenga en cuenta, no obstante, que el token <% $SPUrl no se resolverá en SharePoint Foundation (SPF). En SPF, tendrá que especificar la ubicación mediante una dirección URL codificada de forma rígida. Desgraciadamente esto será una limitación si desea usar diferentes archivos CSS para diferentes idiomas (ya que no tendrá un token ~language).

Demostración 

Bien, ya tenemos configurado nuestro archivo CSS “temático”. Prepare el borrador de una página maestra de aspecto logrado y pruébelo. Para tener una mejor comprensión de la paleta de colores que usaré con mis temas, creé en v4.master una tabla grande que muestra todas las permutaciones de color. También incluí una imagen de ejemplo e intenté volver a colorearla. A continuación verá el aspecto de mi creación con la combinación de colores predeterminada (observe que usé el color blanco como configuración predeterminada para los estilos de color de fondo).

A continuación, voy al explorador y selecciono un nuevo tema del sitio. ¿Qué le parece Convención con Papiro y Segoe Script como fuentes? Ahora tengo una tabla mucho más vistosa (ver más abajo). Apliqué los temas de textos de hipervínculos y las etiquetas de imagen. Para el cambio de color, usé Light2-Darkest (es posible ver la perfecta combinación de color entre la celda Light2-Darkest y el logotipo que se volvió a colorear con el método de relleno).

Código de ejemplo 

Este es un ejemplo del archivo CSS de la segunda imagen de logotipo para la que apliqué temas de fuente, color de fuente y color de imagen:

/* [ReplaceFont(themeFont: "MinorFont")] */ font-family:Verdana;
/* [ReplaceColor(themeColor:"Dark2-Darker")] */ color:black;
/* [RecolorImage(themeColor:"Dark2-Lightest",method:"Tinting")] */ background:url("/Style Library/images/spdicon1.png") no-repeat;

De hecho, estoy bastante asombrado de la calidad del cambio de color de la imagen. Si se usa correctamente y con estilo, el motor de creación de temas de SharePoint realmente puede deleitarnos a quienes nos importa el aspecto al igual que la funcionalidad. :)

Gracias por leer. Espero que el nuevo motor de creación de temas de SharePoint sea igual de atractivo y útil para todos.

Esta entrada de blog es una traducción. Puede encontrar el artículo original en Working with the SharePoint Theming Engine