Cómo crear un tema para Outlook Web Access

 

Se aplica a: Exchange Server 2007 SP3, Exchange Server 2007 SP2, Exchange Server 2007 SP1, Exchange Server 2007

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

En este tema se describe cómo crear un tema personalizado para Microsoft Office Outlook Web Access. Un tema es un conjunto de archivos y hojas de estilo que controlan el aspecto de Outlook Web Access. De forma predeterminada, se instalan dos temas cuando se realiza la instalación de la función del servidor Acceso de cliente en el equipo en el que se ejecuta Microsoft Exchange Server 2007. Los dos temas son Seattle Sky y Carbon Black.

Sólo Outlook Web Access Premium admite temas personalizados. No se pueden crear temas personalizados para Outlook Web Access Light.

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.

Contenido de un tema

Un tema es un conjunto de archivos multimedia y archivos de hojas de estilo en cascada (.css). Los archivos se almacenan en el servidor Acceso de cliente del directorio de instalación en \Client Access\OWA\versión\themes. Cada tema se almacena en un subdirectorio de temas.

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

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 temas incluyen los colores, fuentes, iconos y gráficos.

Puede crear temas adicionales copiando los archivos seleccionados en un directorio nuevo y modificando los archivos de acuerdo con las necesidades de su organización. En la interfaz de usuario de Outlook Web Access, los temas se llaman esquemas de color. Cuando un usuario selecciona un tema personalizado, los elementos del directorio de tema personalizado se usan primero y cualquier elemento necesario no personalizado se crea a partir 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.

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.

Recomendaciones

Se pueden cambiar muchos elementos de un tema de Outlook Web Access. Para evitar que se produzca inestabilidad en Outlook Web Access, se recomienda comenzar por cambiar sólo el encabezado, las páginas de inicio y cierre de sesión y los colores que se usan para seleccionar y resaltar.

Si desea realizar cambios más complejos, estudie primero el funcionamiento de los archivos .css. Una vez que haya adquirido conocimientos sólidos sobre las hojas de estilo en cascada, cambie unos pocos elementos cada vez y pruebe los cambios para asegurarse de que obtiene los resultados previstos.

Es recomendable seguir las indicaciones siguientes:

• 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 perjudicial, ataques de phishing (suplantación de identidad), virus y contenido bloqueado o ausente.

En la siguiente figura se muestra una solicitud de calendario de Outlook Web Access con dos barras de información.

Barras de información de Outlook Web Access

Antes de empezar

Para llevar a cabo los procedimientos siguientes, debe iniciar sesión en el servidor que hospeda Outlook Web Access con una cuenta que sea miembro del grupo local de administradores.

Creación de un tema

En el procedimiento siguiente se indican los pasos generales para crear un tema personalizado para Outlook Web Access. En las siguientes secciones encontrará los procedimientos específicos para cambiar elementos individuales en un tema de Outlook Web Access.

Para crear un nuevo tema de Outlook Web Access

1. En el servidor de acceso de cliente que hospeda Outlook Web Access, abra el Explorador de Windows y, a continuación, localice el directorio de instalación del servidor de Exchange.

2. En \Client Access\OWA\<versión>\themes, cree una carpeta.

3. Copie los archivos premium.css y owafonts.css del tema básico a la carpeta nueva.

4. Copie los archivos que desea cambiar para crear el tema a partir del tema básico en la nueva carpeta creada.

5. Modifique los archivos de la nueva carpeta de temas para crear su tema.

6. Reinicie Internet Information Services (IIS) mediante el comando iisreset/noforce.

7. Pruebe el tema nuevo iniciando sesión en Outlook Web Access y seleccionando el tema nuevo.

Cómo poner nombre a un tema personalizado

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 desea para el tema. Por ejemplo, para llamar a un tema personalizado "Fourth Coffee", póngale a la carpeta donde creó el nuevo tema el nombre Fourth Coffee.

También puede poner nombre a un tema personalizado copiando el archivo themeinfo.xml del tema básico en la carpeta donde creó el tema personalizado y, a continuación, editando el archivo. 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 para el tema.

Para nombrar un tema personalizado editando el archivo themeinfo.xml

1. Copie el archivo themeinfo.xml de la carpeta del tema básico en la carpeta donde creó el tema personalizado.

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

3. Busque el valor displayname del tema y cámbielo por el nombre que desee para el tema.

   Ejemplo: Para llamar al tema Fourth Coffee, el archivo debería indicar theme displayname = "Fourth Coffee".

4. Guarde los cambios y cierre el archivo themeinfo.xml.

Creación de un encabezado personalizado

