Creación de imágenes personalizadas para los espacios del panel de control
Puede crear imágenes personalizadas para personalizar la apariencia de controles, segundos planos y bordes en el espacio.
Acerca de esta tarea
Muchas de las imágenes que se utilizan para los controles, bordes y fondos se combinan en un sprite. Al agrupar todas las imágenes en un único sprite, se reduce el número de solicitudes al servidor necesarias para llenar la página con imágenes. Se proporciona el sprite predeterminado, Sprite_01.png, y se encuentra en la carpeta de WebDAV en public/themes/bspaceTheme/images.
Las imágenes de un sprite puede relacionarse entre sí, dependientes o independientes entre sí. Cuando personalice un sprite, no es necesario que actualice todas las imágenes que se relacionen entre sí. No obstante, las imágenes dependientes deben actualizarse juntas. Por ejemplo, un botón escalable puede constar de tres partes (izquierda, derecha y centro), que deben actualizarse juntas.
El archivo Sprite_01.png contiene las imágenes para la navegación mediante separadores y los iconos de la barra de herramientas del widget. Este archivo contiene una serie de imágenes que forman parte del tema del espacio. Cualquier modificación que se realice en este archivo se aplicará a todos los espacios y estilos del espacio. Si desea modificar el aspecto de todos los espacios, debe crear un tema en lugar de modificar directamente cualquiera de los elementos del tema.
Para crear imágenes personalizadas para utilizar en los espacios, es recomendable mantenerlas juntas en un sprite. El método más sencillo es copiar el recurso para un sprite existente, como Sprite_01.psd, modificarlo y guardar el archivo modificado en formato .png. El origen .psd para el conjunto de sprites predeterminado se puede descargar desde el sitio de soporte de http://www-01.ibm.com/support/docview.wss?uid=swg21501314. Una vez haya colocado el sprite nuevo, modifique las reglas de CSS para dicha parte de la interfaz de usuario, para garantizar que los cambios se apliquen solamente al estilo relacionado.
La tabla siguiente describe las imágenes del archivo Sprite_01.png. En la descripción se indican las imágenes que dependen de ,o están relacionadas con, otras imágenes.
| Imagen | Descripción |
|---|---|
 |
01 - Chevron de separador de modalidad – abajo - [Relacionado con imagen 02] |
 |
02 - Chevron de separador de modalidad – arriba - [Relacionado con imagen 01] |
 |
03 - Izquierda de separador de modalidad (bidi LTR) - [Dependencia de imagen 04, 05, 06, 07] |
 |
04 - Derecha de separador de modalidad (bidi LTR) - [Dependencia de imagen 03, 05, 06, 07] |
 |
05 - Centro de separador de modalidad, repetición - [Dependencia de imagen 03, 04, 06, 07] |
 |
06 - Derecha de separador de modalidad (bidi RTL) - [Dependencia de imagen 03, 04, 05, 07] |
 |
07 - Izquierda de separador de modalidad (bidi RTL) - [Dependencia de imagen 03, 04, 05, 06, 07] |
 |
08 - Icono de añadir página – normal - [Relacionado con imagen 09] |
 |
09 - Icono de añadir página – pasar puntero por encima - [Relacionado con imagen 08] |
 |
10 - Fondo de sección de separador de página |
 |
11 - Desplegable de separador de página – pasar puntero por encima - [Relacionado con imagen 12] |
 |
12 - Desplegable de separador de página – normal - [Relacionado con imagen 11] |
 |
13 - Separador de página seleccionado - izquierda (bidi LTR) - [Dependencia de imagen 15, 17] |
 |
14 - Separador de página seleccionado temporalmente - izquierda (bidi LTR) - [Dependencia de imagen 16, 17] |
 |
15 - Separador de página seleccionado - centro, repetición - [Dependencia de imagen 13, 16] |
 |
16 - Separador de página seleccionado temporalmente - centro, repetición - [Dependencia de imagen 14, 18] |
 |
17 - Separador de página seleccionado - derecha (bidi LTR) - [Dependencia de imagen 15, 13] |
 |
18 - Separador de página seleccionado temporalmente - derecha (bidi LTR) - [Dependencia de imagen 16, 14] |
 |
19 - Divisor de separador de página |
 |
20 - Marcador de desplegable del menú Acciones – normal - [Relacionado con imagen 21] |
 |
21 - Marcador de desplegable del menú Acciones – pasar puntero por encima - [Relacionado con imagen 20] |
 |
22 - Marcador de desplegable del menú Widgets – widget border [Relacionado con imagen 23, 24, 25] |
 |
23 - Marcador de desplegable del menú Widgets – normal – [Relacionado con imagen 22, 24, 25] |
 |
24 - Marcador de desplegable del menú Widgets – pasar puntero por encima - [Relacionado con imagen 22, 23, 25] |
 |
25 - Marcador de desplegable del menú Widgets – pulsado - [Relacionado con imagen 22, 23, 24] |
 |
