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
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.
En \Client Access\OWA\<versión>\themes, cree una carpeta.
Copie los archivos premium.css y owafonts.css del tema básico a la carpeta nueva.
Copie los archivos que desea cambiar para crear el tema a partir del tema básico en la nueva carpeta creada.
Modifique 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 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
Copie el archivo themeinfo.xml de la carpeta del tema básico en la carpeta donde creó el tema personalizado.
Abra la copia del archivo 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 llamar al tema Fourth Coffee, el archivo debería indicar
theme displayname = "Fourth Coffee"
.Guarde los cambios y cierre el archivo themeinfo.xml.
Nota
Si cambia el nombre de un tema, debe detener y volver a iniciar IIS para que el cambio surta efecto. Para hacerlo, abra una ventana del símbolo del sistema y use el comando iisreset/noforce.
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
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.
En la carpeta del tema personalizado, abra premium.css con un editor de texto como, por ejemplo, el Bloc de notas.
Para quitar "Conectado a Microsoft Exchange" del encabezado, busque
"background:url("logopb.gif") no-repeat;"
y agreguedisplay:none;
inmediatamente después.Para cambiar el logotipo, use una herramienta de edición de imágenes y modifique el archivo logopt.gif.
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.
Cuando haya editado los archivos, guarde los cambios.
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
Abra el archivo premium.css usando un editor de texto como Bloc de notas.
En el archivo, busque lo siguiente:
a.nbHiLt { background-color:#FFEFB2; }
Sustituya el valor RGB por el valor RGB del color que desea.
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
Abra el archivo premium.css usando un editor de texto como Bloc de notas.
Busque lo siguiente para cambiar el color de selección primario:
tr.sel, tr.srsel, tr.lrsel { background-color: #FFEFB2;
Busque lo siguiente para cambiar el color de selección secundario:
tr.shdw, tr.srshdw, tr.lrshdw { background-color:#F8F0D2;
Sustituya los valores RGB de los colores de selección primario y secundario por los valores RGB de los colores que desea.
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
Nota
Puede usar el método que se usaba en el procedimiento anterior para cambiar los valores RGB de otros elementos del tema.
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
Busque o cree una imagen en formato .gif.
Copie el archivo de imagen en la carpeta de temas personalizados.
Abra el archivo premium.css usando un editor de texto como Bloc de notas.
Busque la cadena siguiente para cambiar la imagen de fondo:
div#divLstV{width:100%;height:100%;}
Cámbiela a:
div#divLstV{background-image: url(image file name);width:100%;height:100%;}
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;}
Cambie el valor del color de fondo al valor transparente:
td#tdIL{background-color:transparent;height:100%;vertical-align:top;}
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.
Advertencia
Para crear páginas de inicio y cierre de sesión personalizadas, debe cambiar los archivos del tema básico, por lo que es aconsejable que realice copias de seguridad de todos los archivos que vaya a modificar antes de hacerlo.
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
Abra la página de inicio o cierre de sesión de Outlook Web Access en Internet Explorer.
En la barra de herramientas, haga clic en Herramientas y, a continuación, en Opciones de Internet.
En la ficha General, bajo Historial de exploración, haga clic en Eliminar.
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
Haga clic en Aceptar para cerrar Opciones de Internet.
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
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.
Abra el archivo lgntopl.gif con una herramienta de edición de imágenes y modifíquelo para crear el logotipo que desee usar.
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.
Nota
La página de selección de idioma sólo aparece la primera vez que un usuario inicia sesión en Outlook Web Access.
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 |
|
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 |
|
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 |
|
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 |
|
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 |
|
Cuando un usuario selecciona Usar Outlook Web Access Light, se muestra una breve explicación de Outlook Web Access Light. |
Conectado a Microsoft Exchange |
|
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 |
|
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
Abra logon.css.
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.
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.
Guarde los cambios y cierre logon.css.
Para probar los cambios, abra Internet Explorer y escriba la URL de la página de inicio de sesión de Outlook Web Access.
Nota
Si ya ha abierto la URL de inicio de sesión de Outlook Web Access, elimine los archivos temporales de Internet y actualice Internet Explorer para comprobar los cambios. Para hacerlo, haga clic en Herramientas y, a continuación, en Opciones de Internet. En la ficha General, bajo Historial de exploración, haga clic en Eliminar. 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. Haga clic en Aceptar para cerrar Opciones de Internet y, después, presione F5 para actualizar la página de inicio.