Crear un tema para Outlook Web App

Artículo
03/06/2017

Se aplica a: Exchange Server 2010 SP2, Exchange Server 2010 SP3

Última modificación del tema: 2016-11-28

En este tema se describe cómo crear un tema personalizado para Microsoft Office Outlook Web App. Un tema es un conjunto de archivos multimedia y archivos de hojas de estilo en cascada (archivos .css) que controlan la apariencia de Outlook Web App.

De forma predeterminada, se instalan varios temas cuando se realiza la instalación del rol de servidor Acceso de clientes en el equipo en el que se ejecuta Microsoft Exchange Server 2010, de la siguiente manera:

Archivos .css: definen colores, degradados y fuentes.
Archivos de imagen (.png): proporcionan los iconos y otros elementos gráficos. Si edita cualquiera de los iconos, no cambie su tamaño. Si cambia el tamaño de alguno de los elementos gráficos, pruebe los cambios para comprobar que los elementos se ajustan correctamente.

Estos archivos se almacenan en el servidor de acceso de cliente del directorio de instalación en \Client Access\OWA\<versión>\themes. Cada tema se almacena en un subdirectorio de temas. Puede crear temas adicionales si copia un tema existente y modifica la copia.

Nota

La versión ligera de Outlook Web App no admite temas.

Recomendaciones

Se pueden cambiar muchos elementos de un tema de Outlook Web App. Para evitar crear inestabilidad en Outlook Web App, recomendamos cambiar solamente los archivos directamente relacionados con el tema personalizado.

Como práctica recomendada, siga estas instrucciones:

Siempre haga copias de seguridad de los archivos originales antes de editarlos.
Antes de aplicar actualizaciones o revisiones a un servidor de acceso de cliente que tiene temas personalizados, realice copias de seguridad de esos temas.
Realice solamente uno o dos cambios por vez y pruebe los cambios antes de realizar cambios adicionales.
No cambie los archivos en\Client Access\OWA\<versión>\themes\resources. Las fuentes y otros ajustes de configuración definidos por esos archivos se usan en todos los temas de Outlook Web App. Los archivos no se pueden cambiar sin afectar los temas.
Los temas se guardan en los servidores Acceso de cliente. Si tiene más de un servidor Acceso de cliente y desea que un tema personalizado esté disponible en todos los servidores, debe copiar el tema en el directorio de temas de cada servidor Acceso de cliente.

¿Está buscando otras tareas de administración relacionadas con la personalización de la apariencia de Outlook Web App? Consulte Personalizar las páginas de inicio de sesión y cierre de sesión de Outlook Web App.

¿Qué desea hacer?

Crear un nuevo tema de Outlook Web App
Otorgue un nombre al tema personalizado
Crear un icono personalizado para el tema
Crear un encabezado personalizado
Usar las herramientas de desarrollador de Internet Explorer para determinar los colores
Cambiar los colores de un tema
Cambiar iconos y logotipos en un tema
Definir el tema predeterminado de Outlook Web App

Crear un nuevo tema de Outlook Web App

Deberá tener asignados permisos antes de poder llevar a cabo este procedimiento. Para ver qué permisos necesita, consulte el el contenido "Editor de gráficos" en el tema Permisos de acceso de cliente.

En el servidor de acceso de cliente que hospeda Outlook Web App, abra el Explorador de Windows y, a continuación, localice el directorio de instalación del servidor de Exchange.
En \Client Access\OWA\<versión>\themes, busque un tema que use un esquema de colores similar al que desea y, a continuación, haga una copia de él.
Otorgue un nombre corro a la copia recientemente creada similar al nombre que desea otorgar al tema.
Cree copias de seguridad de los siguientes archivos en la nueva carpeta de temas, además de crear copias de seguridad de otros temas que ha cambiado para crear su tema. Estas copias conservarán la configuración original si tiene que deshacer los cambios:
- premium.css
- csssprites.png
- csssprites2.png
- headerbgmain.png
- headerbgright.png
Siga los pasos de las siguientes secciones para modificar los archivos de la nueva carpeta de temas para crear su tema.
Reinicie Internet Information Services (IIS) mediante el comando iisreset/noforce.
Pruebe el tema nuevo iniciando sesión en Outlook Web App y seleccionando el tema nuevo.

Otorgue un nombre al tema personalizado

Abra la copia de themeinfo.xml que se encuentra en la carpeta del tema personalizado.
Busque el valor displayname del tema y cámbielo por el nombre que desee para el tema.

Ejemplo: Para nombrar el tema Fourth Coffee, el archivo debería indicar: theme displayname = "Fourth Coffee".
Cambie el valor sortorder para colocar el tema donde desea en el selector de temas en Outlook Web App.

