Personalizando el tema en OWA 2010

Bueno un documentillo algo atrasado pero como surgio este tema en un cliente hace poco, hacemos un breve resumen de los cambios que serían necesarios para personalizar o customizar un tema en el Outlook Web App de nuestros servidores Microsoft Exchange 2010, con esto haremos un interfaz totalmente corporativo donde tendremos a los jefes contentos! 😛

Realizaremos estos cambios en nuestros servidores con el rol de Acceso Cliente, y si disponemos de un servidor TMG en la DMZ también deberemos hacer parte de los cambios en él, en la parte del portal.

A tener en cuenta que los temas están en: %ProgramFiles%MicrosoftExchange ServerV14ClientAccessOwa<version>themes

Podríamos incluso cambiar el icono que nos mostrará el navegador, sustituyéndolo por el nuestro en %ProgramFiles%MicrosoftExchange ServerV14ClientAccessOwa<version>themesresources sustituiremos el favicon.ico por el nuestro corporativo.
Podremos trabajar sobre un tema existente que se nos adapte más o tirar del predeterminado (‘basic’), así que duplicamos la carpeta del tema en cuestión y la renombramos como querramos.

Editaremos el fichero themeinfo.xml y en ‘displayname’ indicaremos el nombre a mostrar dentro de OWA (Si es que les dejamos seleccionar temas).

 

Podremos apoyarnos en utilidades de terceros para ver el código fuente de OWA y personalizarlo online para ver cómo quedarían los cambios y luego se los trasladaríamos al fichero CSS en cuestión. En Firefox exite un plugin llamado ‘Firebug‘ que nos será de mucha utilidad, o incluso el Internet Explorer tiene algo por ahí… con esto, podremos utilizar la herramienta y seleccionar partes de la web para ver de donde viene su color, texto…

Ejemplos comunes:

Para botón cambiar el color del botón ‘Iniciar sesión’ de la Home, modificaremos el ‘logon.css’ de la carpeta ‘themesResources’, buscando el apartado ‘input.btn{background-color:’ y ponemos el color en hexadecimal que más se nos adapte.

Lo mismo para el efecto cuando el ratón pasa por encima del botón, le pondremos un color similar al anterior, pero más clarito, modificando: ‘btnOnMseOvr{background-color:’, lo mismo para cuando se haga click…
Si queremos cambiar el color de los enlaces en esta misma Home y que no sean naranjas, sobre el mismo ‘logon.css’ buscamos la el apartado para los enlaces ‘a{color:’….

Más, para el texto en naranja de la Home que no sean enlaces, de nuevo en ‘logon.css’ cambiamos ‘wrng{color:’

Y por último, por ejemplo, para cambiar el color de los cuadros donde se pone el usuario/contraseña, cambiamos el ‘background-color’ dentro de ‘.txt’

Para cambiar las imágenes principales, veremos que se componen de varias unidas, por lo que lo más factible sea cambiar el Tono/Saturación con un PhotoShop y listo, al color que más se adecue. En ‘lgntopl.gif’ podremos sustituir el logo predeterminado y poner el de nuestra compañía.

 

Más,

 

Y más,

 

Y más!

 

A tener en cuenta que una vez hayamos hecho logon en OWA, también tendremos que cambiar cosas, como por ejemplo el logo de nuestra compañía arriba a la izquierda, para ello modificaremos el archivo ‘csssprites.png’ suplantando por nuestro LOGO donde viene ‘Microsoft Outlook Web App’, tendremos que tener en cuenta que como máximo será una imagen de 144 x 42 pixeles! Como vemos podremos cambiar más iconos, esto es una de las ventajas de OWA, que cargue tan rápido, carga una sola imagen y luego selecciona los recuadros que quiere poner.

 

Para indicar que los usuarios no puedan modificar/seleccionar un tema, podremos hacerlo con PowerShell:

set-owavirtualdirectory -identity “<servername>owa (default web site)” -themeselectionenabled $false

 

Y para forzarles a todos el tema que acabamos de generar, lo haremos con:

set-owavirtualdirectory -identity “<servername>owa (default web site)” -defaulttheme NOMBRE_DIRECTORIO