Como crear temas para Windows SharePoint Services 3.0

1. Personalización de Windows SharePoint Services:Temas Expositora: Vielka Rojas, vkrojas@hotmail.com Comunidad SharePoint Costa Rica http://ug.culminis.com/sites/CRC-SPS/default.aspx

2. ¿Como personalizo un sitio? Tres caminos recomendados por Microsoft: Crear hojas de estilo, imágenes, masterpages y page layouts Las imágenes se guardan a nivel de archivos ([Archivos de programarchivos comunes]icrosoft Sharedeb server extensions2EMPLATEMAGES) La principal hoja de estilos es CORE.CSS ([Archivos de programarchivos comunes]icrosoft Sharedeb server extensions2EMPLATEAYOUTS3082]TYLES]) Crear una hoja de estilo alternativa Crear un tema

3. Temas Un tema afecta la apariencia de una página, cambiando sus colores, gráficos y estilos No cambia los componentes de una página o su posición Se puede heredar Cambia las páginas del sitio y las del sistema (carpeta _layouts)

4. Temas vs. Páginas maestras Tema Página maestra Cambia las propiedades CSS del sitio Cambia las imagenes predeterminadas del sitio Empaca las hojas de estilo e imágenes y se puede usar en deployment Se almacena a nivel del servidor Control completo sobre el diseño del sitio (se pueden mover, ocultar o agregar elementos) Se pueden usar nuevas hojas de estilos y cambiar las propiedades CSS Se pueden crear referencias a nuevas imágenes Se puede almacenar ene l servidor o en la base de datos de contenido Funciona junto a las páginas de contenido para crear el sitio mostrado Es como pintar una casa y cambiar los cuadros de las paredes Es como remodelar toda la casa

5. Pasos para crear un tema (1) Copie un tema existente en la carpeta rogram Filesommon Filesicrosoft Sharedeb server extensions2EMPLATEHEMES y dele un nombre único (use mayúsculas y máximo 8 caracteres), por ejemplo TEMADEMO Busque el archivo .inf en la nueva carpeta y renómbrelo igual que la carpeta, ejemplo: TEMADEMO.INF Abra el archivo TEMADEMO.INF, cambie el valor del título (title) bajo la etiqueta [Info] por el nombre del nuevo tema, en este ejemplo Tema Demo (puede usar espacios) Reemplaze cada palabra que diga el nombre original bajo la etiqueta de [titles] por Tema Demo.

6. Pasos para crear un tema (2) Se debe editar el archivo SPTHEMES.XML ( en rogram Filesommon Filesicrosoft Sharedeb server extensions2EMPLATEAYOUTS3082])” Agregar bajo el tag de <SPThemes> la referencia al nuevo tema: <Templates> <TemplateID>temademo</TemplateID> <DisplayName>Tema demo</DisplayName> <Description>Tema de prueba.</Description> <Thumbnail>images/thgost.gif</Thumbnail> <Preview>images/thgost.gif</Preview> </Templates> El tamaño recomendado para la imagen de vista previa es 300 x 180 pixeles Reiniciar el IIS

7. Aplicar un tema Para aplicarlo vaya a la página principal del sitio, seleccione Acciones del Sitio  Configuración del Sitio Vaya a la segunda columna de propiedades de configuración, y seleccione especificar un tema para el sitio Seleccione el nombre del nuevo tema creado ImportanteEl texto usa para el nombre de la carpeta del tema, el nombre del archivo .INF y el TemplateID del archivo XMl deben ser iguales

8. Referencias Personalice y aplique su propio diseño a Sitios hechos en SharePoint 2007 http://www.sharepointblogs.com/ldusolier/archive/2007/09.aspx MOSS CSS style reference http://www.heathersolomon.com/content/sp07cssreference.htm Image Editing Software (free) http://www.getpaint.net/index.html Theme generator (great for consolidating colors in a style sheet) http://hermansberghem.googlepages.com/themegenerator.htm IE Developer Toolbar http://www.microsoft.com/downloads/details.aspx?familyid=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en#Overview Automatically applying a theme to a site http://www.sharepoint-tips.com/2006/03/automatically-applying-theme-to-site.html

9. Demostración