Creating New Theme Style Sheets and Skins

For classic components, to create a new theme style sheet or skin:

1. In Application Designer, clone the DEFAULT_THEME_TANGERINE_ALT free form style sheet.

   The DEFAULT_THEME_TANGERINE_ALT contains style class definitions that override the style class definitions for the portal header found in PSSTYLEDEF_TANGERINE. The style class overrides in DEFAULT_THEME_TANGERINE_ALT are grouped as follows:

   • Header container

   • Logo

   • Header links

   • NavBar links

   • Global search widget

   • Hover menu

   • Menu icons

2. Modify one or more these override style classes in the new style sheet. Alternatively, you can delete style class overrides or an entire section to retain the settings from the PSSTYLEDEF_TANGERINE style sheet. See Application Designer Developer’s Guide: Changing Font and Color Settings in Free Form Sub Style Sheets.

3. Add additional override style class definitions to modify the look of pagelets or other items on your site. The following example provides free form style sheet overrides for pagelets:

   /********************
    * Pagelets
    ********************/
   #ptpglts .pthpli {
     margin-bottom: 10px;
   }
   
   #ptcol0 .PTPAGELETHEADER,
   #ptpglts .PTPAGELETHEADER {
     background: url(%Image(MY_THEME_PAGELET_HEADER_BG)) repeat-x scroll 0px 0px #78A4CB;
     border-color: #78A4CB;
     border-radius: 4px 4px 0 0;
     padding: 4px;
   }
   
   #ptcol0 .PTPAGELETHEADER .ptpgltlabel,
   #ptpglts .PTPAGELETHEADER .ptpgltlabel {
     color: #333333;
     font-size: 12pt;
     font-weight: bold;
     font-family: Tahoma,Arial,Helvetica,Geneva,sans-serif;
   }
   
   #ptcol0 .PTPAGELETBODY,
   #ptpglts .PTPAGELETBODY {
     border-color: #78A4CB;
     border-radius: 0 0 4px 4px;
     border-style: none solid solid solid;
     border-width: 1px;
     background-color: #FFFFFF;
   }
   
   /* Banner pagelets */
   #ptcol0 .PTPAGELET {
     padding-%AlignStart: 4px;
     padding-%AlignEnd: 4px;
   }
   
   #ptcol0 .ptbannerpglt2 .PTPAGELETBODY {
     border-radius: 4px;
     border-top-style: solid;
   }
   
   #ptcol0 .ptbannerpglt3 .PTPAGELETBODY {
     border-radius: 4px;
     border-style: none;
   }

4. To use the new style sheet:

   • Create a new theme template and select the new style sheet as the theme template for classic components.

   • Modify an existing theme template and add the new style sheet as an available skin for classic components.

   See Assembling Branding Themes.

For fluid components, to create a new theme style sheet:

1. Generate a mapped theme style sheet. See Generating Theme Style Sheets for Fluid Components.

2. Edit the new style sheet to modify one or more style class definitions.

3. Map the new theme style sheet to its base style sheet for one or more nodes for use with fluid components.

4. Assign the base style sheet as the default system style sheet for fluid components, or assign the base style sheet at the component or page level through PeopleCode.