26 - Widget de maximizar - borde del widget con foco - [Relacionado con imagen 27, 28] |
 |
27 - Widget de maximizar – normal - [Relacionado con imagen 26, 28] |
 |
28 - Widget de maximizar – pasar puntero por encima - [Relacionado con imagen 26, 27] |
 |
29 - Widget de minimizar - borde de widget con foco - [Relacionado con imagen 30, 31] |
 |
30 - Widget de minimizar – normal - [Relacionado con imagen 29, 31] |
 |
31 - Widget de minimizar – pasar puntero por encima - [Relacionado con imagen 29, 30] |
 |
32 - Widget de restaurar - borde de widget con foco - [Relacionado con imagen 33, 34, 35, 36, 37] |
 |
33 - Widget de restaurar – normal - [Relacionado con imagen 32, 34, 35, 36, 37] |
 |
34 - Widget de restaurar - normal (bidi RTL) - [Relacionado con imagen 32, 33, 35, 36, 37] |
 |
35 - Widget de restaurar – pasar puntero por encima - [Relacionado con imagen 32, 33, 34, 36, 37] |
 |
36 - Widget de restaurar - pasar puntero por encima (bidi RTL) - [Relacionado con imagen 32, 33, 34, 35, 37] |
 |
37 - Widget de restaurar - borde del widget con foco (bidi RTL) - [Relacionado con imagen 32, 33, 34, 35, 36] |
 |
38 - Divisor de control de widget - borde del widget con foco - [Relacionado con imagen 39] |
 |
39 - Divisor de control de widget – normal - [Relacionado con imagen 38] |
 |
40 - Botón de página vacía - izquierda – pasar puntero por encima - [Dependencia de imagen 41, 42, 43, 44, 45, 46, 47, 48] |
 |
41 - Botón de página vacía - izquierda – normal - [Dependencia de imagen 40, 42, 43, 44, 45, 46, 47, 48] |
 |
42 - Botón de página vacía - izquierda – pulsado - [Dependencia de imagen 40, 41, 43, 44, 45, 46, 47, 48] |
 |
43 - Botón de página vacía - centro – pasar puntero por encima - [Dependencia de imagen 40, 41, 42, 44, 45, 46, 47, 48] |
 |
44 - Botón de página vacía - centro – normal - [Dependencia de imagen 40, 41, 42, 43, 45, 46, 47, 48] |
 |
45 - Botón de página vacía - centro – pulsado - [Dependencia de imagen 40, 41, 42, 43, 44, 46, 47, 48] |
 |
46 - Botón de página vacía - derecha - pasar puntero por encima - [Dependencia de imagen 40, 41, 42, 43, 44, 45, 47, 48] |
 |
47 - Botón de página vacía - derecha- normal - [Dependencia de imagen 40, 41, 42, 43, 44, 45, 46, 48] |
 |
48 - Botón de página vacía - derecha- pulsado - [Dependencia de imagen 40, 41, 42, 43, 44, 45, 46, 47] |
La tabla siguiente describe las imágenes del archivo Sprite_Style.png. Este archivo contiene imágenes para el área del mensaje de cabecera, la barra de herramientas del widget y las partes horizontales del borde del widget.
| Imagen | Descripción |
|---|---|
 |
01 - Pie |
 |
02 - Separador de enlace de acción de banner |
 |
03 - Imagen de mensaje de cabecera repetitiva - sección inferior izquierda del mensaje de cabecera |
 |
04 - Imagen no repetitiva - sección inferior derecha de mensaje de cabecera |
 |
05 - Imagen de mensaje de cabecera repetitiva - sección superior izquierda del mensaje de cabecera |
 |
06 - Imagen no repetitiva - sección superior derecha de mensaje de cabecera |
 |
07 - Borde del widget - esquina inferior izquierda |
 |
08 - Borde del widget - horizontal inferior |
 |
09 - Borde del widget - esquina inferior derecha |
 |
10 - Borde del widget - cabecera - estado de foco/pasar puntero por encima |
 |
11 - Borde del widget - área superior izquierda |
 |
12 - Borde del widget - cabecera - estado normal |
 |
13 - Borde del widget - área superior derecha |
La tabla siguiente describe las imágenes del archivo Sprite_Style_vertical.png. Este archivo contiene imágenes para las partes verticales del borde del widget.
| Imagen | Descripción |
|---|---|
 |
01 - Borde del widget vertical izquierdo |
 |
02 - Borde del widget vertical derecho |
Sprite_Style.png y Sprite_Style_vertical.png son específicos para un tema de espacio y deberían modificarse para cada estilo. Los estilos se encuentran en la carpeta de WebDAV en /public/themes/bspaceTheme/spaceStyles. Por convenio, el nombre del estilo se incluye en el nombre del sprite. Por ejemplo, en la carpeta de estilos banking, los archivos de sprite se denominan Sprite_Banking.png y Sprite_Banking_vertical.png.