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 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 programa\Archivos comunes]\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\[3082]\STYLES]) y Theme.css la cual se encuentra en [x:] \[Archivos de programa\Archivos comunes\Microsoft Shared\web server extensions\12\TEMPLATE\THEMES], y es la la hoja de estilos que maneja cada uno de los temas que vienen por default con SharePoint en una instalación.
CORE.CSS
[x:] la letra del disco duro o partición correspondiente a la instalación en cuestión.
[..\Archivos de programa\Archivos 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 Files\Common 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 Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\THEMES” 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 Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\1033\” 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 Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\” 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 Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\THEMES\<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 Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\THEMES\<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
|
|
 | 29 julio 2010 en Informática | tags: Informática |
