You can change the appearance of the IBM® Rational® Asset Manager web
application by creating custom cascading style sheets and providing
custom images.
Before you begin
If you modified the default files to customize your theme
for a previous release of
Rational Asset Manager,
before you update to version
7.5.3.1,
download the current theme. The current theme is overwritten during
an update with the default theme for the version. After you complete
the
Rational Asset Manager update
to the server, reapply the theme to a test installation to identify
issues from previous versions.
About this task
A repository administrator can download an archive that contains
the images and cascading style sheets that define the web application
appearance. After these files are customized, the repository administrator
uploads updated archive to implement the change.
Procedure
- Log in to the web client as a repository administrator.
- Click Administration.
- In the Repository Administration sidebar, click Tools.
- On the Tools page, find the Manage Themes section.
- Click Download Current Theme.
- Save the currentTheme.zip archive
to your local computer. This archive file contains cascading
style sheets (CSS), JavaServer Pages (JSP), and image files.
- Extract the archive. Maintain the folder structure.
- Create one or more CSS files and save them in the theme/custom/css directory.
- Review the default style sheets that were installed with Rational Asset Manager.
For any styles you would like to change, copy the style rules into
your CSS file and edit the styles. The changes you make in your new
CSS files override the style rules in the default style sheets.
Important: Do not modify the default style sheets
in the theme archive file. These style sheets change from release
to release and are overwritten when Rational Asset Manager is
upgraded.
- Add your custom style sheets to theme/custom/cssIncludes.jspf as
links. Example:
<link rel="stylesheet"
type="text/css" href="${pageContext.request.contextPath}/${applicationScope.themePath}/custom/css/jkeEnterprises.css"
/>
- Create an images folder in the custom
directory and save image files used in your theme within it. Example: theme/custom/images-jke-enterprises
- Create an archive that contains the updated files. You can customize the name of the archive, but the folder named
"theme" must be the root folder of the archive.
These files must be included in the theme archive in addition to the
customized CSS files you created, even if no changes were made:
- theme/custom/header.jspf: contains the logo
image, the name of the logged in user, and the Log in, Log out, Help,
and Extensions links
- theme/custom/cssIncludes.jspf: contains the <link> tags
to your custom CSS files.
- theme/custom/homeContent.jspf: contains the
content area of the home page
- theme/custom/jspHeader.jspf: contains additional
banner details
- theme/custom/requestAccess.jspf: This file
is displayed below the sign-in form on the sign-in page. In the default
theme, nothing is in this fragment; however, you might want to add
links, such as "Forgot password" or "Register," which are common for
web applications.
- theme/custom/requestAccessForm.jspf: This
file is displayed on the home page, below the sign-in form. In the
default theme, nothing is in this fragment; however, you might want
to add links, such as "Forgot password" or "Register," which are common
for web applications.
- theme/custom/css/advanced.css: advanced CSS
for sizing and positioning
- theme/custom/css/basic.css: basic CSS for
images, backgrounds, font styles
- theme/custom/css/hideRightColumn.css: CSS
for pages that do not have a right column
- theme/custom/css/pageLayout.css: CSS for
the general page layout
- theme/custom/css/showLeftColumn.css: CSS
for pages that have a left column
- On the Tools page, in the Manage Theme section, click Browse.
- Locate the updated archive.
- Click Upload.
Results
The new theme is applied. If you do not see the changes, click
the refresh or reload button on the browser. You might also have to
clear the cache for your web browser. You do not need to restart the
web application. To verify that the theme was applied correctly, view
several pages of the web application. If you see unexpected results,
modify the custom CSS files and upload the theme again.
What to do next
Save a copy of your theme archive. If you must restore the
original theme, click
Restore the default theme.
If
the web application is redeployed or upgraded to a new version, the
default theme is applied and you must upload the custom theme.