Appendix: Modifying Classic Style Sheet Tabs

This chapter provides an overview of classic tab definitions and discusses how to modify classic style sheet tabs.

Understanding Classic Tab Definitions

You can change the background colors of folder tabs in a component and tabs in a grid. To change the background colors of tabs, you should have a basic understanding of how tab definitions are built and stored in the database.

PeopleSoft applications store tab definitions as images. Each tab, or image definition, has three parts that are stored as rows in the database:

• Row 1 contains code representing the top border.

• Row 2 contains the tab itself.

• Row 3 contains the bottom border.

Because tabs look different, depending on where they are located relative to other tabs and whether they are active, you must define them in sets for a combination of active and inactive tab colors.

Active General tab with inactive tabs

The tab image names reflect the role of the image in the tab row and the colors that it uses. Colors are encoded using the 6-character, hexadecimal RGB value of the color.

When the system displays tabs on a page, it verifies the existence of all of the images that are required for the pair of colors that is specified by the active and inactive tab styles. If the system finds these images, the tabs are drawn using these colors. If the system cannot find the images, it uses white (FFFFFF) for the active tab and blue (6666FF) for the inactive tab. If the images for these colors are not in the database, then the tabs do not appear at all.

Classic Tab Image Naming Scheme

This topic details how classic tab images are named. However, to change tab colors, change only the RGB values.

All tab images are named in this format:

PT_TABNABBRRGGBB

• PT_TAB: System-defined image definition name prefix.

• N: HTML table row.

  Values are 1, 2, or 3. Create images only for 2 or 3.

• A: Location of the tab parts in a tab.

  Values are:

  • L: Left end.

  • B: Between.

  • R: Right end.

  • M: Middle of a tab.

• BB: Relative position to other tabs.

  Values are:

  • AI: Piece between active and inactive.

  • IA: Piece between inactive and active.

  • II: Piece between two inactive tabs.

  • AX: Piece of an active tab.

  • IX: Piece of an inactive tab.

• RRGGBB is either omitted (when the tab image does not use any color), or is one or two 6-character hexadecimal codes for inactive and active tab colors.

Modifying Classic Style Sheet Tabs

This section discusses how to create tab images.

Creating Tab Images

Before you can assign a new background color to the active or inactive tabs, you must create the necessary tab images with that color.

To produce tabs in a different color combination:

1. Open the image definitions for the tabs that you want to change.

   Because you want to change only the color of tabs, open only those image definitions that already contain an RGB color code.

   If you are changing both the active and inactive tab color, access these image definitions:

   • PT_TAB2LAXFFFFFF

   • PT_TAB2RAXFFFFFF

   • PT_TAB2LIXB8B090

   • PT_TAB2RIXB8B090

   • PT_TAB2BAIB8B090FFFFFF

   • PT_TAB2BIAB8B090FFFFFF

   • PT_TAB2BIIB8B090

   • PT_TAB3LAXFFFFFF

   • PT_TAB3RAXFFFFFF

   • PT_TAB3MAXFFFFFF

   • PT_TAB3LIXB8B090

   • PT_TAB3RIXB8B090

   • PT_TAB3MIXB8B090

   • PT_TAB3BAIB8B090FFFFFF

   • PT_TAB3BIAB8B090FFFFFF

   • PT_TAB3BIIB8B090

     If you are changing only the inactive color, which is beige, you only need the files that contain the beige color code, B8B090. Similarly, if you are changing only the active tab color, which is white, you only need the files that include FFFFFF. However, for the changes to apply, you must change all those files with that color code. If one file is missed or a file name has a typographical error, the default style still applies.

2. To export the file to a directory, select File, Export Image.

3. In the Save Image dialog box, select the directory in which you want to place the image.

4. Use any image editor to alter the image colors.

   Note. Do not change the size or shape of the images and do not replace any of the transparent pixels with solid pixels.

5. In PeopleSoft Application Designer, add the new image definitions by selecting File, New, Image.

   Save the new image files under the appropriate name. The new images must have new names reflecting the HTML colors that they represent. For example, replace FFFFFF with the new active tab color, and replace B8B090 with the new inactive tab color. Be careful when naming these images. If the images with the correct colors for the tab style are not in the database, the system automatically applies the default images.

6. Open the appropriate style sheet.

   If you are changing the tab folder colors, use PSSTYLEDEF. If you are changing grid tabs, use PSSTYLEDEF or the style sheet that is associated with the page definition in which the grid is located.

   Note. You can set the grid tab styles for each grid individually using the grid properties. However, for page tabs, you can set the styles using only the default styles in the application style sheet.

   You must access PSACTIVETAB, PSINACTIVE TAB, and any other tab classes that your application uses (for example, PSLEVEL1GRIDACTIVETAB).

7. For folder tabs, open the PSACTIVETAB class by double-clicking the class name.

8. On the Background tab, select the color of the background of the active tab (matching the color of the tab image that you created).

   Use the drop-down list box to find the color or browse through the color choices.

9. Do the same for the PSINACTIVETAB class (or any others that you need) for folder tabs by double-clicking the class name and selecting the Background tab.

10. For grid tabs, access the style class that is associated with the grid tab.

11. Change the colors as indicated in the previous steps.

12. Save the style sheet.

Examples

This is an example of folder tabs with a green background. In addition, the color of the text on the tabs was changed to black:

Example of green tabs

In the example, the active tab color stayed the same (FFFFFF). Only the inactive tab color changed. Therefore, only these files were created and added to the list of images:

• PT_TAB2LIX80FF80

• PT_TAB2RIX80FF80

• PT_TAB2BAI80FF80FFFFFF

• PT_TAB2BIA80FF80FFFFFF

• PT_TAB2BII80FF80

• PT_TAB3LIX80FF80

• PT_TAB3RIX80FF80

• PT_TAB3MIX80FF80

• PT_TAB3BAI80FF80FFFFFF

• PT_TAB3BIA80FF80FFFFFF

• PT_TAB3BII80FF80