Puede cambiar el aspecto de la aplicación web de
IBM® Rational Asset Manager creando
hojas de estilo en cascada personalizadas y proporcionando imágenes personalizadas.
Antes de empezar
Si ha modificado los archivos predeterminados para personalizar el tema de un release anterior de
Rational Asset Manager, antes de
actualizar a la versión
7.5.2, descargue el tema
actual. El tema actual se graba durante una actualización con el tema predeterminado para la versión. Después de
completar la actualización de
Rational Asset Manager para el
servidor, vuelva a aplicar el tema en una instalación de prueba para identificar problemas de versiones anteriores.
Acerca de esta tarea
Un administrador de repositorio puede descargar un archivo de archivado que contenga las imágenes y las hojas
de estilo en cascada que definen el aspecto de la aplicación web. Una vez que estos archivos se han personalizado, el
administrador de repositorio sube el archivo de archivado actualizado para implementar el cambio.
Procedimiento
- Inicie una sesión en el cliente web como administrador de
repositorio.
- Pulse Administración.
- En la barra lateral Administración de repositorio, pulse
Herramientas.
- En la página Herramientas, busque la sección Gestionar temas.
- Pulse Descargar tema actual.
- Guarde el archivador currentTheme.zip en su sistema local. Este archivo de archivado contiene hojas de estilo en cascada
(CSS), JavaServer Pages (JSP) y archivos de imágenes.
- Extraiga el archivador. Mantenga la estructura de carpetas.
- Cree uno o varios archivos CSS y guárdelos en el directorio theme/custom/css.
- Revise las hojas de estilo predeterminadas instaladas con
Rational Asset Manager.
Para los estilos que desee cambiar, copie las reglas de estilo en el archivo CSS y edite los estilos. Los cambios que
hace en sus archivos CSS alteran temporalmente las reglas de estilo en las hojas de estilo predeterminadas.
Importante: No modifique las hojas de estilo predeterminadas en el archivo de archivado de temas. Estas
hojas de estilo cambian de release a release y se sobrescriben cuando se actualiza
Rational Asset Manager.
- Añada las hojas de estilo personalizadas a theme/custom/cssIncludes.jspf como enlaces. Ejemplo:
<link rel="stylesheet"
type="text/css" href="${pageContext.request.contextPath}/${applicationScope.themePath}/custom/css/jkeEnterprises.css"
/>
- Cree una carpeta images en el directorio personalizado y guarde en ella los archivos de
imagen utilizados en el tema. Ejemplo: theme/custom/images-jke-enterprises
- Cree un archivador que contenga los archivos actualizados. Puede personalizar el nombre del archivo de archivado, pero la carpeta llamada "theme"
debe ser la carpeta raíz del archivo de archivado.
Estos archivos se deben incluir en el archivo de archivado de tema, conjuntamente con los archivos CSS personalizados
que ha creado, incluso si no se han realizado cambios:
- theme/custom/header.jspf: contiene la imagen de logotipo, el nombre del usuario que ha
iniciado la sesión y los enlaces Iniciar sesión, Finalizar sesión, Ayuda y
Ampliaciones
- theme/custom/cssIncludes.jspf: contiene los códigos <link> hacia los
archivos CSS personalizados.
- theme/custom/homeContent.jspf: contiene el área de contenido de la página
inicial
- theme/custom/jspHeader.jspf: contiene detalles de banner adicionales
- theme/custom/requestAccess.jspf: este archivo aparece bajo el formulario de inicio de sesión en la página de inicio de sesión. En el tema predeterminado, no hay nada en este fragmento; sin embargo,
es posible que desee añadir enlaces como "Contraseña olvidada" o "Registrarse", que son comunes en aplicaciones web.
- theme/custom/requestAccessForm.jspf: este archivo aparece en la página inicial, bajo el formulario de inicio de sesión. En el tema predeterminado, no hay nada en este fragmento; sin embargo,
es posible que desee añadir enlaces como "Contraseña olvidada" o "Registrarse", que son comunes en aplicaciones web.
- theme/custom/css/advanced.css: CSS avanzadas para dimensionamiento y posicionamiento.
- theme/custom/css/basic.css: CSS básicas para imágenes, fondos, estilos de font.
- theme/custom/css/hideRightColumn.css: CSS para páginas que no tienen una columna a la derecha.
- theme/custom/css/pageLayout.css: CSS para el diseño de página general.
- theme/custom/css/showLeftColumn.css: CSS para páginas que tienen una columna izquierda.
- En la página Herramientas, en la sección Gestionar tema, pulse Examinar.
- Localice el archivo actualizado.
- Pulse Subir.
Resultados
Se aplica el tema nuevo. Si no ve los cambios, pulse el botón para renovar o recargar en el navegador. También es posible que tenga que borrar la
memoria caché de su navegador web. No es necesario que reinicie la aplicación web. Para verificar que el tema se haya aplicado correctamente, visualice varias
páginas de la aplicación web.
Si ve resultados inesperados, modifique los archivos CSS personalizados y vuelva a subir el tema.
Qué hacer a continuación
Guarde una copia de su archivador de tema. Si tiene que restaurar el tema original, pulse
Restaurar el tema predeterminado.
Si la aplicación se vuelve a desplegar o se actualiza a una versión nueva, se aplicará el tema predeterminado y será necesario cargar el tema personalizado.