Customizing Page Tab Style Sheets

After you create the new images, you must change the properties of the style classes rendering the new sliding door tabs. The style classes that render the folder tabs and the grid tabs are PSTAB and PTGRIDTAB, respectively. Both style classes are part of the PSTAB_PTCSS free form style sheet.

To modify the tab properties:

Open the appropriate free form style sheet, PSTAB_PTCSS if you are using the default style sheet or PSTAB_PTCSS_SWAN if you are using the SWAN style sheet.
For folder tabs, modify the PSTAB style class; for grid tabs, modify the PTGRIDTAB style class.

For example, if you have two new folder tab images, the left and the right image of the tab, each has a different name and you must change the code as you see here:
```
#PSTAB a
{
background:transparent url(%IMAGE(<newlyCreatedLeftSideTabImageName>)) no-repeat⇒
 left top;
....
}
#PSTAB a span
{
font-size:9pt;
background:transparent url(%IMAGE(<newlyCreatedRightSideTabImageName>)) no-repeat⇒
 right top;
....
}
```
Note:

You must replace <newlyCreatedLeftSideTabImageName> and <newlyCreatedRightSideTabImageName> with the names of the new images that you create. You might have to modify the position property if the new images vary in size from the original images.
Because the image contains all active, inactive, and hover color properties, you only need to change the pixel properties and background positioning if the delivered images have changed in size and shape.
You can modify style class properties such as border, padding, font, and text to create the required look for the tabs you are implementing.
You can override the tab bottom line by changing the following code:#PSTAB #TABBOTTOMLINE { Color: #809EBA; background: repeat-x right 18px; }
You can adjust the hover properties as shown in this example: #PSTAB a:hover a { color: #555555; } #PSTAB a:hover span {font-size:9pt; background-position:100% -50px; }

Note:

The <span> element renders the main part of the tab. Adjust any necessary properties, such as background-position in the <span> element to render the image correctly. The left image is small, and you need to adjust only the color and possibly the border properties.
Save the style sheet.
Stop the application server, clear the cache, and restart the application server.
Stop the web server, clear the cache, and restart the web server.