Personalización de las barras de herramientas de widgets para espacios empresariales

La barra de herramientas del widget es el área situada en la parte superior 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 Sprites y sus usos, consulte Creación de imágenes personalizadas.)

Las imágenes de los iconos y sus correspondientes imágenes de pasar el puntero por encima tienen los mismos estilos cruzados. Sin embargo, cada estilo tiene un Sprite distinto que contiene las imágenes para la barra de herramientas en sus diversos estados. A continuación se muestran cuatro de las imágenes que se encuentran en Sprite_01.png que componen la barra de herramientas del widget.

Los iconos de la barra de herramientas constan de una flecha para el menú contextual, un separador y un icono de minimizar y maximizar. Cuando se minimiza o maximiza, el icono para la modalidad actual se sustituye por un icono de restaurar. Para cada icono, hay tres imágenes: una que se visualiza cuando la barra de herramientas no está en el foco, otra más oscura que se visualiza cuando se pasa el ratón sobre la barra de herramientas y una tercera, de color naranja, que se visualiza cuando el cursor pasa por encima del propio icono.

Estos cuatro elementos están controlados por reglas CSS que se pueden modificar para ocultar los iconos o proporcionar diferentes iconos para estas partes de la barra de herramientas.

El archivo webDAV_folder/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, que hacen referencia a la vía de acceso relativa carpeta_webDAV/public/themes/bspaceTheme/images/Sprite_01.png. Es importante no sustituir esta versión de Sprite_01.png por una versión modificada ya que se aplicaría a todos los estilos. En su lugar, es preferible realizar una copia de este archivo de imagen en su propia carpeta de estilos personalizados y, a continuación, actualizar el archivo CSS del estilo para sustituir el archivo común.

Para personalizar su propia barra 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 el usuario 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

Es posible que desee además modificar el color del título de widget que se visualiza en la barra de título del widget para que sea fácil de leer sobre el nuevo color de la barra de herramientas del widget que se ha elegido:

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

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