Customizing the Look of Outlook Web Access

Última modificación del tema: 2007-09-06

Por Darcy Jayne

Puede causar una buena impresión en los usuarios y la directiva personalizando el Microsoft Office Outlook Web Access con los logotipos y colores de su organización. La personalización de Outlook Web Access es una forma perfecta de ayudar a crear una identidad para su empresa y convertirla en una herramienta en la que muchos usuarios puedan confiar.

En este artículo se explica cómo personalizar el inicio de sesión, la selección de idiomas y las páginas de cierre de sesión, y se describe la creación de un tema por medio de un encabezado personalizado. Si desea crear un tema Outlook Web Access que contenga cambios más complejos para la organización, deberá empezar por analizar el funcionamiento de las hojas de estilo en cascada (archivos .css). Una vez que haya adquirido conocimientos sólidos sobre los archivos .css, cambie unos pocos elementos cada vez y pruébelos para asegurase de que obtiene los resultados previstos.

Qué elementos contiene un tema

Un tema, que se conoce como esquema de color en las opciones de Outlook Web Access, define el color de fondo, las fuentes, los colores resaltados, los iconos y el encabezado que utilizará Outlook Web Access. De forma predeterminada, se instalan dos temas cuando se realiza la instalación de la función del servidor de acceso de cliente en el equipo en el que se ejecuta Microsoft Exchange Server 2007. Los temas predeterminados son Seattle Sky y Carbon Black.

Cada tema es una colección de archivos multimedia y hojas de estilo en cascadas (archivos .css) almacenados en el servidor de acceso de cliente del directorio de instalación en \Client Access\OWA\version\themes. Cada tema se almacena en su propio directorio de \themes.

El tema predeterminado, Seattle Sky, es el tema básico y se encuentra en \themes\base. La carpeta base contiene todos los archivos necesario para definir un tema. Estos archivos incluyen los archivos .css, gráficos y un archivo .xml que define el nombre del tema. Los temas adicionales se crean copiando archivos seleccionados en un directorio nuevo y modificándolos según sea necesario. Cuando se utiliza un tema personalizado, los elementos del directorio del tema personalizado se usan en primer lugar, y cualquier elemento necesario no personalizado se obtiene del tema básico. Si, por ejemplo, crea un tema nuevo copiando sólo los gráficos de encabezado a un tema nuevo y los modifica, cuando un usuario seleccione dicho tema, los gráficos de encabezado procederán del tema nuevo y el resto de las propiedades de tema procederán del tema básico.

Novedades en Exchange 2007 SP1

Outlook Web Access ha agregado dos temas adicionales en Exchange Server 2007 Service Pack 1 (SP1). Los dos temas nuevos son Xbox y Zune.

Antes de empezar

Se recomienda que utilice las siguientes directrices cada vez que cambie o cree un tema Outlook Web Access:

• Realice copias de seguridad siempre de los archivos originales antes de editarlos, especialmente cuando edite archivos del directorio \themes\base.

• No elimine la carpeta \Client Access\OWA\versión\themes\base ni ninguno de sus archivos.

• No cambie las barras de información que aparecen en la parte superior de los mensajes para advertir a los usuarios de contenido potencialmente malintencionado, ataques de phishing (suplantación de identidad), virus y contenido bloqueado o ausente.

Creación de un tema

Para empezar, debe crear una carpeta para el tema nuevo y copiar después un subconjunto de archivos del tema base en dicha carpeta.

1. Inicie sesión en el servidor de acceso de cliente que hospede Outlook Web Access con una cuenta que tenga delegada la pertenencia al grupo Administradores local.

2. Abra Windows Explorer y busque el directorio de instalación del servidor de Exchange.

3. En \Client Access\OWA\<version>\themes, cree una carpeta nueva y un nombre para ella como, por ejemplo, Fourth Coffee.

4. Copie los archivos siguientes desde el tema base a la carpeta nueva:

   • premium.css

   • owafonts.css

   • logopt.gif

   • logopb.gif

   • nbbkg.gif

Selección de un nombre para el tema nuevo

Puede poner nombre a un tema personalizado de dos maneras. La primera consiste en dar a la carpeta donde creó el nuevo tema el nombre que desee. Por ejemplo, ya que hemos llamado Fourth Coffee a la carpeta nueva, el tema nuevo se llamará automáticamente Fourth Coffee.

También puede poner nombre a un tema personalizado copiando el archivo themeinfo.xml desde el tema base a la carpeta nueva y editar el archivo después. Puede editar el archivo themeinfo.xml mediante un editor de texto, como el Bloc de notas, para cambiar el nombre para mostrar del tema por el nombre que desee. El archivo themeinfo.xml file invalidará el nombre de la carpeta como nombre para el tema.

Para darle un nombre al tema nuevo con el archivo themeinfo.xml file, siga estos pasos:

1. Copie el archivo themeinfo.xml de la carpeta del tema base a la carpeta llamada Fourth Coffee.