Puede personalizar el encabezado de la página principal de Outlook Web Access. Para cambiar el encabezado de Outlook Web Access, necesitará los archivos siguientes:

• premium.css

• owafonts.css

• logopt.gif

• logopb.gif

• nbbkg.gif

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

Abra los archivos .gif en una herramienta de edición de imágenes para ver cómo se usan para crear el encabezado en Outlook Web Access.

En la figura siguiente se muestran los archivos originales que se usan para crear el encabezado para el tema Seattle Sky de Outlook Web Access.

Archivos de encabezado de Outlook Web Access

Para crear un encabezado personalizado

1. Copie los archivos premium.css, owafonts.css, logopt.gif, logopb.gif y nbbkg.gif de la carpeta del tema básico en la carpeta del tema personalizado.

2. En la carpeta del tema personalizado, abra premium.css con un editor de texto como, por ejemplo, el Bloc de notas.

3. Para quitar "Conectado a Microsoft Exchange" del encabezado, busque "background:url("logopb.gif") no-repeat;" y agregue display:none; inmediatamente después.

4. Para cambiar el logotipo, use una herramienta de edición de imágenes y modifique el archivo logopt.gif.

5. Si cambia el color de fondo en logopt.gif, use la herramienta de edición de imágenes para editar logopb.gif y nbbkg.gif de forma que tengan el mismo color de fondo.

6. Cuando haya editado los archivos, guarde los cambios.

7. Para comprobar los cambios realizados en el tema personalizado, inicie sesión en Outlook Web Access, haga clic en Opciones, Configuración general y, 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 Internet Explorer.

Cómo cambiar los colores de un tema

