10.2 Customizing the Look of the User Interfaces

1. Create a new directory in the home directory of the Tomcat user running the server.

2. Add your idmdashcustom.css file to the netiq_custom_css folder created in Step 1.

3. If Tomcat is already running, refresh your browser to see the changes. Otherwise, restart Tomcat and clear the cache from your browser.

1. In the User Application, select Administration > Themes.

2. Find a theme that you want to customize, then click the corresponding Customize button.

   s displays the Customize Branding settings for that theme.

3. Change the settings in one or more tabs (as needed). Each contains the settings for different parts of the User Application interface. They include the following areas:

   General

   Specifies general theming properties such as a favorites icon, background, link and hover color, and the left navigation area properties.

   Header

   Specifies the header color, texture, logo and username properties.

   NOTE:The Left Background image needs to be the size indicated on the Header page (which defaults to 272 x 79 pixels) in order to display properly. The user interface does not attempt to resize the image automatically. For example, it will not stretch the image if it is too small.

   Header tabs

   Specifies the properties for the header tabs.

   Admin subnavigation

   Specifies the properties for the Admin tab.

   Login

   Specifies the properties for the login screen.

   Follow the on-screen instructions for specifying each setting. The changes are not reflected in the User Application until you save them. If you have made unsaved changes, the Save button displays an asterisk * to indicate that the changes are pending a save.

4. Click Save.

   If you’re editing the current theme, the look of the user interface changes to reflect your customizations.

5. (Optional) To cancel all of your customizations to the theme, click Reset.

6. When you’re done working on this theme, click Back to Theme Selector.

To create a custom theme:

1. Back up the deployed User Application WAR file (IDMProv.WAR) to the installation directory . For example, the /opt/netiq/idm subdirectory.

2. In a test environment, extract the contents of the WAR file.

   The files that comprise the User Application’s themes are located in the resource\s subdirectory. Each theme resides in its own directory with an appropriate name.

3. In the test environment, create a directory for the custom theme.

   The directory name can be any valid directory name, but it should reflect the name of the theme, and it should not contain spaces.

4. Copy the contents of the theme from the extracted WAR file to the new subdirectory. For example, BlueGloss).

   You will be working with the following files associated with the theme:

   File Name	Description
   .xml	The theme descriptor file. It includes entries for display name and description. They are used in the s page of the Administration tab. The remaining entries correspond to the brandable selectors. The width and height attributes on these entries are used in the branding page to reference the exact dimensions needed when a user uploads a customized version of these images. These entries must match their respective images, width and height as found in the s.css.
   .css	Contains the CSS selectors used to style the look and feel of the user interface.
   print.css	Contains the CSS selectors used to style a print friendly version of the user interface.
   dojo.css	Contains a pointer to additional CSS files used by RBPM.
   An images subdirectory	Contains the images used by the .

   Rules for working with these files:

   • Do not change the names of the .xml, .css, print.css and dojo.css files.

   • The CSS Selector names must remain the same, but you can change the properties of the selectors to establish the look and feel.

   • The images subdirectory can have any name, but you must reference it correctly in the CSS and XML files.

5. Make your changes to the images, CSS style sheets and other theme elements as needed. The following changes are recommended:

   • In the .xml file:

     • display-name: Change this to a value that represents your . It displays as the -name in the Themes page of the User Application’s Administration tab.

     • description: Change this to a value that describes your . It displays as the Description in the Themes page of the User Application’s Administration tab.

     • Consider whether to localize the display-name and Description fields.

     • Remove the following:

       <resource-bundle>com.novell.afw.portal.artifacts..BlueGloss</resource-bundle>
       <resource-group>admin-resgrp</resource-group>

     • In the dojo.css file, change the @import line to the following value:

       @import url("../../../../IDMProv/javascript/dijit/themes/idmua/idmua.css");

       where IDMProv is the name of your WAR context.

     • If you wish to change the appearance of some Dojo elements, such as the menu buttons within the profile section on the Work Dashboard, you should take the following steps, instead of performing the steps above:

       1. Copy the following from your extracted WAR in this location: /javascript/dijit/s:

          dijit.css
          dijit_rtl.css
          idmua (folder)

          Paste these items into your new theme folder.

       2. Change the @import line in the dojo.css file, as follows:

          @import url("idmua/idmua.css");

   • In the graphics directory:

     • thumbnails.gif: Replace the copy with your own image. This image displays along with the -name and Description of the theme (described above) that is shown in the Themes page of the Administration tab. It typically illustrates what the User Application landing page looks like when the associated theme is applied

     • Renaming graphics files: If you change the names of graphics files (rather than just substituting a different image of the same name), make sure to change the reference to the image in both the .xml and the .css file. If the image is not used in the branding interface (for example, if it is not listed as one of the subset of brandable images in the .xml file), then you will only need to change the reference to the image in the .css file. Suppose you want to rename images/header_left.gif to images/my_company_name.gif. Edit the .css file to reflect the new image name.

6. After you make all of the desired changes to the theme files, add your customized theme directory to a new WAR file that contains one or more custom themes. Deploy the new WAR to your test application server. Testing tip: Open the Themes page (available under the Administration tab). Your theme should display along with the prepackaged themes. Use the Theme Preview action to see how the customized changes to your new theme will render. This is a useful way to preview many of your intended changes to your theme. Running through commonly used features of the application is also a recommended testing step.

7. After your changes are fully tested, you can deploy the WAR containing the custom theme to your production application server.