Para algunos el "lado oscuro" de SharePoint pasa por el desarrollo, pero no podemos decir que trabajar con estilos en SharePoint esté precisamente acompañado por la "fuerza". Definitivamente no!
Hecha esta breve introducción, escribiré hoy un breve artículo para aquellos que quieran desarrollar su primer "tema" en SharePoint 2007.
Todos los artículos de Estilos que me resultaron interesantes, los estoy compilando bajo esté enlace: Estilos en SharePoint. Se los recomiendo y los invito a enviarme otros enlaces interesantes.
Parte 1: crear nuestros estilos
Antes de crear nuestro primer tema, necesitamos hacer pruebas con los estilos que queremos cambiar. No es propósito de este artículo hablar sobre estilos, pero sí enumerar los pasos previos a la creación del tema. Mi recomendación (y esto es opinable), es empezar así:
1.1 Elegir un tema de SharePoint estándar, el que más se parezca al estilo al que queremos llegar.
1.2 Buscar herramientas que nos ayuden a identificar los estilos (no es sencillo). Recomiendo estas dos:
CSS Reference Chart (en inglés): excelente página que nos muestra los estilos más usados y nos permite copiar las clases que necesitamos modificar.
- SharePoint Customizer: muy linda herramienta de CodePlex, que nos permite navegar un sitio, seleccionar la zona a modificar e identificar las clases.
1.3 Hacer pruebas en la home page alterando los estilos del tema de manera de verificar que el diseño se acerca a nuestra idea original. Para esto lo mejor es agregar una Content Editor Web Part en la home page (sólo a modo de prueba) y alterar los estilos, por ejemplo así:
<style>
.ms-bannerContainer {display:none;}
.ms-searchform {display:none;}
</style>
Parte 2: armar el tema
Existe un artículo en MSDN que nos explica cómo realizar esto: MSDN: Procedimiento para personalizar temas. . Se los resumo:
2.1 Hacer una copia del tema que elegimos como tema base, que podemos encontrar en esta ruta:
\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\THEMES
- Poner un nombre a la carpeta
- Poner el mismo nombre dentro del archivo "inf" en las secciones [info] y [titles]
Importante: el nombre debe ser alfanumérico y de un máximo de 8 caracteres. Caso contrario obtendrán un error del tipo "Cannot open "Sur-Point": no such file or folder."
2.2 Modificar el archivo "css" con los estilos que probamos en la parte 1 (y que deberemos volver a probar una vez que apliquemos el tema, ya que ahora lo veremos en todas las páginas)
Parte 3: instalar el tema
Finalmente explicaré la forma más sencilla de instalarlo, sin que eso quiera decir que es la mejor, pero el artículo es sobre "mi primer tema" con lo cual no deseo complicar aún las cosas.
3.1 Modificar SPTHEMES.XML. Este es el archivo que determina los temas que tenemos disponibles en un sitio. Se debe agregar una sección como la siguiente:
<Templates>
<TemplateID>surpoint</TemplateID>
<DisplayName>surpoint</DisplayName>
<Description>Tema del sitio SurPoint</Description>
<Thumbnail>images/surpoint.png</Thumbnail>
<Preview>images/surpoint.png</Preview>
</Templates>
Pueden encontrar el archivo en:
\Program Files\Common Files\Microsoft Shared\Web Server Extensions\12\TEMPLATE\LAYOUTS\1033
A tener en cuenta:
- Se debe modificar este archivo en la carpeta correspondiente a cada uno de los lenguajes que tengamos instalados.
- Tener especial cuidado si estamos trabajando con una granja de servidores.
- Un paquete de servicios de Microsoft podría sobre-escribir el archivo SPTHEMES.XML.
- La imagen "surpoint.png" es opcional, para vista previa. En caso de armarla, deben dejarla en la siguiente carpeta:
\Common Files\Microsoft Shared\Web Server Extensions\12\TEMPLATE\IMAGES
3.2 Pasar nuestra tema (modificado en la parte 2) desde el ambiente de desarrollo al ambiente de producción.
3.4 Aplicar el tema en nuestro sitio.
Y listo!
Espero que les haya sido útil, hasta la próxima!
Más sobre branding en: http://surpoint.blogspot.com/search/label/Branding.
0 comentarios:
Publicar un comentario