Personalitzant el tema en OWA 2010

Bo un documentet una mica endarrerit però com sorgeix aquest tema en un client fa poc, fem un breu resum dels canvis que serien necessaris per personalitzar o customitzar un tema a l'Outlook Web App dels nostres servidors Microsoft Exchange 2010, amb això farem un interfície totalment corporatiu on tindrem els caps contents! 😛

Farem aquests canvis als nostres servidors amb el rol d'Accés de Client, i si disposem d'un servidor TMG a la DMZ també haurem de fer part dels canvis en aquest, a la part del portal.

Cal tenir en compte que els temes es troben a: %ProgramFiles%MicrosoftExchange ServerV14ClientAccessOwa<version>themes

Podríem fins i tot canviar la icona que ens mostrarà el navegador, substituint-la per la nostra a %ProgramFiles%MicrosoftExchange ServerV14ClientAccessOwa<version>themesresources substituirem el favicon.ico pel nostre corporatiu.
Podrem treballar sobre un tema existent que s'adapti més a nosaltres o utilitzar el predeterminat (‘basic’), així que dupliquem la carpeta del tema en qüestió i la renomem com vulguem.

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í… amb això, podremos utilizar la herramienta y seleccionar partes de la web para ver de donde viene su color, text…

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:’

I per últim, per exemple, 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 changer el Tono/Saturación con un PhotoShop y listo, al color que más se adecue. En 'lgntopl.gif’ podremos substituir el logo predeterminat i poner el de la nostra companyia.

Més,

I més,

I més!

A tener en compte que una vez hayamos hecho logon en OWA, también tendremos que cambiar cosas, com per exemple el logo de la nostra empresa arriba a la izquierda, para ello modificaremos l'arxiu 'csssprites.png’ suplantando por nuestro LOGO donde viene 'Microsoft Outlook Web App', tendremos que tener en compte que como máximo será una imagen de 144 x 42 pixeles! Como vemos podremos canviar més iconos, esto es una de las ventajas de OWA, que cargue tan rápido, carrega una sola imatge i després selecciona els quadres que vols posar.