Ejemplo: Para configurar el tema para que aparezca primero, el archivo debería indicar sortorder = 1.
Guarde los cambios y cierre el archivo themeinfo.xml.
Detenga e inicie IIS en el servidor de acceso de cliente abriendo una ventana del símbolo del sistema y usando el comando iisreset/noforce.
Para probar los cambios, inicie sesión en Outlook Web App, haga clic en Opciones y, a continuación, busque el tema nuevo en el selector de temas. Si no ve el tema en la lista, use Opciones de Internet en Microsoft Internet Explorer para eliminar los archivos temporales. A continuación, actualice el explorador e intente de nuevo para ver el selector de temas.

Crear un icono personalizado para el tema

Para crear un icono personalizado para el tema, debe editar el archivo themepreview.png. Este archivo es el icono para el tema en el selector de temas en Outlook Web App.

Abra themepreview.png en una herramienta de edición de imágenes y realice los cambios que desea. No modifique las dimensiones. La imagen es de 32 x 32 píxeles.
Para probar los cambios, inicie sesión en Outlook Web App, haga clic en Opciones y, a continuación, busque el tema nuevo en el selector de temas. Si no ve el icono nuevo, use Opciones de Internet en Internet Explorer para eliminar los archivos temporales. A continuación, actualice el explorador e intente de nuevo para ver el selector de temas.

Crear un encabezado personalizado

Para cambiar el encabezado en Outlook Web App,debe editar los siguientes archivos que se usan para crear el encabezado en la parte superior de Outlook Web App:

headerbgmain.png
headerbgright.png
headerbgmainrtl.png (Solamente necesitará editar este archivo si admite idiomas de derecha a izquierda).

Abra los archivos .png files en una herramienta de edición de imágenes y realice los cambios que desee. No modifique las dimensiones.
Para cambiar el logotipo, use una herramienta de edición de imágenes que admita fondos transparentes, como Paint.NET o Photoshop, para abrir y modificar csssprites.png. Este archivo tiene un fondo transparente. No mueva ni cambie el tamaño de las imágenes en el archivo porque Outlook Web App toma los iconos o logotipos de una ubicación específica en csssprites.png. Cuando edita algo en el archivo, debe alinear la nueva imagen de manera exacta en la parte superior de la imagen que está reemplazando.
Cuando haya editado los archivos, guarde los cambios.
Para probar los cambios en el tema personalizado, inicie sesión en Outlook Web App, haga clic en Opciones y, a continuación, seleccione el tema nuevo en el selector de temas. Si no ve el tema en la lista, use Opciones de Internet en Internet Explorer para eliminar los archivos temporales. A continuación, actualice el explorador e intente de nuevo para ver el selector de temas.

Usar las herramientas de desarrollador de Internet Explorer para determinar los colores

Internet Explorer 8 y Internet Explorer 9 incluyen herramientas de desarrollador que le permiten determinar los colores y las fuentes de elementos específicos y probar modificaciones de esos valores. A continuación, puede usar la información de las herramientas del desarrollador para ubicar esos valores en los archivos .css y modificarlos para personalizar un tema.

Inicie sesión en Outlook Web App y seleccione cualquier tema.
Vaya a un módulo que muestre el elemento que desea personalizar. Por ejemplo, si dese personalizar el color de resaltado de Correo, vaya a Correo.
En Internet Explorer, vaya a la barra de herramientas del programa y seleccione Herramientas > Herramientas del desarrollador, o presione F12.
Organice las ventanas de modo que las ventanas de Outlook Web App y de herramientas del desarrollador no se superpongan.
En Herramientas del desarrollador, haga clic en la flecha de selección a la izquierda de la barra de herramientas o presione CTRL+B.
Mueva el puntero sobre la sección de Outlook Web App que desea personalizar. Verá un contorno alrededor de cada elemento cuando pase el puntero por encima. Haga clic en el elemento cuando se destaque el elemento que desea cambiar.
Busque la ventana Herramientas del desarrollador. Verá el código que se usa para desarrollar la página y el elemento que seleccionó se destacará en la ventana de la izquierda.
Busque la ventana de la derecha el color de ese elemento. Será un valor RGB, expresado en una cadena de siete caracteres que comienza con # y está seguida por seis caracteres alfanuméricos. Por ejemplo, el blanco se expresa como #ffffff.
Si no ve un valor RGB, repita los pasos anteriores e intente de nuevo.
Cuando encuentre un valor RGB, cámbielo al valor que desea y, a continuación, presione Entrar. El cambio se mostrará en Outlook Web App casi de inmediato. Esto no cambia el tema, solamente la configuración local y solamente para la sesión actual.
El panel derecho de Herramientas del desarrollador le muestra en qué valor está el archivo y dónde encontrarlo en ese archivo.
Después de buscar el valor que desea cambiar, debe ir a la capeta del tema personalizado en el servidor de acceso de cliente y modificar el valor de premium.css.