Para cambiar los colores de un tema, busque los valores en la hoja de estilos premium (premium.css) y, después, determine los valores HTML RGB de los colores que desea usar. Los valores HTML RGB de color se definen mediante una cadena de siete caracteres en formato de signo de número (#) seguido de una cadena de seis caracteres. 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 la herramienta de edición de imágenes para tomar una muestra del color y determinar su valor HTML RGB.

Para cambiar el color resaltado del módulo seleccionado en la barra de navegación

1. Abra el archivo premium.css usando un editor de texto como Bloc de notas.

2. En el archivo, busque lo siguiente:

   a.nbHiLt
   {
          background-color:#FFEFB2;
   }
   

3. Sustituya el valor RGB por el valor RGB del color que desea.

4. Para comprobar los cambios realizados en el tema personalizado, inicie sesión en Outlook Web Access, haga clic en Opciones, Configuración general y, 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. Si ya tiene una sesión activa de Outlook Web Access, presione F5 para actualizar la página y ver los cambios.

En la figura siguiente se muestra una sección de la barra de navegación de Outlook Web Access con el módulo Correo resaltado.

Panel de navegación que muestra el módulo Correo resaltado

Para cambiar los colores de selección de la lista primaria y secundaria

1. Abra el archivo premium.css usando un editor de texto como Bloc de notas.

2. Busque lo siguiente para cambiar el color de selección primario:

   tr.sel, tr.srsel, tr.lrsel
   {
         background-color: #FFEFB2;
   

3. Busque lo siguiente para cambiar el color de selección secundario:

   tr.shdw, tr.srshdw, tr.lrshdw
   {
         background-color:#F8F0D2;
   

4. Sustituya los valores RGB de los colores de selección primario y secundario por los valores RGB de los colores que desea.

5. Para comprobar el tema personalizado, inicie sesión en Outlook Web Access, haga clic en Opciones, Configuración general y, 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. Si ya tiene una sesión activa de Outlook Web Access, presione F5 para actualizar la página y ver los cambios.

El color de selección primario se usa para resaltar el elemento seleccionado en el panel de lista cuando está activado. Si, después, el usuario activa el panel de vista previa o de navegación, el elemento seleccionado en el panel de lista se resaltará con el color de selección secundario. En la figura siguiente se muestra la diferencia entre los colores de selección primario y secundario en Outlook Web Access.

Colores de selección primario y secundario en Outlook Web Access

Cambiar el fondo de la vista de lista

Al seleccionar Correo, Contactos, Tareas o Carpetas públicas en el panel de navegación, Outlook Web Access muestra una lista de los elementos de las carpetas de dichos módulos.

Puede agregar un fondo a la vista de lista modificando la configuración del archivo premium.css.

Para cambiar el fondo de la vista de lista de Outlook Web Access

1. Busque o cree una imagen en formato .gif.

2. Copie el archivo de imagen en la carpeta de temas personalizados.

3. Abra el archivo premium.css usando un editor de texto como Bloc de notas.

4. Busque la cadena siguiente para cambiar la imagen de fondo:

   div#divLstV{width:100%;height:100%;}
   

5. Cámbiela a:

   div#divLstV{background-image: url(image file name);width:100%;height:100%;}
   

6. Busque lo siguiente para cambiar la transparencia del fondo y que la nueva imagen se muestre correctamente:

   td#tdIL{background-color: #FFFFFF;height:100%;vertical-align:top;}
   

7. Cambie el valor del color de fondo al valor transparente:

   td#tdIL{background-color:transparent;height:100%;vertical-align:top;}
   

8. Para comprobar el tema personalizado, inicie sesión en Outlook Web Access, haga clic en Opciones, Configuración general y, 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. Si ya tiene una sesión activa de Outlook Web Access, presione F5 para actualizar la página y ver los cambios.

Modificación del tema predeterminado de Outlook Web Access

Puede cambiar el tema predeterminado de Outlook Web Access para un directorio virtual del tema básico a un tema personalizado mediante el cmdlet Set-OwaVirtualDirectory. También puede usar el cmdlet Set-OwaVirtualDirectory para deshabilitar la opción de selección de tema en Outlook Web Access. Si dispone de varios directorios virtuales de Outlook Web Access, puede usar los procedimientos siguientes para establecer un tema predeterminado para cada directorio virtual.

Cuando establezca un tema predeterminado, sólo los usuarios que no hayan iniciado sesión anteriormente en Outlook Web Access 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.

Para usar el Shell de administración de Exchange con el fin de establecer el tema predeterminado de Outlook Web Access

• Para establecer el tema predeterminado de Outlook Web Access 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", ejecute el siguiente comando:

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

Para usar el Shell de administración de Exchange con el fin de deshabilitar la selección de temas en Outlook Web Access

• Para deshabilitar la selección de temas en Outlook Web Access donde el nombre de servidor es "FourthCoffee", el nombre de directorio virtual es "owa" y el nombre del sitio web es "Default Web site", ejecute el siguiente comando:

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

También puede ejecutar el comando siguiente para efectuar ambos comandos simultáneamente:

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

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

Las páginas de inicio de sesión, selección de idioma y cierre de sesión de Outlook Web Access siempre se crean de acuerdo con los gráficos y el archivo logon.css de la carpeta del tema básico. Por lo tanto, el uso de páginas de inicio y cierre de sesión personalizadas requiere que modifique los archivos de la carpeta del tema básico. Esta carpeta se encuentra en el directorio de instalación de Exchange, en \Client Access\OWA\versión\themes\base.

Las páginas de inicio de sesión, selección de idioma y cierre de sesión usan el archivo logon.css para definir los colores y estilos de texto. Estas páginas se crean mediante la combinación de varias imágenes para las partes superior, inferior y laterales, además de la repetición de imágenes y esquinas para permitir la expansión. 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

Es más fácil conseguir una nueva apariencia con un color liso, puesto que se usa la misma selección de imágenes para tres páginas: la página de inicio de sesión, la página de selección de idioma que se muestra la primera vez que se inicia sesión en un buzón y la página de cierre de sesión. El tamaño de las páginas se puede modificar en sentido horizontal y vertical, en función del contenido de la página.

Si tiene varios servidores de acceso de cliente y desea que todos usen las mismas páginas de inicio y cierre de sesión, copie los archivos logon y logoff modificados en cada servidor de acceso de cliente.

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. 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 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

Una vez que haya abierto la página de inicio o cierre de sesión de Outlook Web Access en Internet Explorer, puede probar los cambios sin necesidad de restablecer IIS o salir de Internet Explorer.

Para probar los cambios en las páginas de inicio y cierre de sesión

1. Abra la página de inicio o cierre de sesión de Outlook Web Access en Internet Explorer.

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

3. En la ficha General, bajo Historial de exploración, haga clic en Eliminar.

4. En Archivos temporales de Internet, haga clic en Eliminar archivos y, a continuación, en Sí cuando se le pregunte si está seguro de que desea eliminar todos los archivos temporales de Internet Explorer

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

6. 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 la página de inicio o cierre de sesión. Si va a realizar varios cambios, puede dejar la página de inicio o cierre de sesión abierta y repetir los pasos para ver los cambios.

Cómo cambiar el logotipo

Para personalizar Outlook Web Access, puede cambiar el logotipo de Outlook Web Access en las páginas de inicio y cierre de sesión por el logotipo de su organización.

Para cambiar el logotipo en Outlook Web Access

1. Cree copias de los archivos que desee cambiar y guárdelas en una ubicación segura para poder restaurar las páginas originales si es necesario.

2. Abra el archivo lgntopl.gif con una herramienta de edición de imágenes y modifíquelo para crear el logotipo que desee usar.

3. Guarde los cambios y, a continuación, haga clic en el botón Actualizar para ver los cambios.

   Nota

   Si ha modificado el color de fondo de lgntopl.gif, le recomendamos que modifique los demás archivos usados para que las páginas de inicio y cierre de sesión tengan una apariencia acorde.

Cómo cambiar los colores y los estilos de fuente

Puede editar el archivo logon.css para cambiar los estilos de fuente y algunos de los colores usados en las páginas. También puede cambiar el color de fondo de los controles situados en el centro de las páginas de inicio de sesión y selección de idioma. Si ha modificado el color de estas páginas, le recomendamos que cambie el color de fondo en consecuencia.

Para cambiar el color de fondo y los colores de fuente de las páginas de inicio de sesión, selección de idioma y cierre de sesión, busque los valores en la hoja de estilos de inicio de sesión (logon.css) para determinar los valores HTML RGB de los colores que desea usar. Los valores HTML RGB de color se definen mediante una cadena de siete caracteres en formato de signo de número (#) seguido de una cadena de seis caracteres. 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 la herramienta de edición de imágenes para tomar una muestra del color y determinar su valor HTML RGB.

Para probar los cambios, abra Internet Explorer y escriba la URL de Outlook Web Access. Si va a probar los cambios del sitio web predeterminado en el servidor de acceso de cliente que hospeda el directorio virtual de Outlook Web Access, abra Internet Explorer y escriba la URL https://localhost/owa.

En la tabla siguiente se listan los elementos de las páginas de inicio y cierre de sesión, así como una descripción de cada elemento.

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

Elemento a cambiar	Cadena a buscar	Descripción
Color de fondo	Background: #7F90b1	El color de fondo de las páginas de inicio y cierre de sesión. Si cambia el color de fondo de los archivos de gráficos, debería cambiar todo el color de fondo de forma acorde.
Texto de advertencia	wrng{color:#f8d328}	El color del texto de advertencia que aparece cuando un usuario selecciona Es un equipo privado. En la página de inicio de sesión de Outlook Web Access existente, este texto de advertencia tiene un color amarillo claro que destaca sobre el fondo azul. Si cambia el color de fondo de la página de inicio, quizás deba cambiar también el color del texto de advertencia para que sea legible.
Color del texto primario	select, table {color:#ffffff;}	El color del texto primario es el blanco. Este texto indica las opciones que se pueden seleccionar y los campos de entrada de la página de inicio de sesión de Outlook Web Access. Las etiquetas para los campos de nombre de usuario y contraseña y el texto situado junto a las opciones de seguridad son algunos ejemplos. Si ha elegido un color oscuro para las páginas de inicio de sesión, el blanco seguirá siendo un color adecuado para este texto.
Mostrar explicación	a{color#ffe052;	Vínculo en la página de inicio de sesión para mostrar u ocultar la explicación de los inicios de sesión público y privado.
Descripción de Outlook Web Access Light	disBis{color:#c8d3e3;}	Cuando un usuario selecciona Usar Outlook Web Access Light, se muestra una breve explicación de Outlook Web Access Light.
Conectado a Microsoft Exchange	;color:#fffff;	Las palabras Conectado a Microsoft Exchange aparecen en la esquina inferior izquierda de las páginas de inicio y cierre de sesión. Si cambia este valor, cambiará el color del texto de estas palabras.
Dividir líneas	#A9AAc4	Las tres páginas del archivo logon.css están dividas en secciones por líneas finas. Estas páginas son inicio de sesión, cierre de sesión y selección de idioma. Después de cambiar los colores de fondo y de fuente, es recomendable que cambie el color de las líneas para que sean visibles, aunque no más que el texto.

Cuando haya decidido los elementos cuyo color desea cambiar e identificado los valores HMTL RGB del color que desea usar para los elementos, efectúe el siguiente procedimiento para cambiar el color de los elementos definidos en un archivo .css.

Para cambiar el color de un elemento

1. Abra logon.css.

2. Localice en la tabla de elementos de las páginas de inicio y cierre de sesión que se incluye en este tema, más arriba, la cadena que coincide con el elemento que desea cambiar.

3. Sustituya el valor HTML RGB del color del elemento que desea cambiar por el valor HTML RGB del color que desea usar para dicho elemento.

4. Guarde los cambios y cierre logon.css.

5. Para probar los cambios, abra Internet Explorer y escriba la URL de la página de inicio de sesión de Outlook Web Access.