PeopleTools 8.54+ - Branding - Part 4A - Customizing DEFAULT_THEME_TANGERINE_ALT Theme

If you have been following my previous posts on Branding PeopleTools 8.54+ applications (Part 1, Part 2, Part 3), then you would know that all my examples so far uses a delivered theme called DEFAULT_THEME_TANGERINE to perform customizations.

DEFAULT_THEME_TANGERINE as delivered:

There is no issue with using DEFAULT_THEME_TANGERINE. Whatever we learnt in my previous branding posts provides great value to understand how HTML, css and javascript work together and how the latest PeopleTools configuration helps with achieving branding requirements in a much more simplified fashion.

I have had several folks enquire about the DEFAULT_THEME_TANGERINE_ALT theme and how to customize it? Well, my answer is that it is exactly the same process as we did with the DEFAULT_THEME_TANGERINE theme.

DEFAULT_THEME_TANGERINE_ALT as delivered:

You will notice that the theme is more or less the same as DEFAULT_THEME_TANGERINE. The only additions are the 'Add To' (drop down), the 'Notification' icon and the 'NavBar' icon.

In general with the advent of more recent PUM Images (HCM 9.2 PUM 12) and the associate delivered FLUID pages, it appears that DEFAULT_THEME_TANGERINE_ALT might be a better theme to use particularly when we get to a stage where we are ready to roll out some of the delivered FLUID pages.

With that said, I would like to experiment with customizing the DEFAULT_THEME_TANGERINE_ALT theme in this post - titled PART 4A. The reason I titled this post as Part 4A is because initially I only intend to provide the basic details to get started with DEFAULT_THEME_TANGERINE_ALT. As time permits, I would follow up this post with a Part 4B which would cover much more detailed customizations (as we have seen in Part 1, Part 2 and Part 3).

Note: At the time of writing this post, I am using HCM 9.2 PUM Image 12 - PeopleTools 8.54.08.

Step 1: Clone DEFAULT_THEME_TANGERINE_ALT Theme

Navigation: Main Menu > PeopleTools > Portal > Branding > Assemble Themes

Select: DEFAULT_THEME_TANGERINE_ALT

Click on the 'Save As' Button and save the theme with a custom name (e.g.: CSK_THEME_TANGERINE_ALT).

Step 2: Clone DEFAULT_HEADER_TANGERINE_ALT Header Definition

Navigation: Main Menu > PeopleTools > Portal > Branding > Define Headers and Footers

Select: DEFAULT_HEADER_TANGERINE_ALT

Click on the 'Save As' Button and save the header with a custom name (e.g.: CSK_HEADER_TANGERINE_ALT).

Step 3: Update custom theme (Step 1) to reference custom header (Step 2)

Navigation: Main Menu > PeopleTools > Portal > Branding > Assemble Themes

Select: CSK_THEME_TANGERINE_ALT

Update Home Page Header to CSK_HEADER_TANGERINE_ALT.

Step 4: Upload Custom Branding Objects (Images, Style Sheets, etc)

Navigation: Main Menu > PeopleTools > Portal > Branding > Branding Objects

Upload Logo Image:

Upload Style Sheet:

Style Sheet for reference:

#cskhdrlogo:before {     content: url(%Image(CSK_LOGO));     left: 4px;     position: relative; } #cskhdrlogo {     background: none repeat scroll 0 0 rgba(0, 0, 0, 0);     float: left;     height: 55px;     margin: 0;     padding: 0 5px 0 0;     width: 44px; }

Step 5: Update the custom header definition

Navigation: Main Menu > PeopleTools > Portal > Branding > Define Headers and Footers

Select: CSK_HEADER_TANGERINE_ALT

Delete the 'pthdr2logoswan' leaf under the 'pthdr2container' folder.

Add a new leaf element under the 'pthdr2container' folder to reference the custom logo.

Step 6: Update Branding System Options to use Custom Theme and Style Sheet

Navigation: Main Menu > PeopleTools > Portal > Branding > Branding System Options

Update 'Default Branding Theme' to CSK_THEME_TANGERINE_ALT and add CSK_BRANDING_CSS under 'Addtional Style Sheet Objects'.

Test Changes:

Recommendations if you are experiencing caching issues.

1. Clear local browser cache.
2. Shutdown, purge and reboot the web server(s).

You can see that the logo has been updated to the custom image using the DEFAULT_THEME_TANGERINE_ALT theme.

Stay tuned for Part 4B - Customizing DEFAULT_THEME_TANGERINE_ALT Theme (continued) and Part 5 - Branding Fluid!