Creating custom icons

Graphical icons are applied to the background image of the graphic view to represent the Navigator items. Customize the graphic view by applying icon graphics of your choosing rather than those from the Navigator view. For example, you might want to use your company logo instead of the to represent the Enterprise.

1. Create the images:
   1. Create a one-word (all lowercase if the portal server is on Linux or UNIX) .gif or .jpg image file for every Navigator item icon you want to change in the graphic view.
      Use only ASCII characters in the filename. Names that use characters outside the ASCII code range will not be displayed in the list of available files when the user browses to select one.
      A set of large and small icons that you can use are located in the icons\user folder:
      
   2. On the computer where the portal server is installed, copy the images:
      Install_dir\cnb\classes\candle\fw\resources\icons\user
      Install_dir/cw/classes/candle/fw/resources/icons/user
2. Create a style sheet:
   1. Change to the Navigator view whose graphic view icons you plan to change.
      Having the Navigator open while you type the item names in the style sheet ensures their correct spelling and letter casing.
   2. Identify the Tivoli style sheet most like the one you want. It must be one of the large_icon_ or small_icon_ style sheets (not shape_ or parent_).
      The style sheet controls the color, size and position of the text labels (Navigator item names), as well as any icons you do not replace with custom icons.
   3. Make a copy of the style sheet from the following directory, giving it a one-word name that identifies it as one that you customized, and place it in the child directory (user):
      Install_dir\cnb\classes\candle\fw\resources\styles
      Install_dir/cw/classes/candle/fw/resources/styles
   4. Open your new style sheet in a text editor.
   5. Edit the @import lines at the top of the file to insert ../ in front of the $.
      Example:

      @import “../$base.css”; @import “../$baseLargeIcon.ss”; 
      @import “../$baseNodeLabelBottom.css”;

   6. Copy and paste the following entry at the end of the file, one line for each Navigator item whose graphic view icon you want to change.

      node[name = “My Item Name”]{iconImage: url(../../icons/user/iconname.gif);}

   7. Replace Your Item Name Here with the exact name of the Navigator item; and replace iconname.gif with the exact name of the icon graphic file.
      Be careful to follow the syntax exactly. Any errors, such as missing or extra parentheses, quotation marks, or misspellings will give unpredictable results. The symptom might be that your style sheet change did not affect the graphic view or the view contents disappear.
   8. Save the text file.
3. Apply the new style sheet:
   1. Open the workspace that contains the graphic view or add a graphic view to the current workspace.
   2. In the graphic view title bar, clickProperties.
   3. In the Style tab, click the plot area of the thumbnail graphic.
   4. Adjust the Background settings as needed.
   5. In the Style area, click Browse, select the custom style sheet from the Select Name list, and click OK.
      Your style sheets are displayed as user/style at the end of the list. If you do not see your style sheet in the list, check that you saved it in the right directory and that you did not start the name with $. If you are in browser mode, make sure you added a style entry to $_index.txt and that you spelled it correctly. You can drag the border between Preview and Style to make the preview image larger.
   6. When you are finished editing the graphic view properties, save your changes with Apply to keep the window open, or OK to close the Properties editor.