Modificar la apariencia de nuestro sitio

Continuando con el hilo de los post anteriores “Quick reference Sharepoint” hablaremos ahora de una de las cosas que tendremos que hacer tarde o temprano en un proyecto con Sharepoint, modificar la apariencia de nuestro sitio.

Sharepoint nos proporciona varios mecanismos que aprovechan la infraestructura de ASP.NET 2. : Los temas, masterpages, las colecciones de hojas de estilo y de imágenes, los elementos de navegación.

Masterpage

Las masterpages consisten en plantillas que definen cómo se distribuirá el contenido en una página pero sin llegar a conocer el contenido ni su comportamiento. Sharepoint nos proporciona varias masterpage en función del tipo de plantilla de sitio que elijamos.

Para alojar los ficheros masterpage disponemos de una galería por cada colección de sitios, lo podemos encontrar en la conficugarción del sitio raíz en la opción “Páginas maestras” o en la ruta “/_catlagos/masterpage/”.

Si abrimos Sharepoint Designer y observamos la página default.aspx, veremos cómo está haciendo referencia a la masterpage por defecto mediante la url “~masterurl/default.master”. El path “~masterurl” indica el path a la galería de páginas maestras.

<%@ Page language="C#" MasterPageFile="~masterurl/default.master" Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage,Microsoft.SharePoint,Version=12.0.0.0,Culture=neutral,PublicKeyToken=71e9bce111e9429c" meta:webpartpageexpansion="full" meta:progid="SharePoint.WebPartPage.Document" %>

En el siguiente artículo encontramos la distribución de cada uno de los contentplaceholder de la masterpage por defecto: Default content placeholders in a SharePoint master page

Provisionando una masterpage

Para modificar una masterpage tenemos varios mecanismos:

· Convirtiendo el fichero en unghosted

· Provisionando la masterpage en la galería de páginas maestras.

· Alojando la masterpage en la definición de la plantilla de sitio

· Desde una feature

Convirtiendo el fichero en unghosted

Esta es la manera más fácil y rápida, consiste en crear una instancia del fichero en la bbdd de contenidos de manera que en lugar de instanciarse desde el sistema de ficheros del frontal se instancia a partir de la bbdd de contenidos.

Esta es una práctica poco recomendable para implantaciones serias, solo las utilizaremos en prototipos. En el artículo Ghosted o unghosted, ¿Quien corre mas? podéis encontrar los motivos por los que no son recomendables las ficheros unghosted.

Provisionando la masterpage en la galería de páginas maestras.

Consiste en cargar un fichero masterpage directamente en la galería de páginas maestras. Esta galería consiste euna librería de documentos , por lo quela podremos provisionar manualmente o mediante features o código.

Alojando la masterpage en la definición de la plantilla de sitio

Consiste en definir una masterpage para todos los sitios que se creen a partir de una plantilla, de manera que no haya que subirla manualmente en cada colección.

En el siguiente artículo encontramos un tutorial acerca de cómo hacerlo: How to Create and Store Master Pages on the Server for Use with Site Collections

Desde una feature

Para provisionarlo desde una feature:

<?xml version="1.0" encoding="utf-8" ?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
    <Module Name="AddMasters" Url="_catalogs/MasterPage" >
        <File Url="MyDefault.master" Type="GhostableInLibrary"
          IgnoreIfAlreadyExists="True">

        </File>
        <File Url="custom.master" Type="GhostableInLibrary"
          IgnoreIfAlreadyExists="True"/>

        </File>
  </Module>
</Elements>

Podemos encontrar un ejemplo en: Create a Feature: Master Pages for Site Collections

Establecer la masterpage

A la hora de provisionar los ficheros debemos pensar que cada sitio tiene su propia galería de páginas maestras, por lo que podemos hacer que cada sub-sitio tenga su propia apariencia.

Para establecer la masterpage por defecto del sitio podemos o bien indicarlo con Sharepoint Designer seleccionando el fichero y con el botón derecho “Establecer como página principal predeterminada”, o bien utilizando Sharepoint Manager seleccionando el sitio y editando la propiedad “CustomMasterUrl”.

Mediante programación podemos hacer lo siguiente:

