Personalización de las barras de herramientas del widget para los espacios de panel de control

La barra de herramientas del widget es el área situada en la parte del widget que contiene el título, el icono del menú contextual (flecha abajo) y los iconos de minimizar y maximizar. Puede personalizar las barras de herramientas de los widget para cambiar las imágenes de iconos que se utilizan en los espacios.

A continuación se muestra un ejemplo de una barra de herramientas básica de widget:

Cuando pasa el cursor sobre la barra de herramientas, se visualiza una imagen distinta. Cuando pasa el cursor sobre un icono de la barra de herramientas, se visualiza otra imagen distinta de barra de herramientas. Las variaciones de los iconos y de las barras de herramientas predeterminadas y que aparecen al pasar el cursor por encima se encuentran en Sprite_01.png. Para obtener más información sobre los sprites y sus usos, consulte Creación de imágenes personalizadas para los espacios de panel de control.

Los iconos de la barra de herramientas se controlados mediante reglas CSS, que puede modificar para ocultar los iconos, o proporcionar diferentes iconos para estas partes de la barra de herramientas. El archivo carpeta_WebDAV/public/themes/bspaceTheme/theme.css contiene una serie de reglas CSS para los iconos de minimizar, maximizar, restaurar y de menú y sus estados de pasar por encima. Estas reglas hace referencia a la vía de acceso relativa, carpeta_WebDAV/public/themes/bspaceTheme/images/Sprite_01.png.

Para personalizar su de herramientas:

La lista siguiente incluye reglas comunes que puede personalizar.

Apariencia del icono maximizar

La regla siguiente controla el aspecto normal del icono de maximizar:

  
.customStyle .bspaceMaxIcon { 
background-image: url(./Sprite_01.gif); 
background-position: 0px -1300px; 
} 

La adición de bspaceOverEditBar al nombre de clase bspaceMaxIcon controla el icono que se utiliza cuando se pasa el puntero sobre la barra de herramientas.

.customStyle .bspaceOverEditBar .bspaceMaxIcon { 
background-image: url(./Sprite_01.gif); 
background-position: 0px -1250px; 
} 

El modificador contextual se utiliza para controlar el icono naranja utilizado cuando se pasa el ratón sobre el icono de maximizar.

.customStyle .bspaceMaxIcon:hover { 
background-image: url(./Sprite_01.gif); 
background-position: 0px -1350px; 
} 

Apariencia del icono minimizar

Las reglas siguientes controlan el aspecto del icono de minimizar en el estado normal, de pasar el puntero sobre la barra de herramientas y de pasar el puntero sobre el icono:

 .customStyle .bspaceMinIcon { 
background-image: url(./Sprite_01.png); 
background-position: 0px -1450px; 
} 
.customStyle .bspaceOverEditBar .bspaceMinIcon { 
background-image: url(./Sprite_01.png); 
background-position: 0px -1400px; 
} 
.customStyle .bspaceMinIcon:hover { 
background-image: url(./Sprite_01.png); 
background-position: 0px -1500px; 
} 

Apariencia del icono restaurar

Las reglas siguientes controlan el aspecto del icono de restauración en el estado normal, de pasar el puntero sobre la barra de herramientas y de pasar el puntero sobre el icono:

 .customStyle .bspaceRestoreIcon { 
background-image: url(./Sprite_01.png); 
background-position: 0px -1600px; 
} 
.customStyle .bspaceOverEditBar .bspaceRestoreIcon { 
background-image: url(./Sprite_01.png); 
background-position: 0px -1550px; 
} 
.customStyle .bspaceRestoreIcon:hover { 
background-image: url(./Sprite_01.png); 
background-position: 0px -1700px; 
} 

Apariencia del separador

Las reglas siguientes controlan el aspecto del gráfico del separador en el estado normal y de pasar el puntero sobre la barra de herramientas:

 .customStyle .bspaceSeparatorIcon { 
background-image: url(./Sprite_01.png); 
background-position: 0px -1900px; 
} 

.customStyle .bspaceOverEditBar .bspaceSeparatorIcon { 
background-image: url(./Sprite_01.png); 
background-position: 0px -1850px; 
} 

Apariencia del icono flecha abajo del menú contextual

Las reglas siguientes controlan el aspecto del icono de flecha abajo del menú contextual en el estado normal, de pasar el puntero sobre la barra de herramientas y de pasar el puntero sobre el icono:

 .customStyle .bspaceTheme .lotusWidget2 a.lotusActionMenu { 
background-image: url(./Sprite_01.png); 
background-position: 0px -1100px; 
} 

.customStyle .bspaceTheme .bspaceOverEditBar a.lotusActionMenu { 
background-image: url(./Sprite_01.png); 
background-position: 0px -1050px; 
} 

.customStyle .bspaceTheme .lotusWidget2 a.lotusActionMenu:hover { 
background-image: url(./Sprite_01.png); 
background-position: 0px -1150px; 
} 

Color del título de la barra de herramientas del widget

Para facilitar su legibilidad, es posible que también desee modificar el color del título del widget mostrado en la barra de título del widget.

.customStyle .decoration-titlebar { 
color: #FFFFFF; 
} 

Después de haber modificado el archivo customStyle.css , guárdelo y cargue el estilo personalizado en la carpeta WebDav.