Wednesday, May 27, 2015

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:


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!

11 comments:

  1. hey sasank. I have a strange problem after changine the theme the links under the favorites folder (Add My Link and Edit My Link) on the top left corner which is along with the main menu stopped working. When i checked the browser console it has thrown an error "Uncaught ReferenceError: eppscMyLinks is not defined". When i change back to old theme there is no error. Any thoughts on this?

    ReplyDelete
    Replies
    1. What changes did you make in your custom theme and header?

      When you say stopped working? Do you mean that they appear but don't work when you click on them? Or do they not appear at all?

      Can you share some screenshots of the problem, your custom theme and header definitions? Perhaps you could use http://snag.gy/ as blogger does not allow images in comments.

      Thanks!

      Delete
    2. Hi Sasnak, I am having this issue too. The links show up in the favorites dropdown, but when you click the link id does not take you to the page. Any thoughts why this might be hapenning?

      Delete
    3. It looks like you need to add the "Add to My Links Widget" to the header. You can use the PAPPBR_HEADER9_TANGERINE_ALT as an example.

      Delete
    4. Thanks for pointing that out. It will be of help those who have the same problem.

      By any chance, are you on Interaction Hub? I think the branding and associated elements for IH might be slightly different. These branding posts are based on individual application pillars (e.g.: HCM, FSCM, CS, etc.).

      That said, I have not run into this particular issue on any application (non-Interaction Hub) that I branded so far.

      Delete
  2. Sasank.
    I have followed your instructions as listed above.
    One problem I have in my custom header is that when I click the dropdown of the ptsearchbox (SES), it appears behind the ptdropdownmenu. Do you know of a way to keep the ptsearchbox on top?

    ReplyDelete
    Replies
    1. Are you trying to customize the DEFAULT_THEME_TANGERINE (which I detailed in Part 1-3)?

      If so, I reproduced the problem. Great catch! When I wrote those posts, I did not install SES on the VM that I was using so I did not test that part.

      Anyway, I could fix that problem by just modifying the z-index on the pthnavcontainer. I used the following custom style override.

      #ptdropdownmenu #pthnavcontainer {
      z-index: 207;
      }

      Try it and let us know if it tests out okay! Thanks!

      Delete
    2. Awesome!
      Yes. Adding the custom style override worked.
      Thanks!

      Delete
    3. Where should i add this custom style (#ptdropdownmenu #pthnavcontainer {z-index: 207;}to override the SES search menu. I tried to add this style in custom style we create while we added the logo in branding object. but nothings reflects.

      Delete
    4. after adding the custom logo , the global search bar comes down in the PIA . how to keep back in the header .

      Delete
    5. RE: "Where should i add this custom style (#ptdropdownmenu #pthnavcontainer {z-index: 207;}to override the SES search menu. I tried to add this style in custom style we create while we added the logo in branding object. but nothings reflects."

      Assuming your theme is cloned of DEFAULT_THEME_TANGERINE (per my previous comments), the custom style needs to be added to your custom style sheet (CSK_BRANDING_CSS) that you are using on your Branding System Options. That is the only way to override the styles.

      RE: "after adding the custom logo , the global search bar comes down in the PIA . how to keep back in the header ."

      If your logo is not of the same dimensions as the delivered logo, then you will need to override the style class on ptsearchbox to adjust the position.

      Delete