Using Additional Style Sheets to Inject Your Custom Branding

To use additional style sheets to inject your custom branding:

1. Develop custom style sheets, custom JavaScript objects, or both to implement your custom branding. See Creating and Maintaining Style Sheet Objects and Creating and Maintaining JavaScript Objects.

2. Use these custom definitions by:

   • Applying them to classic components system-wide on the Branding System Objects page. See Configuring Branding System Options.

   • Applying them to individual components on the Component Branding page. See Branding Classic Components.

Example

The following provides and example of how you can use a free form style sheet to modify the display certain page elements and to invoke custom JavaScript to provide additional formatting:

1. Upload a new free form style sheet object. For example, upload the following as MY_BRANDING_DEMO:

   /* Page Titles */
   .PAPAGETITLE, .PSSRCHTITLE, .PSQRYTITLE {
     color: #FF0000;
   }
   
   /* Grid Border */
   .PSLEVEL1GRIDWBO, .PSLEVEL2GRIDWBO, .PSLEVEL3GRIDWBO {
     border-color: #FF0000;
   }
   
   /* Group Box Border */
   .PSGROUPBOXWBO {
     border-color: #FF0000;
   }
   
   /* Highlighter Active Field */
   .FIELD_HIGHLIGHTER {
     border-color: #FF0000;
     background-color: #D2D2D2;
   }

2. Upload a new JavaScript object. For example, upload the following as FIELD_HIGHLIGHTER:

   (function($) {
     $(document).ready(function(){
       $(document).delegate("input[type='text'], input[type='password'], " +
           "select, textarea", "focus", function(e) {
         // Add a style class when activated
         $(this).addClass("FIELD_HIGHLIGHTER");
       }).delegate("input[type='text'], input[type='password'], " +
           "select, textarea", "blur", function(e) {
         // Remove a style class when not active
         $(this).removeClass("FIELD_HIGHLIGHTER");
       });
     });
   })(jQuery);

3. To inject this custom branding system wide, select PeopleTools, and then Portal, and then Branding, and then Branding System Options.

4. In the Additional Style Sheet Objects group box, add the MY_BRANDING_DEMO style sheet.

5. In the Additional Javascript Objects group box, add this JavaScript object first: PT_JQUERY_1_6_2_JS.

6. Add a new row and add your new JavaScript as a second JavaScript object: FIELD_HIGHLIGHTER.

7. Save your changes.

8. Navigate to any page that includes a page title, group box, and grid. For example, select the User Profile - Roles page, or the Assemble Themes page. Search and select value.

   Notice the style changes to the page title, group box borders, and grid borders introduced by the additional style sheet.

9. Place the cursor in any edit box or long edit box.

   Notice the highlighting changes to the field introduced by the additional JavaScript object, which calls jQuery to perform the dynamic highlighting.