Exportar (0) Imprimir
Expandir todo
Expandir Minimizar

Creación e implementación de temas de Outlook Web Access

 

Última modificación del tema: 2005-03-22

Este capítulo contiene información para ayudar a los administradores de Exchange a diseñar y modificar Microsoft Office Outlook® Web Access para los temas de Exchange Server 2003.

Durante el diseño de la versión de Microsoft Exchange Server 2003 de Outlook Web Access, Microsoft decidió unificar el uso de las hojas de estilos. Con esta decisión, el cliente de Outlook Web Access conservó un aspecto parecido al de Microsoft Office Outlook 2003. En el transcurso de esta tarea, algunos compañeros del equipo de Outlook Web Access, llevados por el entusiasmo, se dieron cuenta de que sería relativamente fácil incorporar una función de “máscara” o “tema” a la versión. Gracias a este esfuerzo, los usuarios pueden crear sus propios temas de Outlook Web Access. En este tema se tratan los conceptos básicos en torno a la creación e implementación de un tema en Outlook Web Access.

Al término del documento, tendrá los suficientes conocimientos sobre arquitectura de temas en Outlook Web Access como para crear temas personalizados, como el tema de Microsoft Xbox® que se ilustra en la siguiente ilustración.

Tema de XBOX para UI de OWA

El formato de prácticamente todos los elementos de Outlook Web Access (desde el nuevo formulario de correo a la lista de vistas y el panel de vista previa) se aplica por medio de hojas de estilos en cascada HTML.

Uno de los objetivos subyacentes del Lenguaje de marcado generalizado estándar (SGML) reside en ofrecer un modo de separar el formato del contenido. HTML y XML son ejemplos de lenguajes basados en SGML. Antes de que se utilizaran las hojas de estilos en cascada, esta separación no era factible en HTML y lo que normalmente se hacía era incluir todo el formato insertado en el contenido. Con las hojas de estilos en cascada, el formato se puede separar en un archivo independiente y asignar etiquetas identificativas en su lugar al contenido. Esta capacidad es precisamente la piedra angular de los temas de Outlook Web Access.

Para tener una buena noción de los temas de Outlook Web Access, es necesario conocer en cierta medida el funcionamiento de las hojas de estilos en cascada.

Los temas de Outlook Web Access utilizan el concepto de hojas de estilos vinculadas. Este tipo de hojas muestra una declaración en la parte superior de todas las páginas HTML que indica la hoja de estilos que la página debe utilizar.

Por ejemplo, en la parte superior de todas las páginas representadas en Outlook Web Access, la información de encabezado debe parecerse a la que se muestra a continuación.

<!--Copyright (c) 2000-2003 Microsoft Corporation. All rights reserved.-->
<HTML xmlns:MSIE DIR=LTR>
<HEAD>
<LINK rel="stylesheet" type="text/css" href="http://myserver.example.com/exchweb/themes/0/owacolors.css">

La directiva <link> señala la página en la que se encuentra la hoja de estilos que controla la información del tema de Outlook Web Access.

Una hoja de estilos se compone de una serie de reglas que definen el formato de los elementos de la página. Estas reglas se aplican tanto a los elementos estándar (como los encabezados y los estilos de párrafo) como a los elementos que se identifican mediante clases.

La hoja de de estilo de tema de Outlook Web Access predeterminada, que se encuentra en [letra de unidad]\Archivos de programa\Exchsrvr\exchweb\themes\0\owacolors.css, contiene más de 900 líneas de texto. Este archivo establece las reglas o definiciones de estilo que especifican los colores que se van a utilizar en las páginas de Outlook Web Access.

Una regla consta de una lista de elementos o etiquetas HTML seguida de una lista de propiedades de hoja de estilos en cascada insertas en corchetes. Se pueden definir varias etiquetas a la vez separándolas mediante comas. Cada propiedad de la regla se separa mediante un punto y coma, tal y como se muestra en el siguiente ejemplo.

/* DEFAULT (BLUE) */
.dlgBody, .noteBody, .bdyOptions, .bdySpell, .bdyRules, .bdyFontEdit, .bdyDatePkr
{
     background-color:#C3DAF9;
}

