Personalice y aplique su propio diseño a Sitios hechos en SharePoint 2007

Algunas preguntas relacionadas:

¿Cómo personalizo mi sitio de trabajo de SharePoint?

¿Cómo puedo personalizar SharePoint?

¿Personalización en SharePoint o con SharePoint?

¿Cómo puedo usar SharePoint Designer para personalizar o customizar Mis sitios de SharePoint?

 

Cuando instalamos o (ambos las ultimas versiones de los productos que conforman la plataforma de productividad y colaboración empresarial de Microsoft), siempre esta el detalle de cómo poder lograr un look and feel de acuerdo a identidad de la compañía.

Hay varios caminos, y opciones, unos más recomendados que otros, incluso soportados o recomendados por Microsoft. Hablemos de los elementos gráficos. Todas las imágenes se guardan a nivel archivos de windows, así como las hojas de estilo y colores. Las principales hojas de estilo son la famosa CORE.CSS (Esta es la hoja principal de estilos de SharePoint y se encuentra en [x:][Archivos de programaArchivos comunes]Microsoft Sharedweb server extensions12TEMPLATELAYOUTS[3082]STYLES]) y Theme.css la cual se encuentra en [x:] [Archivos de programaArchivos comunesMicrosoft Sharedweb server extensions12TEMPLATETHEMES], y es la la hoja de estilos que maneja cada uno de los temas que vienen por default con SharePoint en una instalación.

Entiendase:

CORE.CSS

[x:] la letra del disco duro o partición correspondiente a la instalación en cuestión.

[..Archivos de programaArchivos comunes…] estos son los nombres de las carpetas de una instalación en español (3082), por ejemplo si fuera en inglés sería algo así: [..Program FilesCommon files]

[3082] este corresponde al identificador del lenguaje (lcid) de la instalación o de la creación de los sitios, por ejemplo el lcid para inglés es: 1033.

Un dato curioso en este punto. Si ustedes descargan o instalan la versión en español de SharePoint se podrán dar cuenta que hay varios identificadores de lenguaje para el español (españa – 2058), español (argentina – 11274), español (columbia – 9226), español (mexico – 2058), etc…Y la carpeta que crea SharePoint cuando lo instalan en español es el 2058, bien españa!!

Theme.css