CurrentWeb.MasterUrl = "/_catalogs/masterpage/MyDefault.master";
CurrentWeb.CustomMasterUrl = "/_catalogs/masterpage/custom.master";
CurrentWeb.Update();

Si tenemos habilitada la característica de publicación

Dispondremos de funcionalidades adicionales que nos facilitarán el mantenimiento de estilos en una jerarquía de sitios grande.

Dispondremos de la opción “Página maestra” en la página de configuración del sitio en la sección “Aspecto”, desde donde podremos establecer la masterpage por defecto. Además disfrutaremos de la posibilidad de herencia de de manera que se apliquen los cambios a todos los subsitios.

Distribución de contentplaceholder

Cuando hagamos personalizaciones que cambien drásticamente la apariencia lo más fácil es mantener los placeholders estándar para que no se produzca ningún error inesperado, pero los podremos mantener ocultos mediante la propiedad “visibility”.

Masterpage de Application pages

Las páginas del tipo Application pages no podrán utilizar la masterpage default.master. Por defecto utilizan Application.master alojada en la ruta “_layout”.

Hojas de estilo

Sharepoint utiliza por defecto la hoja de estilos CORE.css en el directorio “12\Templates\Layouts\{Idioma}\Styles”. No es recomendable editar directamente este fichero ya que es bastante complejo, es común para todos los sitios y puede que se pierdan los cambios al instalar actualizaciones.

Para establecer nuestras propias hojas de estilo podremos indicarlo mediante el tag de la masterpage “<SharePoint:CssLink>”. Podemos establecer distintas hojas de estilo mediante este elemento y su propiedad “DefaultUrl” donde indicaremos la url de nuestra hoja de estilo.

<SharePoint:CssLink runat="server" DefaultUrl="<% $SPUrl:~SiteCollection/_layouts/styles/prueba.css%>" />

También podemos especificar más hojas de estilos mediante el uso de “<SharePoint:CssRegistration>” que registrará las hojas de estilo en orden alfabético antes de renderizar las hojas primarias, por defecto y altérnate.

En el siguiente artículo podemos encontrar una completa referencia sobre los estilos por defecto: CSS Reference Chart for SharePoint 2007

Si tenemos habilitada la característica de publicación

Desde la opción “Página maestra” en la sección “Aspecto” de la página de configuración del sitio podremos indicar nuestros propios ficheros de hoja de estilo sin tener que modificar la masterpage y podremos aplicarlo a todos los subsitios.

Dispondremos además una librearía de hojas de estilo donde almacenar nuestras css y poder establecerlas en la opción mencionada anteriormente.

Desde la masterpage también podremos utilizar los elementos “<SharePoint:CssLink>” y “<SharePoint:CssRegistration>” pero indicando en la url que utilice las hojas de estilo de la galería de estilos.

<SharePoint:CssRegistration name=”<% $SPUrl:~SiteCollection/Style Library/~language/Core Styles/ prueba.css%>” runat=”server”/>

Temas

Nos permiten cambiar la apariencia de nuestros sitios sin cambiar la distribución ni realizar modificaciones en las páginas. Los temas permiten cambiar el estilo, los colores y las imágenes asociadas a los estilos.

Para cambiar el tema de nuestro sitio podremos realizarlo desde el navegador en la opción “Tema del sitio” en la página de configuración del sitio.

Para crear nuevos temas podemos fijarnos de los existentes y extenderlos o adaptarlos. En la carpeta “12\Template\themes” estarán alojados todos los temas disponibles. Copiais una carpeta de un tema existente y lo renombráis pero en mayúsculas. Dentro existirá un fichero con extensión “.inf” lo renombrais (también en mayúsculas” con el mismo nombre que la carpeta que habéis creado. Abrís el fichero “.inf” y modificáis los títulos.

A continuación ya podéis editar vuestro tema incluyendo imágenes y hojas de estilo.

Una vez terminado tendréis que registrar el estilo en el fichero “\12\TEMPLATE\LAYOUTS\{Idioma}\SPTHEMES.XML”.

En el siguiente enlace podréis encontrar un ejemplo más detallado: http://www.sharepointblogs.com/tigirry/archive/2007/07/03/custom-site-theme-for-sharepoint-2007-moss-2007-and-wss-3-0.aspx