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 Microsoft Office SharePoint Server (MOSS) 2007 o Windows SharePoint Services (WSS) 3.0 (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: :/_layouts/themeweb.aspx" mce_href="http://:/_layouts/themeweb.aspx">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. (En la misma ruta sobre la que estamos trabajando: "C:Program FilesCommon FilesMicrosoft Sharedweb server extensions12TEMPLATETHEMES"…)
3. Despu‚s hay que abrir el archivo renombrado REPLICA.INF, podemos hacerlo en notepad. (En la misma ruta sobre la que estamos trabajando: "C:Program FilesCommon FilesMicrosoft Sharedweb server extensions12TEMPLATETHEMES"…)
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"> </font> </p></div>
Finalmente, revise el SharePoint Skinner Aqu¡: http://www.elumenotion.com/Blog/default.aspx
ldusolier