Migrating the theme from an earlier release to version 7.5.1

If you used a customized theme in a release earlier than 7.5.1, that theme might not work as expected in version 7.5.1 or later. If you upgrade to version 7.5.1 or later, you must edit and restore the customized theme to use it.

Before you begin

For your previous release of IBM® Rational® Asset Manager, you must have a customized theme. You can create a customized theme by completing the steps in Changing the appearance of the site by using themes.
Save the customized theme:
  1. Click Administration > Tools.
  2. In the Manage Theme section, click Download Current Theme. You are prompted to open or save a compressed file.
  3. Save the file and rename it to identify the file as the customized version.

About this task

In Rational Asset Manager version 7.5.1, the header.jspf file is updated to display the name of the logged in user, the Log in and Log out links, the Help menu and menu options. If you upload a theme from an earlier version, these items in addition to the Help Contents, Extensions, and About Rational Asset Manager menu options are not visible in the banner. To see those options, you must copy additional HTML and JavaScript to in the header.jspf file.

Procedure

  1. Upgrade Rational Asset Manager. The default theme for the release is applied.
  2. Optional: Download the default theme for the upgraded version of Rational Asset Manager so that you can compare the themes:
    1. Click Administration > Tools.
    2. In the Manage Theme section, click Download Current Theme. You are prompted to open or save a compressed file.
    3. Save the file and rename it to identify the file as the default version.
  3. Extract the compressed files.
  4. In the file that contains the customized version of the theme, open the header.jspf file in a text editor.
  5. Copy the following lines of HTML and JavaScript and paste them into the header.jspf file in a location that is logical for your customized theme. If you downloaded the default theme, you can compare your changes against the structure that is in the default header.jspf file.
    <h:panelGroup id="signin" rendered="#{!loginUser.user.registered}">
    	<h:outputLink id="loginURL" value="#{loginUser.loginAction}">
    		<h:outputText id="loginUid" value="#{loginUser.loginMsg}" /> 
    	</h:outputLink>
    </h:panelGroup>
    <h:panelGroup id="signout" rendered="#{loginUser.user.registered}">
    	<h:outputText id="welcomeUser" value="#{loginUser.welcomeMsg}" escape="false"/>
    	<h:outputText id="welcomeSeparator" value="|" />
    	<h:outputLink id="logoutLnk" value="javascript:logout();">
    		<h:outputText id="uidnotWAS" styleClass="signInOutText" value="#{loginUser.loginMsg}" />
    	</h:outputLink>
    </h:panelGroup>
    
    <a href="#" title="${bundle.navigation_help}" id="help_menu" class="jazz-ui-MenuPopup">
    	<span class="sprite-image help-menu"></span>
    	<img class="caret" src="${pageContext.request.contextPath}/javascript/dojo/jazz/ui/graphics/Toolbar/white-caret.gif" />
    </a>
    <script type="text/javascript">
    dojo.addOnLoad(function() {
    	var helpMenu = new jazz.ui.MenuPopup({align: "right", cacheMenu: true},'help_menu'); //options,elementID
    	helpMenu.menuProvider = function() {
    		var menu = new jazz.app._ComponentMenu();
    		menu.addItemByArgs({label: "${bundle.navigation_help_content}", icon: dojo.moduleUrl("jazz.ui","graphics/PageTemplate/icons/systemhelp.gif"), onClick: function() {window.open("${applicationScope.docPath}/index.jsp")} });
    	menu.addItemByArgs({label: "${bundle.navigation_extensions}", icon: dojo.moduleUrl("ram","graphics/content/icons/extensions_obj.gif"), href: "${pageContext.request.contextPath}/extensions.jsp"});
    		menu.addItemByArgs({label: "${bundle.navigation_about}", icon: dojo.moduleUrl("ram","graphics/content/icons/ram_obj.gif"),  onClick: showAboutDialog });
    		return menu;
    	};
    );
    </script>
  6. Create custom style sheets for your theme to override the default styles.
    1. Create one or more CSS files and save them in the theme/custom/css directory.
    2. 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.
    3. Copy the cssIncludes.jspf file to the theme/custom directory of your theme archive. This .jspf file is required for using custom style sheets in version 7.5.1 to override the default style sheets.
    4. 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" />

    5. Create an images folder in the custom directory and save image files used in your theme within it. Example: theme/custom/images-jke-enterprises
  7. Compress the theme into an archive file.
  8. On the Tools page, in the Manage Theme section, click Browse.
  9. Select the customized archive file.
  10. Click Upload.

What to do next

Many of the style sheets for the banner were removed from the theme archive. You can view the default styles rules in the PageTemplate.css file and create your own stylesheet to override these styles. The default location for the PageTemplate.css file is server/ram/javascript/dojo/jazz/ui/templates/PageTemplate.css.

Feedback