Nota

Para buscar los valores HTML RGB de muchos colores, consulte la Tabla de colores en MSDN Library. Si busca un color específico y no lo encuentra en línea, use una herramienta de edición de imágenes para tomar una muestra del color y determinar su valor RGB de HTML. Las herramientas de desarrollador tienen una herramienta de selector de color útil. Seleccione Herramientas > Mostrar selector de colores del menú. Para determinar el valor RGB de un color que desea, coloque el puntero del mouse sobre un elemento de ese color.

Cambiar los colores de un tema

Después de buscar el color que desea cambiar y determinar el valor RGB al que desea cambiarlo, debe buscar esa propiedad en la hoja de estilos premium (premium.css) en el servidor de acceso de cliente y reemplazar el valor existente por el nuevo valor.

Abra el archivo premium.css en el tema personalizado usando un editor de texto como Bloc de notas.
en el archivo, busque el valor que encontró usando las herramientas de Internet Explorer.
Sustituya el valor RGB por el valor RGB del color que desea.
Para probar los cambios en el tema personalizado, inicie sesión en Outlook Web App, haga clic en Opciones y, a continuación, seleccione el tema nuevo en el selector de temas. Si no ve los cambios, use Opciones de Internet en Internet Explorer para eliminar los archivos temporales. A continuación, actualice el explorador e intente de nuevo para ver el selector de temas.

Cambiar iconos y logotipos en un tema

Para cambiar los iconos y los logotipos en un tema, use una herramienta de edición de imágenes que admita fondos transparentes, como Paint.NET o Photoshop, para abrir y modificar csssprites.png y csssprites2.png. Estos archivos tienen un fondo transparente que se debe conservar para mostrar correctamente los elementos individuales. No mueva ni cambie el tamaño de las imágenes del archivo porque Outlook Web App toma las imágenes de una ubicación específica en el archivo. Cuando edita algo en el archivo, debe reemplazar la nueva imagen en exactamente la misma ubicación que la imagen que está reemplazando.

Para cambiar una imagen:

Use una herramienta de edición de imágenes que admita fondos transparentes para abrir el archivo que contiene los elementos gráficos que desea cambiar.
Edite el elemento que desea cambiar, tenga cuidado de conservar la ubicación y el tamaño del elemento original.
Guarde y cierre el archivo.
Para probar los cambios en el tema personalizado, inicie sesión en Outlook Web App, haga clic en Opciones y, a continuación, seleccione el tema nuevo en el selector de temas. Si no ve los cambios, use Opciones de Internet en Internet Explorer para eliminar los archivos temporales. A continuación, actualice el explorador e intente de nuevo para ver el selector de temas.

Definir el tema predeterminado de Outlook Web App

Cuando defina un tema predeterminado, sólo los usuarios que no hayan iniciado sesión anteriormente en Outlook Web App y seleccionado un tema nuevo tendrán que usar el tema predeterminado.

Para que todos los usuarios usen de forma obligatoria el tema predeterminado, debe deshabilitar la selección del tema y establecer un tema predeterminado nuevo.

Usar el Shell para definir el tema predeterminado para Outlook Web App

Deberá tener asignados permisos antes de poder llevar a cabo este procedimiento. Para ver qué permisos necesita, consulte el el contenido "Directorios virtuales de Outlook Web App" en el tema Permisos de acceso de cliente.

Este ejemplo define el tema predeterminado para Outlook Web App donde el nombre de servidor es "FourthCoffee", el nombre de directorio virtual es "owa", el nombre del sitio web es "Default Web site" y el tema se encuentra en la carpeta denominada "Custom".

set-owavirtualdirectory -identity "fourthcoffee\owa (default web site)" -defaulttheme Custom

Para obtener información más detallada acerca de la sintaxis y los parámetros, consulte Set-OwaVirtualDirectory.

Usar el Shell para deshabilitar la selección para Outlook Web App

Este ejemplo deshabilita la selección de temas en Outlook Web App donde el nombre de servidor es "FourthCoffee", el nombre de directorio virtual es "owa" y el nombre del sitio web es "Default Web site".

set-owavirtualdirectory -identity "fourthcoffee\owa (default web site)" -themeselectionenabled $false

También puede completar ambos comandos simultáneamente, como se muestra en el siguiente ejemplo:

set-owavirtualdirectory -identity "fourthcoffee\owa (default web site)" -defaulttheme Custom -themeselectionenabled $false