Cambiar la apariencia del sitio utilizando texturas

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

  1. Inicie una sesión en el cliente web como administrador de repositorio.
  2. Pulse Administración.
  3. En la barra lateral Administración de repositorio, pulse Herramientas.
  4. En la página Herramientas, busque la sección Gestionar temas.
  5. Pulse Descargar tema actual.
  6. 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.
  7. Extraiga el archivador. Mantenga la estructura de carpetas.
  8. Cree uno o varios archivos CSS y guárdelos en el directorio theme/custom/css.
  9. 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.
  10. 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" />

  11. 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
  12. 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.
  13. En la página Herramientas, en la sección Gestionar tema, pulse Examinar.
  14. Localice el archivo actualizado.
  15. 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.


Comentarios