2. Abra la copia del archivo themeinfo.xml que se encuentra en la carpeta del tema personalizado.

3. Busque el valor theme displayname y cámbielo a Fourth Coffee Theme.

   El archivo debe mostrar este nombre: theme displayname = "Fourth Coffee Theme"

4. Guarde y cierre themeinfo.xml.

Creación de un encabezado personalizado

Ahora que ya ha copiado los archivos y le ha dado un nombre al tema, intente personalizar el encabezado. Para cambiar el encabezado en Outlook Web Access, necesitará los siguientes archivos que ya ha copiado a la carpeta del tema nuevo:

• premium.css

• owafonts.css

• logopt.gif

• logopb.gif

• nbbkg.gif

Premium.css y owafonts.css definen las fuentes y los colores que utiliza Outlook Web Access. Logopt.gif, logopb.gif y nbbkg.gif son los archivos de imágenes que se utilizan para crear el encabezado situado al principio de la página en Outlook Web Access.

1. Use una herramienta de edición de imágenes para abrir y modificar logopt.gif.

2. Como ejemplo, puede cambiar el color de fondo de logopt.gif a malva con un valor HTML RGB de #DCBEC8. Modifique logopb.gif y nbbkg.gif para que tengan el mismo color de fondo.

Un valor de color HTML RGB viene definido por una cadena de siete caracteres: una almohadilla (#) seguida de una cadena de seis caracteres.

Para probar el tema personalizado, inicie sesión en Outlook Web Access Premium (no seleccione la opción Usar Outlook Web Access Light), haga clic en Opciones y, a continuación, en Configuración general. A continuación, seleccione el tema personalizado en el menú Apariencia. Para ver el tema nuevo, debe guardar los cambios y, a continuación, hacer clic en Actualizar.

Las figuras siguientes ilustran los archivos originales que se usan para crear el encabezado del tema Seattle Sky para Outlook Web Access y el nuevo encabezado creado mediante la modificación de dichos archivos.

Archivos de encabezado de Outlook Web Access

Encabezado personalizado para Outlook Web Access

Modificación del tema predeterminado de Outlook Web Access

Ahora que ya ha creado un tema nuevo y ha personalizado el encabezado, intente configurarlo como el tema predeterminado para Outlook Web Access. Para cambiar el tema predeterminado de Outlook Web Access del tema base a su tema personalizado, deberá utilizar el cmdlet Set-OwaVirtualDirectory. Para los ejemplos siguientes, usará "FourthCoffeeCAS" para el servidor, "owa" para el directorio virtual, "Default Web Site" para el sitio web y "Fourth Coffee" para el nombre de la carpeta.

• Para establecer el tema predeterminado para Outlook Web Access a Fourth Coffee, ejecute el siguiente comando: set-owavirtualdirectory -identity "fourthcoffeeCAS\owa (default web site)" -defaulttheme "fourth coffee"

Si algún usuario ha iniciado sesión en Outlook Web Access y ha seleccionado un tema, no estarán obligados a seleccionar un tema nuevo. Para garantizar que todos los usuarios usan el tema nuevo, deberá deshabilitar la selección de temas. Para ello use también el cmdlet Set-OwaVirtualDirectory.

• Para deshabilitar la selección de temas Outlook Web Access, ejecute el siguiente comando: set-owavirtualdirectory -identity "fourthcoffeeCAS\owa (default web site)" -themeselectionenabled $false

Puede ejecutar el comando siguiente para efectuar ambos comandos simultáneamente: set-owavirtualdirectory -identity "fourthcoffeeCAS\owa (default web site)" -defaulttheme "Fourth Coffee" -themeselectionenabled $false

Personalización de las páginas de inicio y cierre de sesión

Un tema personalizado es una forma excelente de proporcionar un aspecto personalizado a Outlook Web Access una vez que los usuarios hayan iniciado la sesión, pero una página de inicio de sesión personalizada llama aún más la atención. Outlook Web Access sólo usa el inicio de sesión, la selección de idiomas y las páginas de cierre de sesión con el tema base. Por tanto, deberá modificar los archivos de la carpeta del tema base para crear páginas personalizadas.

El archivo logon.css define los estilos de texto, los colores y los colores de fondo del inicio de sesión, así como la selección de idiomas y las páginas de cierre de sesión. Las páginas se crean mediante una combinación de un conjunto de imágenes almacenadas como archivos .gif. La página de inicio de sesión está formada por los archivos siguientes:

• logon.css

• lgnbotl.gif

• lgnbotm.gif

• lgnbotr.gif

• lgnexlogo.gif

• lgnleft.gif

• lgnright.gif

• lgntopl.gif

• lgntopm.gif

• lgntopr.gif

A continuación le ayudaremos a crear un aspecto nuevo modificando todos estos archivos para crear un conjunto de páginas personalizadas de inicio y cierre de sesión para Fourth Coffee. Para que el proceso sea más sencillo, utilice un color liso para el fondo de todas las imágenes.

En primer lugar, cree una nueva carpeta en la carpeta del tema base y llámela "backup". Copie todos los archivos que se utilizan para crear las páginas de inicio y cierre de sesión en la nueva carpeta, de forma que pueda tener copias de seguridad en caso de que desee volver a las páginas originales. Encontrará la carpeta del tema base en el directorio de instalación de Exchange, en \Client Access\OWA\version\themes\base.

En las figuras siguientes se muestra la página predeterminada de inicio de sesión de Outlook Web Access tal como aparece si el usuario hace clic en Mostrar explicación y selecciona Es un equipo privado y Usar Outlook Web Access Light. En una de las figuras se muestra la combinación de los archivos de gráficos que conforman la página. En la otra, se muestra cómo el archivo logon.css determina los colores del fondo y el texto de la página de inicio de sesión.

Página de inicio de sesión de Outlook Web Access que muestra los archivos de gráficos personalizados

Página predeterminada de inicio de sesión de Outlook Web Access que muestra las opciones de texto

En las figuras siguientes se muestra la página predeterminada de cierre de sesión de Outlook Web Access. Una figura muestra cómo se ajustan los archivos de gráficos que crean la página. La otra muestra cómo el archivo logoff.css determina los colores del fondo y el texto de la página de cierre de sesión.

Página de cierre de sesión de Outlook Web Access que muestra los archivos de gráficos personalizados

Página predeterminada de cierre de sesión de Outlook Web Access que muestra las opciones de texto

Prueba de cambios en las páginas de inicio y cierre de sesión

Puede probar los cambios a medida que los vaya realizando abriendo la página de inicio de sesión de Outlook Web Access en Internet Explorer y siguiendo estos pasos (guardando cada vez que haga un cambio). 

1. Abra la página de inicio o cierre de sesión de Outlook Web Access en Internet Explorer. Si está probando los cambios del sitio web predeterminado en el servidor de acceso de cliente que hospeda el directorio virtual de Outlook Web Access, puede probarlos abriendo Internet Explorer y escribiendo la URL https://localhost/owa.

2. En la barra de herramientas, haga clic en Herramientas y, a continuación, en Opciones de Internet.

3. En la ficha General, en Archivos temporales de Internet, haga clic en Eliminar archivos y en Sí cuando le pregunten si está seguro de que desea eliminar todos los archivos temporales de Internet Explorer.

4. Haga clic en Aceptar para cerrar Opciones de Internet.

5. Haga clic en Actualizar para ver los cambios.

Repita estos pasos para ver los cambios cada vez que realice una modificación en los archivos de paginación de inicio o cierre de sesión. Si va a realizar varios cambios, puede dejar abierta la página de inicio o cierre de sesión y repetir los pasos 2 a 6 para ver cómo han quedado los cambios.

Personalización de archivos de imagen

Ahora que ha hecho una copia de seguridad de los archivos originales en un directorio separado y que ya sabe cómo revisar los cambios mientras trabaja, puede modificar los archivos .gif que funcionan como pilares gráficos de las páginas de inicio de sesión, selección de idiomas y cierre de sesión.

Para ello, abra lgntopl.gif con una herramienta de edición de imágenes y modifíquela según el diseño nuevo, que se muestra en la figura siguiente:

Logotipo de Fourth Coffee

Dado que anteriormente hemos cambiado el color de fondo de lgntopl.gif a malva con un valor HTML RGB de #DCBEC8, deberá abrir cada archivo .gif restante y cambiar su color de fondo para que coincidan.

Toques finales

Ahora que ya ha editado los archivos .gif, también tendrá que editar el archivo logon.css para que el fondo no presente diferencias, ya que el color de fondo nuevo puede que no vaya bien con los colores del texto original y de la línea divisoria. Además de configurar el color de fondo para que coincida con el logotipo nuevo, deberá cambiar el color principal del texto y el de la línea divisoria para que combine mejor con las páginas nuevas.

Los tres colores, el de fondo, el principal y el de la línea divisoria vienen definidos por valores HTML RGB en logon.css. Para cambiarlos por los colores nuevos, deberá buscarlos en logon.css y modificar su valor de color HTML RGB a los valores que desee.

Para cambiar los colores, abra logon.css en un editor de texto como el Bloc de notas. Busque la cadena para cada elemento de color que desee cambiar, sustituya el valor HTML RGB por el valor nuevo según la información de la tabla siguiente y guarde y cierre el archivo logon.css.

Elementos de las páginas de inicio y cierre de sesión y sus descripciones

Cuando haya terminado, las nuevas páginas de inicio y cierre de sesión se parecerán a las figuras siguientes.

Página de inicio de sesión de Fourth Coffee

Página de cierre de sesión de Fourth Coffee

Para obtener más información

Para obtener más información acerca de cómo crear temas personalizados para Outlook Web Access, consulte Cómo crear un tema para Outlook Web Access.

Darcy Jayne - Redactor técnico, Microsoft Exchange Server