Este ejemplo de la hoja de estilos refleja que hay distintos elementos de Outlook Web Access que comparten la misma propiedad background-color (#C3DAF9). Esta referencia del color mediante un número es coherente con las reglas para especificar colores en HTML.

Si bien en la hoja de estilos de Outlook Web Access se puede definir un gran número de propiedades, en la siguiente tabla se recogen las que guardan mayor interés en el tema que nos ocupa.

 

Propiedades de interés de hoja de estilos en cascada de temas de Outlook Web Access

background-image

border-bottom-color

background-color

color

border-color

border-left-color

border-right-color

border-top-color

border-bottom-color

noteNOTA:
Aunque puede probar a especificar más propiedades (incluidas aquéllas que definen las fuentes y la colocación), tenga cautela a la hora de llevarlo cabo. Es aconsejable hacer una copia de seguridad del archivo .css original antes de proceder a realizar cualquier cambio.

En HTML, un color se especifica como un total de seis valores hexadecimales divididos en grupos de dos, cada uno de los cuales define una sombra o matiz de rojo, verde y azul (RGB). El valor se especifica en los archivos de la hoja de estilos en cascada y en las páginas web con una almohadilla (#).

Cuando diseñe un tema, comprobará que es conveniente disponer de un paquete gráfico con funciones completas (como PaintShop Pro o Adobe Photoshop) o de una herramienta de selección de color específica, como cualquiera de las cuantiosas utilidades disponibles en varios sitios de descarga de Internet como C|Net's Download.com. Estas herramientas pueden servir para analizar los colores y determinar sus equivalentes en valores web.

También puede especificar casi todos los colores habituales por su nombre. La mayoría de los exploradores entienden esta forma de escribir y convierten el color en su representación hexadecimal al representarlo.

Outlook Web Access se ha optimizado para utilizar Microsoft Internet Explorer 6 o posterior. Estos clientes se conocen como clientes premium. No obstante, Outlook Web Access también proporciona una experiencia de correo electrónico básica destinada a otros exploradores, como Internet Explorer 5.01 y Netscape 4.8 o posterior. Por desgracia, no todos los clientes básicos admiten las hojas de estilos en cascada plenamente, por lo que no se les podrá proporcionar un soporte de temas completo.

Tal y como se ha mencionado antes, Outlook Web Access mira en uno de los subdirectorios de la instalación del servidor de Exchange 2003 para hallar la información de tema. En concreto, empieza en el directorio ..\exchsrvr\exchweb\themes, que incluye a su vez un número de subdirectorios (uno por cada uno de los temas instalados para la instancia de Outlook Web Access).

La siguiente ilustración muestra la estructura de temas predeterminada.

Ubicación de archivos relacionados con los temas

Una nueva instalación de Exchange Server 2003 tiene cinco subdirectorios, que se corresponden con los cinco temas predeterminados del producto.

En cada uno de los subdirectorios verá un archivo de hoja de estilos en cascada maestro y varios archivos de imagen asociados al tema en cuestión.

En la siguiente tabla se describe con qué se corresponde cada imagen.

 

Image (Imagen) Archivo Descripción
Logotipo de producto de OWA

Logo2.gif

Logotipo principal. Se trata del logotipo de personalización de marca de 179 x 36 píxeles. Para reducir la cantidad de trabajo necesaria, trate de reemplazarlo por una imagen del mismo tamaño aproximadamente. De igual forma, el color de fondo del logotipo debe ser el mismo que el de la aplicación.

Imagen de tema de OWA

Nb-bkgd.gif

Fondo de la barra de navegación (se repite). Se trata de una tira de 1 x 26 píxeles que se usa como color de fondo en la barra de navegación de la parte izquierda de la ventana de Outlook Web Access. La imagen predeterminada usa un relleno de color degradado.

Gráfico de tema de OWA

Nb-hide-ql.gif

Imagen de “ocultación” de la barra de navegación. Se trata de una imagen de 50 x 8 píxeles que se utiliza en la ventana de navegación izquierda para ocultar o expandir la barra de navegación.

Gráfico de tema de OWA

Nb-ql-tgl.gif

Fondo de “ocultación” de la barra de navegación. Esta imagen aparece tras los archivos hb-hide-ql.gif y hb-show-ql.gif y normalmente consiste en un relleno degradado con un color que no desentona con las imágenes que tiene detrás.

Gráfico de tema de OWA

Nb-sel-bkgd.gif

Barra de navegación seleccionada. Se trata de una imagen de 1 x 26 píxeles que se usa resaltado de fondo en la barra de navegación.

Gráfico de tema de OWA

Nb-show-ql.gif

Imagen “mostrar” de la barra de navegación. Esta imagen presenta el mismo tamaño que nb-hide-ql.gif y se muestra cuando las opciones de la barra de navegación (Calendario, Opciones, Bandeja de entrada) están ocultas.

Gráfico de tema de OWA

Nin-bg.gif

Fondo de la ventana de notificación emergente. Se trata de la imagen de fondo 130 x 126 píxeles de las notificaciones emergentes de Outlook Web Access. Esta imagen se puede cambiar por una marca de agua de cualquier imagen que quiera usar, pero asegúrese de que el texto que aparece en la parte superior es legible.

Gráfico de tema de OWA

Resize-dot.gif

Una imagen de 1 x 1 píxeles que Outlook Web Access usa internamente.

Gráfico de tema de OWA

Tool-bkgd.gif

Fondo de la barra de herramientas. Se trata de una imagen de 1 x 32 píxeles que se usa como fondo de la barra de herramientas situada en la parte superior de la ventana de Outlook Web Access. También es la imagen de fondo de los botones sin seleccionar de la barra de navegación.

Con unos conocimientos básicos de las hojas de estilos en cascada y las distintas versiones de Outlook Web Access que hay disponibles, puede crear un nuevo tema llamado “Naranja” a partir del tema estándar “Azul”.

En la siguiente ilustración aparece Outlook Web Access con el tema azul predeterminado.

Tema azul predeterminado para UI de OWA

El proceso de modificación del tema consta de los siguientes pasos:

  1. Crear un nuevo espacio para el tema en el servidor de Outlook Web Access
  2. Actualizar el Registro del servidor para que Outlook Web Access pueda encontrar el tema
  3. Modificar la hoja de estilos del tema
  4. Actualizar las imágenes del tema

El modo más sencillo de crear un tema consiste en modificar el tema predeterminado. Para crear un tema nuevo llamado "Florida", copie los archivos del tema predeterminado.

noteNOTA:
Por lo general, la mayoría de las organizaciones implementan Outlook Web Access en un escenario de servidor front-end y back-end, por lo que las instrucciones de esta sección se ajustarán a este escenario. Si está trabajando en el prototipo de servidor independiente, puede aplicar toda la configuración a un único equipo.
Para crear un espacio nuevo para el tema
  1. En el servidor front-end, vaya al directorio Archivos de programa\exchsrvr\exchweb\themes\0\.

  2. Haga una copia de dicha carpeta y denomínela Archivos de programa\exchsrvr\exchweb\themes\orange\.

CautionPrecaución:
La modificación incorrecta del Registro puede ocasionar problemas graves que quizás requieran volver a instalar el sistema operativo. Es posible que los problemas derivados de una modificación incorrecta del Registro no se puedan resolver. Antes de modificar el Registro, se recomienda realizar una copia de seguridad de todos los datos importantes.
Para actualizar el Registro para que utilice el nuevo tema
  1. En el servidor back-end, ejecute el Editor del Registro y vaya a la siguiente clave:

    HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\MSExchangeWeb\OWA

  2. En caso de que la subclave no exista, cree una nueva llamada Themes.

  3. En la subclave Themes, cree un nuevo valor de cadena (REG_SZ) llamado “FloridaTheme”. Este valor no se muestra al usuario.

  4. Tal y como refleja la siguiente ilustración, establezca este valor en:

    id=0x1;path=orange;title=Florida;bgcolor=#b26d0a

    Ubicación de clave del Registro para OWA

    ID: el identificador del tema debe ser exclusivo con respecto al resto de temas. Se puede especificar como un número decimal o hexadecimal y ha de ser menor que 0 x 80000000. Observe igualmente que si establece ID en números hexadecimales, deberá asegurarse de que el primer dígito sea un cero.

    Los temas integrados no tienen el primer bit establecido en 1, pero los personalizados sí. Éste es el motivo por el que no se puede establecer un Id. de tema personalizado con el primer bit establecido. Una vez especificado el id. en el Registro, insertará en el valor un operador OR con 0 x 80000000 y dicho valor será el id. final que se conservará en los buzones de los usuarios.

    Path: indica la ruta de acceso debajo del directorio exchweb\themes donde ha colocado los archivos del tema.

    Title: nombre para mostrar de Outlook Web Access del tema. Este valor no puede estar vacío y no debe superar los 512 caracteres.

    Bgcolor: especifica el color de fondo predeterminado del conjunto de marcos del tema. Este valor se debe establecer fuera del archivo owacolors.cs, ya que el color de fondo de un conjunto de marcos no se puede especificar en un archivo de hoja de estilos en cascada. Esta opción se muestra como el color de fondo de marco en la sección Paleta de colores simplificada. Si vuelve a modificar el color de fondo de marco, deberá actualizar este valor. También deberá asegurarse de que el color de fondo del logotipo coincide con este valor. El valor debe especificarse con el formato #RRGGBB (no se pueden usar nombres predeterminados de explorador como blanco o negro).

    Transcurridos entre 30 y 60 segundos, el nuevo tema deberá estar disponible en la página de opciones de Outlook Web Access.

    noteNOTA:
    Asegúrese de que copia los archivos del tema en todos los servidores front-end y de que actualiza la configuración del Registro de todos los servidores back-end. En caso de que Outlook Web Access indique que el valor del Registro no es correcto, ignorará el tema en cuestión.

Una vez configurado el servidor, comienza el trabajo en serio.

Para modificar la hoja de estilos en cascada
  1. Busque la hoja de estilos en cascada.

  2. Use un editor de texto como el Bloc de notas para buscar y reemplazar todas las repeticiones de themes\0 with themes\orange.

  3. Guarde el archivo actualizado.

Con la hoja de estilos actualizada puede cambiar los colores del tema.

Una de las cosas más difíciles de lograr en el diseño de un tema es dar con el conjunto de colores complementarios adecuado. Una forma de no complicarse la vida a este respecto es elegir el color principal en el que desea basar el tema y realizar pequeñas modificaciones en dicho color para el resto de los elementos. Estas modificaciones son más fáciles de hacer si su programa de dibujo permite trabajar en los modos Matiz, Saturación y Brillo.

No está en el propósito de este documento profundizar en el tema de la selección del color adecuado pero, en pocas palabras, la mayor parte de la selección del color se basa en la teoría de la rueda de colores. En esta teoría existen diversas herramientas bastante mecánicas que se pueden usar para obtener los colores complementarios. En aquellos casos en los que desee colores que contrasten, el enfoque básico es elegir colores totalmente opuestos entre sí en la rueda de colores. Esto debería dar como resultado una pareja de colores complementaria. El método más básico para seleccionar los colores del tema consiste en utilizar lo que se denomina un esquema de colores monocromáticos, en el que todos los colores son variaciones en claridad y saturación de un solo color. Este esquema es agradable a la vista y fácil de diseñar. Si bien su uso es muy sencillo, este esquema no ofrece necesariamente el mejor contraste.

Si su equipo cuenta con un diseñador web, éste ayudará a desarrollar un estupendo esquema de colores para el tema personalizado. En este ejemplo se ha utilizado una herramienta de rueda de colores programática como Color Wheel Pro para crear una paleta de colores complementarios para usarla en el tema. En dicho tema se emplea un esquema complementario dividido basado en naranja suave. La paleta creada contenía varios pasos de claridad y saturación del color, pero un único matiz de color.

La siguiente ilustración muestra la paleta Florida y su paleta opuesta complementaria.

Paleta de colores de azul y naranja para el tema Florida

En Outlook Web Access y la hoja de estilos owacolors.css, hay más de 60 colores especificados en un tema estándar, más de 900 líneas de archivo CSS que desgranar y más de 200 clases identificadas. La sección Color de plantilla determinada trata los colores del tema predeterminado. Por suerte, sólo es necesario modificar unos 30 colores principales para obtener un tema.

La siguiente ilustración recoge la paleta utilizada en este tema y los colores de sustitución. Para obtener información detallada sobre la paleta de colores predeterminada, consulte la sección Color de plantilla determinada en este mismo artículo.

 

Se corresponde con

Tabla de sustituciones de color para crear un nuevo tema

1. Fondo de cuadro de diálogo y nota

Tabla de sustituciones de color para crear un nuevo tema

2. Fondo de marco

Tabla de sustituciones de color para crear un nuevo tema

3. Fondo de la barra de herramientas

Tabla de sustituciones de color para crear un nuevo tema

4. Barra de navegación, fondo de etiqueta, color del divisor de la barra de herramientas

Tabla de sustituciones de color para crear un nuevo tema

5. Fondo de menú

Tabla de sustituciones de color para crear un nuevo tema

6. Color de borde en 3D: oscuro

Tabla de sustituciones de color para crear un nuevo tema

7. Color de borde en 3D: normal, degradado de encabezado de vista (segunda línea: debería ser algo más oscuro que 15)

Tabla de sustituciones de color para crear un nuevo tema

8. Fondo de la barra de información

Tabla de sustituciones de color para crear un nuevo tema

9. Texto de la barra de información

Tabla de sustituciones de color para crear un nuevo tema

10. Fondo del indicador de progreso de S/MIME

Tabla de sustituciones de color para crear un nuevo tema

11. Fondo de ficha sin seleccionar (debería ser algo más oscuro que 1)

Tabla de sustituciones de color para crear un nuevo tema

12. Fondo de ficha (debería ser algo más oscuro que 11)

Tabla de sustituciones de color para crear un nuevo tema

13. Ordenar columna en encabezados de vista

Tabla de sustituciones de color para crear un nuevo tema

14. Fondo de encabezado de vista, fila seleccionada en la vista (sombra)

Tabla de sustituciones de color para crear un nuevo tema

15. Degradado de encabezado de vista (primera línea: debería ser algo más oscuro que 14)

Tabla de sustituciones de color para crear un nuevo tema

16. Fondo del panel de vista previa

Tabla de sustituciones de color para crear un nuevo tema

17. Elemento seleccionado

Tabla de sustituciones de color para crear un nuevo tema

18. Borde de conjunto de campos (debería ser más oscuro que 1)

Tabla de sustituciones de color para crear un nuevo tema

19. Color de fondo de la barra izquierda del menú contextual

Tabla de sustituciones de color para crear un nuevo tema

20. Fondo de desplazamiento de mouse por botón

Tabla de sustituciones de color para crear un nuevo tema

21. Botón presionado

Tabla de sustituciones de color para crear un nuevo tema

22. Color de borde de etiqueta de barra de navegación

Tabla de sustituciones de color para crear un nuevo tema

23. Color de borde de control de árbol

Tabla de sustituciones de color para crear un nuevo tema

24. Fondo de encabezado de calendario

Tabla de sustituciones de color para crear un nuevo tema

25. Borde de encabezado de calendario (debería ser algo más brillante que 23)

Tabla de sustituciones de color para crear un nuevo tema

26. Fondo de control libre/ocupado

Tabla de sustituciones de color para crear un nuevo tema

27. Fondo de control libre/ocupado (destinatarios)

Tabla de sustituciones de color para crear un nuevo tema

28. Borde de control de árbol

Tabla de sustituciones de color para crear un nuevo tema

29. Fondo del panel de vista previa (sin elementos)

Tabla de sustituciones de color para crear un nuevo tema

La siguiente ilustración muestra una página principal de Outlook Web Access con la mayoría de estos colores numerados e identificados para establecer la correspondencia con el archivo de paleta.

Llamadas en UI de OWA que muestran donde aparecen los colores

Casi todos los colores son variaciones del azul. Al diseñar un tema nuevo, puede tomar la paleta simplificada de arriba y empezar a sustituir los colores del nuevo tema. Trate de usar colores con la misma saturación y claridad. Para algunos de los colores de contraste puede optar por colores más oscuros o por colores complementarios que produzcan un mejor contraste. Dos ejemplos serían los colores de fondo de desplazamiento de mouse por botón y de botón presionado.

Para sustituir los colores de la paleta
  1. Abra el archivo de hoja de estilos en cascada y modifique la paleta de colores utilizando la paleta de colores simplificada en un programa de dibujo como Adobe Photoshop o Jasc Paint Shop Pro.

  2. Use el cuentagotas (o una herramienta por el estilo) y el archivo de paleta predeterminado junto con la paleta de colores creada anteriormente para dar con el nuevo valor hexadecimal.

    noteNOTA:
    Asegúrese de que el equipo se está ejecutando en modo de color de 32 bits, ya que, si no es así, es posible que los valores que muestre el programa de dibujo para la paleta predeterminada difieran ligeramente de los mencionados en este artículo.
  3. Registre todas las sustituciones de color hexadecimal para actualizar el archivo owacolors.css con los nuevos colores.

  4. Abra el archivo owacolors.css en el Bloc de notas y busque y reemplace los antiguos valores de color hexadecimales por los nuevos valores.

  5. Después de modificar el archivo owacolors.css, cópielo en el servidor, inicie sesión en Outlook Web Access y revise los resultados obtenidos. No olvide que estos cambios afectan únicamente a los colores, no a las imágenes. Cuando termine de ajustar la paleta de colores, podrá empezar a cambiar las imágenes.

El último paso para crear el tema personalizado consiste en modificar las imágenes predeterminadas.

Para actualizar las imágenes
  1. Abra cada una de las imágenes en el programa de dibujo y conviértalas temporalmente en imágenes de color a 24 o 32 bits.

  2. Aplique colores degradados a las imágenes que se correspondan con los colores de la nueva paleta.

noteNOTA:
Las imágenes actualizadas se deben guardar como archivos .gif en 16 o 256 colores. Los archivos tool-bkgd.gif y nin-bg.gif se deben guardar en 256 colores, mientras que el resto de imágenes se pueden guardar en 16 colores.

En la siguiente tabla se muestran las imágenes actualizadas relativas al tema de ejemplo que nos ocupa.

 

Image (Imagen) Archivo Descripción
Imagen de logotipo de OWA falso

Logo2.gif

Logotipo principal. Para esta imagen, reemplace el color de fondo por el nuevo “fondo de marco” o bien sustituya la imagen por su imagen personalizada.

Gráfico del tema Florida de OWA

Nb-bkgd.gif

Fondo de la barra de navegación (se repite). Se trata de una tira de 1 x 26 píxeles que se usa como color de fondo en la barra de navegación de la parte izquierda de la ventana de Outlook Web Access. La imagen predeterminada usa un relleno de color degradado.

Gráfico de tema de OWA

Nb-hide-ql.gif

Imagen de “ocultación” de la barra de navegación. Se trata de una imagen de 50 x 8 píxeles que se usa en la ventana de navegación izquierda para ocultar o expandir la barra de navegación.

Gráfico del tema Florida de OWA

Nb-ql-tgl.gif

Fondo de “ocultación” de la barra de navegación. Esta imagen aparece tras los archivos hb-hide-ql.gif y hb-show-ql.gif y normalmente consiste en un relleno degradado con un color que no desentona con las imágenes que tiene detrás.

Gráfico del tema Florida de OWA

Nb-sel-bkgd.gif

Barra de navegación seleccionada. Se trata de una imagen de 1 x 26 píxeles que se usa resaltado de fondo en la barra de navegación.

Gráfico de tema de OWA

Nb-show-ql.gif

Imagen “mostrar” de la barra de navegación. Esta imagen presenta el mismo tamaño que nb-hide-ql.gif y se muestra cuando las opciones de la barra de navegación (Calendario, Opciones, Bandeja de entrada) están ocultas.

Gráfico del tema Florida de OWA

Nin-bg.gif

Fondo de la ventana de notificación emergente. Se trata de la imagen de fondo 130 x 126 píxeles de las notificaciones emergentes de Outlook Web Access. Esta imagen se puede cambiar por una marca de agua de cualquier imagen que quiera usar, pero asegúrese de que el texto que aparece en la parte superior es legible.

Gráfico de tema de OWA

Resize-dot.gif

Una imagen de 1 x 1 píxeles que Outlook Web Access usa internamente.

Gráfico del tema Florida de OWA

Tool-bkgd.gif

Fondo de la barra de herramientas. Se trata de una imagen de 1 x 32 píxeles que se usa como fondo de la barra de herramientas situada en la parte superior de la ventana de Outlook Web Access. También es la imagen de fondo de los botones sin seleccionar de la barra de navegación. Esta imagen se debe guardar en 256 colores.

En la siguiente imagen aparece Outlook Web Access con el nuevo tema.

Ejemplo del tema Florida aplicado a UI de OWA

En las siguientes secciones encontrará información adicional que puede ser de utilidad a la hora de crear su propio tema.

En la descarga opcional de este artículo hay disponible un archivo HTML denominado owatheme.htm. Si este archivo se coloca en un directorio junto con la hoja de estilos owacolors.css, se mostrará una lista con todos los colores que se utilizan en la hoja, así como las clases de Outlook Web Access asociadas a ellos. Para ver un ejemplo de esta lista, consulte la sección Color de plantilla determinada en este mismo artículo.

Normalmente, si se desea cambiar un color de la interfaz de usuario de Outlook Web Access. se hace una captura de pantalla, se abre el programa de dibujo, se averigua el valor web del color y, finalmente, se busca en la hoja de estilos owacolors.css.

Prácticamente todos los objetos de Outlook Web Access tienen asociado una clase de estilo. Algunos serán más evidentes que otros cuando consulte el archivo owacolors.css. Puede que sea necesario tener ciertos conocimientos para saber a qué nombre de clase desea agregar un fondo.

La sintaxis de la hoja de estilos en cascada para agregar una imagen de fondo suele ser muy parecida a la que se recoge en el siguiente ejemplo.

Classname
{
     Background-image:url(/exchweb/themes/yourtheme/imagename.gif)
}

Así, si desea agregar una imagen de una palmera al fondo de la página de Outlook Web Access en el tema personalizado, modifique la regla de las clases msgViewer, msgViewerCont y msgViewerGroupCont. El siguiente ejemplo refleja la modificación.

.msgViewer, .msgViewerCont, .msgViewerGroupCont
{
     Background-image:url(/exchweb/themes/orange/viewpalm.gif)
}

La siguiente ilustración muestra los resultados de esta modificación.

Tema Florida para fondo de palmera de IU de OWA

A pesar de que hay más de 200 clases para elegir, probablemente le interesen sólo unas pocas para cambiar la imagen de fondo. Estas clases se enumeran en la siguiente tabla.

 

Nombre de la clase Descripción

.notebody

Todos los tipos de elemento (mensaje, convocatoria de reunión, tarea).

.treefolder, .nbTreeProgress

Control de árbol de carpetas.

.dlgBody

Varios cuadros de diálogo genéricos, como los relativos a mover, copiar, nueva carpeta, resolución de nombres de dirección, opciones de mensaje.

.previewBody, .vwPrvwTD

Cuerpo y fondo del panel de vista previa.

.bdyOptions

Página de opciones de Outlook Web Access.

.bdySpell

Cuadros de diálogo de la característica de revisión ortográfica

.bdyRules

Opción y editor de reglas.

.msgViewer, .msgViewerCont, .msgViewerGroupCont

Lista de vistas de elementos de Outlook Web Access.

En este tema se tratan las imágenes de tema predeterminado. Si se alteran las imágenes que hay fuera de los directorios de temas, afectarán a todos los temas. Outlook Web Access utiliza alrededor de 500 imágenes distintas en Exchange Server 2003. Los temas predeterminados de Outlook Web Access emplean tan sólo unas cuantas imágenes específicas. Si decide cambiar las imágenes principales, no modifique sus tamaños (ancho y alto en píxeles).

Este artículo sólo se centra en los cambios de estilo de owacolors.css, pero existen más hojas de estilos de uso interno, ubicadas en el directorio ..exchweb/versionnumber/controls, como OWAStyle.css. Aunque, por lo general, las definiciones de clases de estos archivos pueden superponerse, los elementos definidos en OWAStyle.css no aparecen en owacolors.css. Si trata de redefinir alguno de estos elementos en la hoja de estilos del tema, no se producirá efecto alguno, por cuanto la última definición de elemento es la que "gana" y OWAStyle.css constituye la última referencia en el HTML que el explorador ve.

Una vez que haya agregado su tema, existen otras opciones disponibles con respecto a la forma en que se usa en la organización.

De forma predeterminada, si sigue las instrucciones de este artículo, su tema estará disponible para todos los usuarios. Puede que algunas organizaciones deseen estandarizar la instalación de Outlook Web Access y especificar el tema personalizado que todos los usuarios van a ver. Puede establecer el tema predeterminado si agrega DefaultTheme a la configuración de Registro de Outlook Web Access y define su valor de forma que sea el del tema personalizado que ha creado.

Para definir DefaultTheme
  1. En el servidor back-end, ejecute el Editor del Registro.

  2. Vaya a la siguiente clave:

    \HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\MSExchangeWeb\OWA\Themes

  3. En la subclave Themes, cree un nuevo valor DWord llamado DefaultTheme.

  4. Establezca el valor DefaultTheme como el Id. de tema relativo al tema que desea establecer como predeterminado.

noteNOTA:
Cuando DefaultTheme se haya especificado, todos los usuarios verán el mismo tema y no podrán especificar ningún otro. Para permitir que los usuarios seleccionen sus propios temas, elimine el valor DefaultTheme.

En los siguientes recursos encontrará más información que le será de ayuda para crear nuevos temas de Outlook Web Access.

El archivo OWATheme.htm genera una lista de todos los colores y clases que se usan en un tema. Para poder utilizarlo, copie el archivo owacolors.css del tema que quiera revisar en el mismo directorio que OWATheme.htm. Cuando abra OWATheme.htm, leerá el archivo owacolors.css y generará una tabla de colores y clases del tema.

El archivo OWATheme.htm se incluye en el archivo descargable opcional disponible para este artículo.

La paleta simplificada predeterminada de Outlook Web Access se incluye en el archivo descargable opcional.

En colaboración con el equipo de Xbox, hemos creado un tema de Xbox para Outlook Web Access.

Para usar el tema de Xbox
  1. Descargue el archivo opcional para el tema.

  2. Descomprima el contenido del archivo y cópielo en un directorio themes\xbox.

  3. Ejecute el Editor del Registro y vaya a la siguiente clave:

    \HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\MSExchangeWeb\OWA\Themes

  4. En la subclave Themes, agregue el valor xbox.

  5. Establezca dicho valor en:

    Id=100;path=xbox;title=Xbox;bgcolor=#000000

    noteNOTA:
    Es posible que deba cambiar el id. para que sea compatible con su servidor.

En la siguiente tabla se enumeran todos los colores que se utilizan en el tema predeterminado. Cada entrada contiene un muestrario de colores, el código equivalente en web, el código RGB y todas las clases de Outlook Web Access que utilizan el color en el archivo owacolor.css.

 

Muestra de color de la paleta de OWA

dlgBody noteBody bdyOptions bdySpell bdyRules bdyFontEdit bdyDatePkr bdyView tabselected tabdiv srchBody notification galBody galInputArea galButtons gallBody gallClsTable gallClsTextField enBody enClsTable rmndrBODY rmndrICell btnSig btnSig btnSig btnSig btnEnc btnEnc btnEnc btnEnc

Muestra de color de la paleta de OWA

mainBody cbToolbar fldrTitleBar vwTbl THeader nbTableMain dailyAllDayCell dailyAllDayContainer

Muestra de color de la paleta de OWA

msgViewer msgViewerCont msgViewerGroupCont recipWell recipBox tbButtonDown:hover cbSubmenu cbSubmenu cbSubmenu cbSubmenu viewBody tblMsgBody txtBody grpLEFT grpRIGHT grpTop grpBottom tabselected tabselected tabselected tabsunselected tabsunselected tabsnone tabdiv tabdiv vwHdrTD vwHdrTD vwHdr vwHdr vwHdrSrtd vwHdrSrtd vwHdrSrtd attachList divCtxtMenu divCtxtMenu previewBody rulesHeader rulesHeader selRow trSelItem nbDropMenu nbDropMenu treeFolder nbTreeProgress dlgTree dlgTree dlgTree rowselected divgaltable rmndrRowSel groupHdr groupHdr ctxtMenu ctxtMenu ctxtMenu ctxtMenu cpMainTable dailyAppt weeklyMainTable weeklyAlldayAppointment weeklySelectedDateHeader monthlyNextPrevDateHeader monthlySelectedDateHeader monthlyDateBody monthlyNextPrevDateBody monthlyAlldayAppointment fbbodyLTR fbbodyLTR fbbodyLTR fbbodyLTR fbbodyRTL fbbodyRTL fbbodyRTL fbbodyRTL recip hrdivbottom btnSigPreview btnSigPreview btnSigPreview btnSigPreview btnEncPreview btnEncPreview btnEncPreview btnEncPreview btnSigHover btnSigHover btnSigDown btnSigDown

Muestra de color de la paleta de OWA

msgHeader previewHdr rnSecBar fldDisabled unselRow trUnselItem rowunselected UNKNOWN fb_splitter_behavior fb_span_div fbtable fbbodyLTR fbbodyRTL tr sigInfoInput sigInfoTable

Muestra de color de la paleta de OWA

recipWell ipFlat ipFlat ipFlat ipFlat recipBox recipBox recipBox recipBox MSGBODY MSGBODY MSGBODY MSGBODY txtBody txtBody txtBody txtBody attachList attachList attachList attachList

Muestra de color de la paleta de OWA

cbToolbar FORMATBAR nbTglTD nbTglQLTD

Muestra de color de la paleta de OWA

tbDivider tbDivider tbDivider tbDivider apptTdDatePicker apptTdDatePicker nbLabel

Muestra de color de la paleta de OWA

tbButton tbButtonDown tbButtonRaise cbSubmenuItem cbSubmenu rnProgressBar divRcpResRIn divRcpResROut divRcpResCIn divRcpResCOut divRcpResC unselRow shdwRow ctxmnuMnu trUnselItem nbHref treeFolder nbTreeProgress fldName rowunselected divgaltable divgaltable divgaltable divgaltable rmndrCol1hd rmndrCol1hd crdHeader groupHdr cpMainTable cpMainTable cpMainTable cpMainTable cpTopRow cpActiveDateCell cpSelectedDateCell cpKeyNavCell1 cpKeyNavCell1 cpKeyNavCell1 cpKeyNavCell1 cpKeyNavCell1 dailyViewCell dailyAllDayAppointment dailyAllDayAppointment dailyAllDayAppointment dailyAllDayAppointment dailySelectedAllDayAppointment dailySelectedAllDayAppointment dailySelectedAllDayAppointment dailySelectedAllDayAppointment dailySelectedAllDayAppointment dailyContainer1 dailyContainer1 dailyContainer1 dailyContainer1 dailyContainer2 dailyContainer2 dailyContainer2 dailyContainer2 dailyContainer3 dailyContainer3 dailyContainer3 dailyContainer3 dailyContainer4 dailyContainer4 dailyContainer4 dailyContainer4 dailyContainer5 dailyContainer5 dailyContainer5 dailyContainer5 dailyContainer6 dailyContainer6 dailyContainer6 dailyContainer6 dailyContainer7 dailyContainer7 dailyContainer7 dailyContainer7 dailyAppt dailyAppt dailyAppt dailyAppt weeklyMainTable weeklyMainTable weeklyMainTable weeklyMainTable weeklyDateCell weeklyDateCell weeklyDateCell weeklyDateCell weeklyWeekendDateCell weeklyWeekendDateCell weeklyWeekendDateCell weeklyWeekendDateCell weeklySelectedAppointment weeklySelectedAlldayAppointment weeklyAlldayAppointment weeklyAlldayAppointment weeklyAlldayAppointment weeklyAlldayAppointment weeklyAlldayAppointment weeklyDateHeader weeklySelectedDateHeader monthlyDateHeader monthlySelectedDateHeader monthlyNextPrevDateHeader monthlyDayTitlesCell monthlyDayTitlesCell monthlyDayTitlesCell monthlyDayTitlesCell monthlySelectedAppointment monthlySelectedAlldayAppointment monthlyAlldayAppointment monthlyAlldayAppointment monthlyAlldayAppointment monthlyAlldayAppointment

Muestra de color de la paleta de OWA

tbButtonDown tbButtonRaise tbButtonRaise tbButton A:hover tbButton:hover cbSubmenuItem A:hover cbSubmenuItem:hover

Muestra de color de la paleta de OWA

tbButtonDown:hover

Muestra de color de la paleta de OWA

cbSubmenuItem cbSubmenuItem cbSubmenuItem cbSubmenuItem fbButton fbButton fbButton fbButton cbSubmenu divContextMenu divCtxtMenu ctxmnuBar nbDropMenu ctxtMenu dailyRow monthlyDayHeader

Muestra de color de la paleta de OWA

tblMsgBody tblMsgBody vwHdrSrtd vwHdrSrtd vwHdrBrdr3 divCtxtMenu nbDropMenu dlgTree dlgTree btnSigHover btnSigHover btnSigDown btnSigDown

Muestra de color de la paleta de OWA

tblMsgBody tblMsgBody tabselected tabsunselected tabsunselected tabdiv tabdiv vwHdrTD vwHdrTD vwHdr vwHdr vwHdrBrdr2 divCtxtMenu rulesTableContainer rulesTableContainer rulesHeader rulesHeader nbDropMenu groupHdr groupHdr

Muestra de color de la paleta de OWA

rnStatusBar

Muestra de color de la paleta de OWA

rnStatusBar

Muestra de color de la paleta de OWA

rnProgressBar

Muestra de color de la paleta de OWA

tabsunselected

Muestra de color de la paleta de OWA

tabBkgd

Muestra de color de la paleta de OWA

vwHdrSrtd

Muestra de color de la paleta de OWA

vwHdrTR vwHdr tblHdr rulesHeader shdwRow gallistheading crdHeader groupHdr cpTopRow cpSelectedDateCell calDateHeadingCell dailyAllDayCell dailyAllDayAppointment dailySelectedAllDayAppointment calDateHeadingText1 calDateHeadingText2 calDateHeadingText3 calDateHeadingText4 calDateHeadingText5 calDateHeadingText6 calDateHeadingText7 dailyHoursCell dailyMinsCell

Muestra de color de la paleta de OWA

vwHdrBrdr1

Muestra de color de la paleta de OWA

divRcpUnresRIn divRcpUnresROut divRcpUnresCIn divRcpUnresCOut divRcpUnresC ruleBroken cpTodaysDateCell cpTodaysDateCell cpTodaysDateCell cpTodaysDateCell cpTodaysDateCell tblSigInvalid tblSigInvalid

Muestra de color de la paleta de OWA

purpleFlg

Muestra de color de la paleta de OWA

orangeFlg

Muestra de color de la paleta de OWA

greenFlg

Muestra de color de la paleta de OWA

yellowFlg

Muestra de color de la paleta de OWA

blueFlg

Muestra de color de la paleta de OWA

redFlg

Muestra de color de la paleta de OWA

completeFlg vwFldrTtl vwName THeader rulesTableContainer

Muestra de color de la paleta de OWA

noFlg

Muestra de color de la paleta de OWA

previewBody previewBody previewBody previewBody

Muestra de color de la paleta de OWA

vwSortCol

Muestra de color de la paleta de OWA

vwPrvwTD

Muestra de color de la paleta de OWA

vwItemSep

Muestra de color de la paleta de OWA

ruleNotSupported

Muestra de color de la paleta de OWA

DLCertMissing tr tr tr tr

Muestra de color de la paleta de OWA

selRow trSelItem rowselected rmndrRowSel ctxtMenu cpDayLettersCell cpWeekNumberCell dailySelectedAllDayAppointment weeklySelectedAppointment weeklySelectedAlldayAppointment weeklySelectedDateHeader monthlySelectedDateHeader monthlySelectedAppointment monthlySelectedAlldayAppointment

Muestra de color de la paleta de OWA

fldset

Muestra de color de la paleta de OWA

ctxmnuBar

Muestra de color de la paleta de OWA

ctxmnuMnu nbHref:hover nbTglHref:hover aQL:hover aFU:hover

Muestra de color de la paleta de OWA

nbLabel nbLabel nbLabel nbLabel

Muestra de color de la paleta de OWA

nbTglTD nbTglTD nbTglTD nbTglTD nbTglQLTD nbTglQLTD nbTglQLTD nbTglQLTD

Muestra de color de la paleta de OWA

treeFolder treeFolder treeFolder treeFolder nbTreeProgress nbTreeProgress nbTreeProgress nbTreeProgress

Muestra de color de la paleta de OWA

fldUrdCt

Muestra de color de la paleta de OWA

fldCntCt divMins divMins divMins divMins

Muestra de color de la paleta de OWA

rmndrWarning

Muestra de color de la paleta de OWA

cpInactiveDateCell colorFree row

Muestra de color de la paleta de OWA

dailyViewCell dailyBackgroundTable colAM

Muestra de color de la paleta de OWA

dailyBackgroundTable dailyBackgroundTable dailyBackgroundTable dailyBackgroundTable dailyHoursCell dailyHoursCell dailyHoursCell dailyHoursCell dailyMinsCell dailyMinsCell dailyMinsCell dailyMinsCell dailyApptCell dailyApptCell dailyApptCell dailyApptCell dailyCellEven

Muestra de color de la paleta de OWA

dailyCellWorking colPM

Muestra de color de la paleta de OWA

colorBusy

Muestra de color de la paleta de OWA

colorTentative

Muestra de color de la paleta de OWA

colorOOF

Muestra de color de la paleta de OWA

weeklyDateHeader weeklySelectedDateHeader monthlyDateHeader monthlySelectedDateHeader monthlyDayTitlesCell

Muestra de color de la paleta de OWA

weeklyDateHeader weeklyDateHeader weeklyDateHeader weeklyDateHeader weeklySelectedDateHeader weeklySelectedDateHeader weeklySelectedDateHeader weeklySelectedDateHeader monthlyDateHeader monthlyDateHeader monthlyDateHeader monthlyDateHeader monthlySelectedDateHeader monthlySelectedDateHeader monthlySelectedDateHeader monthlySelectedDateHeader monthlyDateCell monthlyDateCell monthlyDateCell monthlyDateCell monthlyWeekendDateCell monthlyWeekendDateCell monthlyWeekendDateCell monthlyWeekendDateCell

Muestra de color de la paleta de OWA

monthlyNextPrevDateBody

Muestra de color de la paleta de OWA

monthlyWeekendDateCell

Muestra de color de la paleta de OWA

fbtime tdUsrBkgd

Muestra de color de la paleta de OWA

fb_color_div

Muestra de color de la paleta de OWA

recipBg dvAllAttend

Muestra de color de la paleta de OWA

busy busyClr

Muestra de color de la paleta de OWA

tent tentClr

Muestra de color de la paleta de OWA

oof oofClr

Muestra de color de la paleta de OWA

unknownClr

Muestra de color de la paleta de OWA

tblSigWarning tblSigWarning

En la siguiente tabla se enumeran los colores, sus valores hexadecimales y dónde se usan dichos colores en la paleta simple.

 

Color y valor hexadecimal Se corresponde con
Muestra de color de la paleta de OWA

1. Fondo de cuadro de diálogo y nota

Muestra de color de la paleta de OWA

2. Fondo de marco

Muestra de color de la paleta de OWA

3. Fondo de la barra de herramientas

Muestra de color de la paleta de OWA

4. Barra de navegación, fondo de etiqueta, color del divisor de la barra de herramientas

Muestra de color de la paleta de OWA

5. Fondo de menú

Muestra de color de la paleta de OWA

6. Color de borde en 3D: oscuro

Muestra de color de la paleta de OWA

7. Color de borde en 3D: normal, degradado de encabezado de vista (segunda línea: debería ser algo más oscuro que 15)

Muestra de color de la paleta de OWA

8. Fondo de la barra de información

Muestra de color de la paleta de OWA

9. Texto de la barra de información

Muestra de color de la paleta de OWA

10. Fondo del indicador de progreso de S/MIME

Muestra de color de la paleta de OWA

11. Fondo de ficha sin seleccionar (debería ser algo más oscuro que 1)

Muestra de color de la paleta de OWA

12. Fondo de ficha (debería ser algo más oscuro que 11)

Muestra de color de la paleta de OWA

13. Ordenar columna en encabezados de vista

Muestra de color de la paleta de OWA

14. Fondo de encabezado de vista, fila seleccionada en la vista (sombra)

Muestra de color de la paleta de OWA

15. Degradado de encabezado de vista (primera línea: debería ser algo más oscuro que 14)

Muestra de color de la paleta de OWA

16. Fondo del panel de vista previa

Muestra de color de la paleta de OWA

17. Elemento seleccionado

Muestra de color de la paleta de OWA

18. Borde de conjunto de campos (debería ser más oscuro que 1)

Muestra de color de la paleta de OWA

19. Color de fondo de la barra izquierda del menú contextual

Muestra de color de la paleta de OWA

20. Fondo de desplazamiento de mouse por botón

Muestra de color de la paleta de OWA

21. Botón presionado

Muestra de color de la paleta de OWA

22. Color de borde de etiqueta de barra de navegación

Muestra de color de la paleta de OWA

23. Color de borde de control de árbol

Muestra de color de la paleta de OWA

24. Fondo de encabezado de calendario

Muestra de color de la paleta de OWA

25. Borde de encabezado de calendario (debería ser algo más brillante que 23)

Muestra de color de la paleta de OWA

26. Fondo de control libre/ocupado

Muestra de color de la paleta de OWA

27. Fondo de control libre/ocupado (destinatarios)

Muestra de color de la paleta de OWA

28. Borde de control de árbol

Muestra de color de la paleta de OWA

29. Fondo del panel de vista previa (sin elementos)

 
¿Te ha resultado útil?
(Caracteres restantes: 1500)
Gracias por sus comentarios
Mostrar:
© 2014 Microsoft