Using the Delivered CSS Variables

The usage of the delivered CSS variables depends on your branding requirements.

This topic discusses:

  • Use of CSS variables in your custom style sheet.

  • Use of CSS variables in content branding.

Using CSS Variables in Custom Style Sheet

You can use the delivered CSS variables to automatically update any colors from the PeopleSoft application that are used by you for your custom constructs in the custom style sheet.

Consider the following example, which illustrates the use of the delivered CSS variables. You are using your custom style sheet, but you're planning to copy some of the colors from the PeopleSoft applications for your constructs, such as, the background color of the left panel, the color of the selected item in the panel, and the text color in the panel. Additionally, you plan to synchronize the colors that PeopleSoft applications use for these constructs with the colors for these constructs in your system. In this case, you could use the delivered functional CSS variables that are closest to the functionality you are trying to replicate within your custom style sheet. Whenever PeopleSoft applications update the colors in future releases, the colors used in your constructs will be automatically updated without any rework on your part.

Note:

In your custom style sheet, if you plan to use only your colors or color scheme for your custom constructs and do not plan to use any of the colors from PeopleSoft applications, you do not need to use the delivered CSS variables.

Using CSS Variables in Content Branding

Another advantage of CSS variables is that it gives you greater control over global changes to controls internally. But you should be careful about making global changes because you should consider all contexts of usage. An example of the global changes can be seen in the delivered style sheet – PT_CUSTOM_PROPS_PRE860 – in which the palette is redefined with the pre-8.60 color scheme. This reversion style sheet allows you to retain the 8.59 color scheme. For more information on the delivered style sheet for reversion to the 8.59 color scheme, see Assembling Branding Themes, Reverting Branding to Pre-8.60 Visuals.