El archivo Theme.css se refiere al archivo que especifica los estilos dependiendo del tema que se seleccione para el sitio. Estos temas se pueden seleccionar y cambiar las veces que se deseen una vez se haya creado el sitio. Todo sitio se crea con el tema default predeterminado (Para cambiar el tema por otro de nuestra elección desde el navegador podemos teclear la siguiente dirección web, una vez nuestro sitio haya sido creado: http://<url>:<puerto>/_layouts/themeweb.aspx) . En la subcarpeta de Themes anteriormente descrita es donde SharePoint guarda todos los temas que SharePoint tiene por default, y ahí es donde entramos ya nosotros…Al crear nuestro propio tema y modificarlo para que los cambios se hagan sobre nuestra propia definición de tema.

Microsoft recomienda NO hacer cambios sobre las hojas de estilo default (sobre todo CORE.CSS), en una actualización, podrían sobreescribirse estos archivos….

 

Pasos recomendados a seguir para personalizar un sitio de SharePoint 2007:

1. Cree su propio tema para poderlo aplicar [http://msdn2.microsoft.com/en-us/library/aa979310.aspx], generandolo a partir de uno ya existente.

1. En la ruta “C:Program FilesCommon FilesMicrosoft Sharedweb server extensions12TEMPLATETHEMES” se encontrarán todas las carpetas de temas disponibles y existentes….Seleccione la que guste y renombrela con el nombre de su preferencia por ejemplo “Replica”. Una buena idea podría ser el revisar los temas existentes y el que más se parezca a lo que queremos llegar, seleccionar ese y generar una copia de dicha carpeta con el nombre que se haya decidido entonces. Dijamos por ejemplo que seleccionamos el tema CLASSIC.

2. Una vez creado el folder, hay que buscar y renombrar el archivo CLASSIC.INF a REPLICA.INF, recuerde todo en mayúsculas.

3. Después hay que abrir el archivo renombrado REPLICA.INF, podemos hacerlo en notepad.

4. Tenemos que modificar el valor del titulo (title) bajo el tag de [Info] hacia el nombre que hayamos seleccionado, en nuestro caso a Replica.

5. Reemplazar cada palabra que diga Classic bajo el tag de [titles] por Replica.

6. Después abrir el archivo SPTHEMES.XML de esta ruta “C:Program FilesCommon FilesMicrosoft Sharedweb server extensions12TEMPLATELAYOUTS1033” con notepad o cualquier editor de XML. Nota, recordemos que el lcid de 1033 es referente al idioma de instalación en Inglés.

7. Agregar entonces bajo el tag de <SPThemes> las siguientes líneas de código:
 <Templates>
  <TemplateID>Replica</TemplateID>
  <DisplayName>Replica</DisplayName>
  <Description>Tema de Replica.</Description>
  <Thumbnail>images/thghost.gif</Thumbnail>
  <Preview>images/thghost.gif</Preview>
 </Templates>
Nota: Las rutas que usa SharePoint por default para imagenes de icono y vista previa son “images/thgost.gif” aunque podemos especificar las propias, es decir podemos generar nuestras propias imagenes manteniendo las dimensiones que usa SharePoin y usar nuestros propios diseños.

8. Ahora, para poder desplegar el icono de la vista previa del tema seleccionado, es necesario generar la imagen (podría generar la imagen haciendo una captura de pantalla de la página principal del sitio al terminar la personalización), y guardarla en la siguiente ruta “C:Program FilesCommon FilesMicrosoft Sharedweb server extensions12TEMPLATE” en el folder IMAGES. Solo tener cuidado de que la imagen tenga el mismo nombre del especificado en el archivo SPTHEMES.XML, del paso anterios. Nota: Es posible manejar otro tipo de archivos como imagenes, no nada mas el formato “.gif”., 3solo mantener la relación correspondiente ya mencionada.

9. Finalmente hagamos un “iisrest” en el servidor para que reconozca los cambios del nuevo tema.

Hasta ahorora ya hemos creado una copia de un tema existente el cual podremos aplicarlo como si fuera un tema cualquiera de SharePoint en cualquier sitio…Para aplicarlo, hay que irse a la página principal sel sitio y en el botón de Site Actions o Acciones del Sitio en la parte superior derecha, seleccionamos la opción de Site Seetings o Configuración del Sitio. En la página de configuración una vez habiendo entrado, nos vamos a la segunda columna de propiedades de configuración, y seleccionamos la opción de especificar un tema para el sitio. El nombre del tema que creamos se podrá seleccionar de la lista de temas disponibles para aplicar al sitio, solo basta darle clic al botón aceptar u ok para finalizar y guardar los cambios. Ahora es momento de jurar un poco con la hoja de estilos (theme.css) propia del tema que creamos….

2. Personalice su tema ya existente para obtener un look and feel institucional. Existen distintas formas para personalizar el diseño, estilo o el archivo theme.css del tema ya creado. Recordemos que ahora contamos con SharePoint Designer, que nos ayuda bastante en toda la parte de diseño y personalización de los sitios…Y viene mejorado con una vista previa del diseño de cada clase en la hoja de estilo. Varias capacidades interentes más aparte de la capacidad de diseño, manejo de masterpages, page layouts…como manejo de WorkFlows, etc. Al final de este artículo incluiremos una serie de Tips, recomendaciones…

1. Una vez dentro del sitio, hacemos clic en “Site Actions” o Acciones del Sitio -> “Site Settings” o Configuración del Sitio, y finalmente (2a Columna, Aspecto del Sitio), Tema del Sitio o “Site Theme”, para aplicar el tema en cuestión.

2. Abrimos entonces el SharePoint Designer 2007 y hacemos clic en “File” o archivo -> “Open Site…” o Abrir Sitio y tecleamos la ruta web del sitio que asignaremos o que ya tiene asignado el tema. Por último hacemos clic en Abrir u “Open” para abrir el sitio.

3. Una vez abierto el sitio en el SharePoint Designer, busque en el menú de navegación del lado izquierdo, un folder con el nombre de “Folder List” (en inglés). Si no lo localiza puede presionar “ALT” y F1 o ir a Ver or “View” en la barra de control principal de SharePoint Designer y seleccionar “Folder List”. 

4. Del lado izquierdo en la sección de navegación de contenido del sitio localicemos una que diga “Folder List”, dentro de este busquemos un folder con el nombre “_themes”. Deberíamos de tener un sub folder con el nombre del tema a personalizar y recién creado. Si retomamo el ejemplo sería uno llamado <Replica> que contendría un subfolder con el nombre de <Replica> igualmente. Al editar el subfolder no modificará el contenido del tema (theme.css) real en la ruta “C:Program FilesCommon FilesMicrosoft Sharedweb server extensions12TEMPLATETHEMES<Replica>”. Lo que estamos viendo ahi es una copia del archivo de hoja de estilo del tema correspondiente y nos ayudará a ver cuáles serían los cambios que necesitaríamos aplicarle al tema real, con la ventaja que veremos los cambios en tiempo real mientras vamos modificando…

5. Localizaremos entonces un folder o carpeta con el nombre de <Replica>, y en el habrá que localizar una hoja de estilos que se ha generado mediante una copia hecha por SP Designer, algo parecido a esto: “Cust1011-65001.css”. Este archivo es creado por la colección de sitios cuando aplicamos un tema cualquiera y es generado para aplicarse como si fuera una copia de la hoja de estilo CORE.CSS para el sitio en cuestión. Este archivo no altera, modifica o reemplaza realmente al CORE.CSS, pero será leído despúes de cargar el CORE.CSS por lo que podemos hacer modificaciones a este archivo, ver los cambios reflejados en el navegador y cuando ya estemos satisfechos, podemos copiar el código de dicho archivo temporal y sobre escribir al archivo real de estilo de nuestro tema (theme.css). El formato de este archivo temporal para trabajar y hacer modificaciones es de la siguiente forma “****1011-65001.css” y los primeros 4 caracteres son siempre los primeros cuatro del nombre del tema real.

6. Podemos entonces hacer cambios en esta hoja de estilos temporal (“****1011-65001.css”) según requiramos, incluso agregar o editar imagenes .jpg, .gif etc.

7. Recuerden si quieren ver los cambios, guarden, y pueden incluso regresar al navegador y refrescar la pantalla con “F5” o desde SP Designer “View” o Ver y Refrescar “Refresh”.

8. Al haber terminado de editar y modificar la hoja de estilos, podemos como comentamos copiar su contenido y reemplazarlo por el contenido de la hoja de estilos real del tema (theme.css) que se encontraría en la ruta: “C:Program FilesCommon FilesMicrosoft Sharedweb server extensions12TEMPLATETHEMES<Replica>. Cualquier nueva imagen habrá que copiarla a la misma carpeta del tema.

9. Para terminar, apliquemos un tema distinto ya dentro de nuestro sitio usando el navegador, y reapliquemos de vuelta el tema que modificamos, los cambios se deberán de ver reflejados ya en el navegador sobre nuestro sitio.

3. Establezca como default el tema creado [Referencia: http://www.sharepoint-tips.com/2006/03/automatically-applying-theme-to-site.html]

Una vez que ya hemos obtenido el tema que queremos, sería muy molesto el tener que estar especificando manualmente el tema cada vez que crearamos un nuevo sitio. Por tanto, adjuntamos la liga de referencia para automatizar este porceso, que les ahorrará por lo menos algunas horas de investigación…

Por último, más Referencias y tips:

Web Content Management y Branding: http://msdn2.microsoft.com/en-us/library/ms569214.aspx

Cómo personalizar el menú de acceso rápido o quick launch: http://msdn2.microsoft.com/en-us/library/ms466994.aspx

Definición de hojas de estilo: http://msdn2.microsoft.com/en-us/library/ms438349.aspx 

Personalización de Sitios Personales (creación de master pages dedicadas): http://blogs.msdn.com/sridhara/archive/2007/05/19/customizing-mysite-in-moss-2007.aspx

Instale la barra de apoyo para desarrolladores (Developer Toolbar), donde podrá visualizar los estilos aplicados a las páginas:

http://hermansberghem.blogspot.com/2007/08/must-have-for-sharepoint-designers.html

Personalice sus sitios personales [http://blogs.msdn.com/sharepoint/archive/2007/03/22/customizing-moss-2007-my-sites-within-the-enterprise.aspx].

Utilice el código de referencia de clases. Este ha sido proporcionado por Microsoft para poder mostrar que clase está asignada a un objeto gráfico mediante la visualización del navegador. [http://msdn2.microsoft.com/en-us/library/ms438349.aspx]. Solo hay que agregar un CEWP (Content Editor WebPart o Web Part de Editor de Contenido) y seleccionar la opción de incorporar código script, copiar y pegar este codigo en la página del sitio que deseemos, y al cerrar la vista de diseño podemos poner el mouse sobre algun elemento y nos aparecerá un pequeño recuerdo gris en la parte superior con la clase que lo referencia.

<script language=”jscript”> function ClassInfo() { if (window.event.srcElement.className != null) { stsclass.innerText = window.event.srcElement.className; } else { stsclass.innerText = “”; } } window.document.body.onmouseover = ClassInfo;</script> <div style=”border-style:solid;border-width:1px; width: 281px; height: 34px; position: absolute; left: 286px; top: 41px; z-index:15; padding-left:4px; padding-right:4px; padding-top:2px; padding-bottom:2px; background-color:#EEEEF4″> <p id=”stsclasstitle”><font face=”Tahoma” id=”stsclasstitle”>Classname: </font> <font face=”Tahoma”id=”stsclass”>&#xa0;</font> </p></div>

Finalmente, revise el SharePoint Skinner Aquí: http://www.elumenotion.com/Blog/default.aspx

3 comentarios en “Personalice y aplique su propio diseño a Sitios hechos en SharePoint 2007”

  1. Que tal Juan Pablo,

    Pues otra opción es buscar la info que proporcionamos en el post usando notepad u otros editores de hojas de estilo, incluso visual studio…incluso editores muy buenos de XML.

    Saludos y Suerte!

    Luis.

  2. fijate que yo estoy tratando de personalizar la pagina de mi empresa, y si te cache todos los datos que nos has proporcionado pero de modificar todo ese codigo desde el designer esta algo tesioso no habra algo mas visual como que vengas y desees agregar una imagen que solo la copies y la pegues no se algo mas sencillo……..ps veo que aun asi esta algo tedioso el querer poner el aspecto que deseas……….. o no se si me puedes dar alguna referencia…………..

    saludos y muy buen material el qe te descolgaste heee

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *