Ahora que está de moda el estilo Metro gracias a Windows Phone 7 y ahora también por Windows 8 y Windows Phone 8, no está de más que adaptemos el diseño de nuestro sitio en SharePoint 2010. Como hay que editar varios y diferentes elementos, las explicaciones irán acompañadas con imágenes para ayudar a entender qué se está haciendo en cada momento. Las capturas de pantalla y el código usado (CSS y XSL) los pueden encontrar en esta carpeta compartida en SkyDrive
En esta ocasión, me gustaría compartir cómo dar algo de estilo metro a un Web Part de Vínculos de Resumen (Summary Links Web Part) con lo trataré de hacer la transformación que muestro en la imagen.
Como requisitos hay que indicar que es necesario tener activada la característica de la colección de sitios SharePoint Server Publishing Infraestructure tal y como muestro en la imagen.
Para lograr nuestro objetivo de dar aspecto Metro al Web Part de Vínculos de Resumen, abriremos SharePoint Designer 2012 donde crearé las carpetas Images y Css que suelo usar para los diseños personalizados con la ruta “All Files –> Style Library –> NombreDeProyecto”. En el ejemplo, NombreDeProyecto será MetroSite
Ahora comenzaremos creando la plantilla XSL que aplicaremos a los elementos del Web Part, con lo que deberemos editar el archivo ItemStyle.xsl que se encuentra en “All Files –> Style Library –> XSL Style Sheets –> ItemStyle.xsl” como se muestra en la imagen.
Una vez abramos ItemStyle.xsl para editar, introduciremos una nueva plantilla para los Items que en este ejemplo he llamado LinkTile y cuyo código será el siguiente:
<xsl:template name="LinkTile" match="Row[@Style='LinkTile']" mode="itemstyle">
<xsl:variable name="SafeLinkUrl">
<xsl:call-template name="OuterTemplate.GetSafeLink">
<xsl:with-param name="UrlColumnName" select="'LinkUrl'"/>
</xsl:call-template>
</xsl:variable>
<xsl:variable name="SafeImageUrl">
<xsl:call-template name="OuterTemplate.GetSafeStaticUrl">
<xsl:with-param name="UrlColumnName" select="'ImageUrl'"/>
</xsl:call-template>
</xsl:variable>
<xsl:variable name="DisplayTitle">
<xsl:call-template name="OuterTemplate.GetTitle">
<xsl:with-param name="Title" select="@Title"/>
<xsl:with-param name="UrlColumnName" select="'LinkUrl'"/>
</xsl:call-template>
</xsl:variable>
<div class="divLinkTile">
<xsl:call-template name="OuterTemplate.CallPresenceStatusIconTemplate"/>
<a class="aLinkTile" href="{$SafeLinkUrl}" title="{@LinkToolTip}">
<xsl:if test="$SafeImageUrl=''">
<img src="/Style Library/MetroSite/Images/link-default.png" alt="Link" />
</xsl:if>
<xsl:if test="$SafeImageUrl!=''">
<img src="{$SafeImageUrl}" alt="Action Icon" />
</xsl:if>
<div class="divTitle">
<xsl:value-of select="$DisplayTitle" />
</div>
<div class="divDescription">
<xsl:value-of select="@Description" />
</div>
</a>
</div>
</xsl:template>
Como se puede comprobar, se exponen los parámetros SafeLinkUrl, SafeImageUrl y DisplayTitle que se requerirán en la configuración del Web Part. Además, en la estructura del item, se pone un icono por defecto, con lo que llegado este punto, añadiremos los iconos que necesitamos para nuestros elemento.
En el ejemplo, he desplegado los iconos en “All Files –> Style Library –> MetroSite –> Images” .
El siguiente paso será añadir una hoja de estilos para controlar el aspecto Metro del elemento. Para este paso, he creado la estructura “All Files –> Style Library –> MetroSite –> Css” y, en esta carpeta añado un fichero .css que llamaré summarylink.css con el siguiente contenido.
.divLinkTile
{
background: #0074c0;
margin: 12px 6px;
}
.divLinkTile .aLinkTile
{
display: block;
height: expression(this.scrollHeight < 89 ? "88px" : "auto");
min-height: 88px;
padding: 6px;
font-family: Segoe UI, Century Gothic, Cambria;
color: #fff !important;
text-decoration: none;
}
.divLinkTile .aLinkTile:hover
{
}
.divLinkTile .aLinkTile img
{
border: none;
float: left;
margin-right: 6px;
vertical-align: middle;
}
.divLinkTile .aLinkTile .divTitle
{
display: table-cell;
vertical-align: middle;
margin-left: 36px;
min-height: 48px;
font-size: 23px;
font-weight: normal;
color: #fff !important;
margin: 0;
}
.divLinkTile .divDescription
{
margin-top: 12px;
font-size: 11px;
}
Ahora que tenemos todos los elementos, nos quedaría añadir la hoja de estilos a la masterpage que, en este ejemplo es la v4.master, y lo haremos poniendo el enlace a nuestro fichero summarylinks.css con la siguiente instrucción.
<link rel="stylesheet" type="text/css" href="/Style Library/MetroSite/Css/summarylinks.css"/>
Por último, sólo nos queda ir aplicando los estilos a los enlaces del Web Part y, esto lo haremos editando cada uno de los enlaces para aplicarle los estilos.
Una vez hayamos aplicado la plantilla al elemento, comprobamos que se muestra con estilo metro y que aparece el icono por defecto. Finalmente podemos personalizar el icono de los elementos y aplicar la plantilla al resto.
Siguiendo estos pasos, ya podremos trabajar con nuestro Summay Links Web Part de estilo metro.
NOTA: Para ahorrarnos trabajo, el Web Part se puede configurar para que todos los elementos tengan por defecto la plantilla deseada, por lo que no habría más que especificar que se aplique por defecto la plantilla LinkTile para que todos los elementos que creemos aparezcan con estilo metro.
Espero que os haya gustado y os sirva de ayuda.
