Wednesday, April 20, 2016

PeopleTools 8.55.x - Branding - Part III - Custom Macros and More

In my previous blog posts, we saw how we can brand PeopleSoft applications which are on PeopleTools 8.55 using the new Theme Macro Sets functionality (Part I and Part II). The Theme Macro Sets provides a great way to override targeted styles (e.g.: Header Logo, Icon images, background colors, etc.) using online configuration. The delivered Them Macro Set contains 177 macros which targets specific styles for some common Branding tasks.

Creating Custom Macros:

The concept and functionality of the Macro Set are great, but what if the 177 macros that are available do not meet our requirements? In Part II, I demonstrated how we can fall back to using the Theme - Fluid Global Override Style Sheet under such circumstances. In this section, I will detail how we can still bring those custom style sheet overrides into the Theme Macro Set as custom macros. Once we create the macros, we don't need to update the style sheet anymore. All we need to do is update the macros if there are any further changes (I guess making it a little user friendly depending on who is making the changes). This is particularly useful for customers who have a more dynamic branding which changes frequently depending on the time of the year vs being static after implementation.

Macros in Theme Macro Sets are nothing but variables used in the Theme - Fluid Global Override Style Sheet which are substituted at runtime.

Going back to my example in Part II, we used the following styles in the Theme - Fluid Global Override Style Sheet for changing the Dot Styling on the Fluid Landing Page Footer:

.lpfooter .dot.on {
  background: #EEEB4D;
.lpfooter .dot {
  background: #E8E29E;
  border: 2px solid #1d418c;

Let us re-write the above styles using custom variables (macros).

NavBar > Navigator > PeopleTools > Portal > Branding > Branding Objects

Edit the custom Fluid - Global Override Style Sheet (CSK_BRAND_FLUID_TEMPLATE) and update the styles as follows:

.lpfooter .dot.on {
.lpfooter .dot {

Now, let us add these macros (variables) to our Theme Macro Set:

NavBar > Navigator > PeopleTools > Portal > Branding > Theme Macro Set

Select the custom Theme Macro Set and add the custom variables in the 'Macro List' grid:


Similarly, we can add other Fluid Style Sheet overrides as custom macro definitions if necessary.

Moving along, the rest of this blog details some advanced branding tasks which can be done in PT 8.55 similar to PT 8.54. I am posting links for those items here for continuity.

Creating an environment specific header for Non-Production databases:

Fluid Housekeeping Steps: Fluid Branding - 8.54 - Part 5B
Task steps: Fluid Branding - 8.54 - Part 5C

We will notice that the above steps would only work for the "Fluid" pages. To make it work on "Classic" pages, we need to perform some additional steps.

Step 1: Update the javascript to modify the jQuery selectors

// Display Database Name using jQuery once the document is ready;

var $jq1 = jQuery.noConflict();


   // Make sure we are only adding the div once;
   if ( $jq1("#cskdbnamecontainer").length === 0 ) {

      // Add div to display DB Name;
      $jq1( "#PT_HEADER, #ptbr_header_container").prepend( "<div id='cskdbnamecontainer' align='center'><span id='cskdbname'>Test Environment: %dbname</span><a href='#' id='cskdbnamehide'>Hide</a></div>" );

      // Add jQuery to hide the DB Name when the 'Hide' link is clicked;



You can see that I added an additional selector (#ptbr_header_container) to the jQuery so that the contained javascript code executes for Classic as well.

Step 2: Inject custom styles into Classic - Theme Style Sheet

NavBar > Navigator > PeopleTools > Portal > Branding > Branding Objects

Append the following styles to CSK_BRAND_CLASSIC_TEMPL_FLUID

Custom styles for reference:

/* Fluid - Display DBName for non-Prod environments */
#cskdbnamecontainer {
   height: 26px; 
   background-color: rgb(204,204,204);
#cskdbname {
   color: rgba(229,47,0,1);
   line-height: 26px;
   font-weight: bold;
   padding-right: 10px;

Step 3: Inject the custom javascript into Classic using Branding System Options

NavBar > Navigator > PeopleTools > Portal > Branding > Branding System Options


Adding Custom Links to Actions List Menu:

Fluid  Branding - 8.54 - Part 5C

Again, we will notice that the above steps would only work for the "Fluid" pages. In order to add custom links on "Classic" pages, we need to perform some additional steps to update the header definition (CSK_HEADER_FLUID).

NavBar > Navigator > PeopleTools > Portal > Branding > Define Headers and Footers

Note: The reason I am using a Static URL as the means to add the custom URL is because the URL object option does not seem to substitute the URL correctly. It appears to be a bug in 8.55.


Overriding the Favorite Icon:

Fluid Branding - 8.54 - Part 5C

Again, this will only work for "Fluid" pages.

Here are the steps to create a Favorite Icon for Classic Pages:

Step 1: Update custom javascript - CSK_FL_IR_JS

NavBar > Navigator > PeopleTools > Portal > Branding > Branding Objects

Update CSK_FL_IR_JS javascript object as follows:

Javascript for reference:

// Get Image URL for CSK_LOGO (FavIcon);
document.write(unescape("%3Cscript src='/psc/" + site + "/EMPLOYEE/EMPL/s/WEBLIB_FL_CSK.ISCRIPT1.FieldFormula.IScript_Set_Image_URL_Variable?var=cskFavIcon&img=CSK_LOGO_FAVICON' type='text/javascript'%3E%3C/script%3E"));

var $jq = jQuery.noConflict();

  // If Classic;
  if ( $jq("#ptbr_header_container").length > 0) {

     // create div for favIcon
     var favIcon = document.createElement("LINK");

     // set attributes and innerHTML
     favIcon.setAttribute("rel","shortcut icon");
     favIcon.setAttribute("href", cskFavIcon);

     // insert favIcon div in the head element

  } else {

     // Replace Browser Favorite Icon(s);
     $jq('head link[href*=LOGO_FAVICON]').attr('href', cskFavIcon);



Overriding the "Processing" Icon:


Fluid Branding - 8.54 - Part 5D


  1. Sasank, your posts are awesome! Not sure how long it would have taken me to figure all of this out for myself (if ever!).

    We are actually in the middle of upgrading to 8.55 ourselves, so I was hoping you could provide information on some other things:

    1) In the fluid header, is there a way to consistently keep the Header Logo present? (keeping in mind that we don't want to necessarily lose the "back button" functionality)

    2) In the fluid footer, would it be possible to insert text somewhere, such as a link to our Privacy Policy?

    Thanks again, keep blogging!

    1. Hi Rauhan - Thank you! Sorry for the delay in responding.

      1. This is going to be tricky. The reason being, we will be running out of space quite easily on the header with the Back Button, Page Title, Other Icons, etc. especially on a small form factor. So to add a logo permanently in the PeopleSoft delivered header for the transactional/non-homepage pages might be challenging. That said, you could add an additional layer of branding header similar to the example I provided for adding the Database name to the header.Click here. May be you could add your logo to a similar div?

      If you want to add it to the delivered Branding header frame, then you will need to play with PT_HEADERPAGE and/or write some custom css+jQuery to add the logo and then shift the rest of the contents (including the Back button) accordingly.

      2. Great question. Not sure how we can achieve this in Fluid. I never thought about that requirement. There is a footer definition associated with the Branding Theme definition but I believe that only works for Classic. Again, you could use the same link I provided for question 1 and try to add something custom in the footer in a similar fashion. I will definitely post back a comment in this thread if I find an efficient way to make this work.


  2. hi sasank, I regularly visit your blog, very informative. Can you share some insight on people tools upgrade from 8.53 to 8.55

    1. @sandeep909 - Thanks!

      That seems like a very broad topic. Are you looking for any specific information?

      If you are not on it already, there is a good dicussion forum on OTN specifically dedicated to Lifecycle Managment.

      This might be a great place to ask questions on upgrades!

  3. Hello Sasank, Very Interesting blog, I really like how you have put all branding information together.

    Have you ever thought or tried to change the position of icons top header bar (like Menu, notification, action) icons. for. e.g. moving Menu icon from Right side to Left side. Introduced left horizontal menu and based on device it will resized from icon only menu to Icon with text menu.


    1. If you go into the style sheet for pt_brand_fluid or your version of it there is a section of code that positions the icons: /* Set up positioning for all buttons including the go button in the search tray */
      :root:not(.psc_mode-ag) .ps_box-button.ps_header_button .ps-button:after, /* 855-806 */
      :root.psc_mode-ag .ps_box-button.ps_header_button:not(.ps_header-next):not(.ps_header-previous) .ps-button:after, /* 855-806 */
      .ps_box-button.pts_gsearch_go .ps-button:after
      margin-top:-1px; /* special adjust */

      I changed some of those elements to move the icons down a bit. However, the hover is off. Not sure how to fix that yet.

    2. I am sorry. I know this is a very late response. I missed this comment. But I hope it gives you some ideas if you are still looking for a solution.

      If you looking to push down the icons, you may want to try just padding the top, instead of padding 0.7em on all sides.

      I would suggest the following padding instead:
      /* padding:0.345em; */
      padding: 0.7em 0.345em 0.345em 0.345em;

  4. Bhavik - Thank you!

    No. I have not tried to do something like that. But it should be possible with some CSS3 and perhaps jQuery logic.

  5. I am implementing the environment specific header and I ran into an issue. When the header displays on Classic Home it causes the home page to redraw 2 times when navigating there. It only seems to happen when there are pagelets based on component's on the Classic Home Page. If only the Menu Pagelet or other pagelets not based on components are displayed then the issue does not happen. Any suggestion on how to fix this? Otherwise it seems to be working great everywhere else.


    1. Mario - I am not seeing this issue. You can see in my screenshot below, I added a few component based pagelets on my Classic Homepage.

      Although, I changed my bootstrap a little bit since this post:

      Are you able to share a screenshot using or something like that?

    2. Thanks for getting back to me. I didn't mean the header is repeating 2 times. What is happening is the screen is refreshing 2 times so the screen draws then redraws a second time. The header appears once and is correct, it's just that the screen refreshes twice (blinks 2 times as it redraws). Do you think the changes you mention might address this?

    3. Sorry - I understand what you meant now. Though, I have not experienced the reloading issue.

      You could try changing the javascript injection part by following these posts:
      Part 1
      Part 4

  6. I followed your instructions to use PT_UTIL for the injection of the Bootstrap JS instead of using Branding System Options and that fixed the issue of the Classic Home reloading 2 times. I have not tried the Oracle Jet version yet. Thanks for helping me resolve that issue. Is there any way to get the information contained in other system variables other than %DBname into either the Bootstrap or DBname javascripts? I would like to vary the DBheader information based on user security information. For example %PrimaryPermissionList.

    1. Glad to hear that your issue is now resolved.

      I think you can only use meta-HTML variables in javascript (not all system variables that are available for PeopleCode).

  7. HI Sasank,
    We are upgrading from PT 8.54 to PT 8.55 (staying on CS 9.0 application for awhile). I have followed your steps for getting the environment name into the heading and cannot seem to get passed an error that "SCRIPT5009: 'require' is undefined. File: WEBLIB_PTBR.ISCRIPT1.FieldFormula.IScript_GET_JS, Line: 2, Column: 60" I've had a couple of our javascript guys help look over my work.. nothign seems to work. I am able to get the bootstrap up and running but it is when I add this (below) that it goes bad. Can you help?

    // requires js configuration
    var cskWsPath = '/cs/'+getSiteName()+'/oraclejet/js/libs/';
    //% Path mappings for the logical module names
    paths: {
    //% Shim configurations for modules that do not expose AMD
    shim: {
    'jquery': {
    exports: ['jQuery', 'JetCSKJQ']
    'jqueryui': {
    deps: ['jquery']

  8. oops the error is "requirejs is undefined".

    1. Hi Carmen - How are you loading the bootstrap js (CSK_FL_BOOTSTRAP_JS)? Are using the PT_HEADERPAGE.Activate?

      If so, I suggest that you use the approach detailed in the following posts:

  9. This comment has been removed by the author.

  10. Hi, can me migrate custom Theme Macroset through DMS?

  11. Hi Sharath - You can use delivered Data Migration Workbench - Data Sets for migrating Branding related objects.
    Navigation: PeopleTools > Lifecycle Tools > Migrate Data > Data Set Designer, Data Migration Workbench
    E.g.: You can use PTBR_MACRO for migrating Macro Sets.

    If you want to use DMS, you can use the PTBR_MACRO data set, figure out the underlying tables and write your own custom scripts.

    I would recommend using Data Migration Workbench!

  12. Hi Sasank,
    Your blog is outstanding and the information has been very useful. Is there a similar method to change the banner and log for the page when the password is expired (component EXPIRE_CHANGE_PSWD)? If you are just changing your password through the Change My Password link the new theme macro set works perfectly, but if your password is already expired you go to the delivered banner with the Oracle logo. Please advise if you have any advice or insight. Thanks so much for your time.

    1. Breezy - The reason why the EXPIRE_CHANGE_PSWD page is not using your custom branding is because the CREF is using a different template.

      I am assuming there is a reason why Oracle did it this way. Usually the change password external site (uses a public account for authentication) and some of the icons on the branding like the Notifications, Action Menu, etc might need additional security. That is the only reason I can think of.

      You could try to set the template to blank and see how it behaves. When I did that, it blanked out my header for some reason. It seems to redirect to the psc servlet even if I try to go to psp. May be a question for Oracle?

      Also, found the following documents on My Oracle Support website which are relevant to this topic:
      E-FLUID : Change Password page is not opened in Fluid Mode when Password expires (Doc ID 2060033.1)
      E-SEC: When Will "Change Password" Be Available Based On Fluid (Doc ID 2154070.1)

  13. Sasank,

    Really enjoy your posts! Good stuff! I recently put in your dbname in the title bar modification & it works really good. I made a modification to include the variable %UserID in the JS but this variable doesn't seem to be working correctly because the JS doesn't refresh itself or the variable is not retrieved dynamically? Is there a way around this to include a dynamic variable like %UserID in the title bar so you know what data base you are in along with what user you are logged in as? Any help would be JS is below:

    Thanks. Dave

    // Display Database Name using jQuery once the document is ready;

    Same as your code here...

    // Add div to display DB Name;'sbcdbname'>%dbname --- %userid </...);

    Same as your code here...

    1. I would think we would want the variables to be retrieved once every time a new user logs onto the system...I used to do this in the PT_BRANDING app package & then pass the results into the HTML through a bind variable. It's much different now! Thanks again for any suggestions! Dave

    2. Sorry Sasank...forgot to detail the issue. It seems to retrieve other cached values like I will log in as 'PS' & it will show 'TMP301' in the title bar which is another developer working in DEV. Seems to keep a cached value even though we log in as different users. Thanks for your time & any suggestions on this one:) Dave

    3. I had the same experience as well. I think only certain meta-html work on the client side (i.e. as part of javascript running on the browser).

      One workaround would be to create your own IScript that returns the data you need and access it from your javascript.

    4. Thanks for you reply Sasank! Yea, I am not sure if %dbname even works correctly but it only has one value to return so it doesn't matter if it returns a cached value. Do you have an example of iscript accessed from JS on your blog that I can follow? Thanks again, Dave

  14. Hi Sasank, great article again !!!
    I had stylesheet which were using in PT 8.54 classic only. Now moved in PT 8.55 where using fluid and classic both. I created one fluid theme following your article but the momnet I select Fluid as theme , all the customization in classic go away and even icon of sign out And Home etc start coming as Fluid branding in Classic home page
    Kindly suggest how to keep classic style different with Fluid so that none of them overrideeach other

    1. Hi Vipul - What you have described is the default recommended behavior in PeopleTools 8.55.

      You might want to review the following blog post if you want to revert back Classic (not recommended):

  15. Hi Sasank,
    To change in classic page which style sheet should I select, is the same which is assigned in assemble theme option for classic component ??

  16. I searched your site and HEUG to no avail so I'm asking here because this post talks about NavBar.

    We are implementing tools 8.55 CS9.2, and all the branding stuff works great, using your methods. We just got Elastic Search running, and noticed that the Search icon only appears on Fluid pages, not on Classic ones.

    I'm trying to figure out why the navbar search icon #PT_GSEARCH_BTN appears on Fluid pages only. It seems to be a child of #win10hdrdiv. As is the #PT_NOTIFY that contains the notification button (the flag icon).

    Classic pages seem to do the navbar completely differently. They use #pthdr2notify, a child of #pthdr2navbarlinks, which is what I expect to see based on the structure in Define Headers and Footers.

    Have you done anything related to this, trying to put the Search button on every page, not just fluid pages? I'm confused why fluid pages don't seem to be using the header definition at all, or are using it radically differently than I'm used to.

    1. The Classic and Fluid headers are built differently behind the scenes.

      I have not seen this behavior. Can you please check your header definition and confirm if you have the pthdr2actionlistsearch element?

    2. I do indeed have pthdr2actionlistsearch in my header.

      And you are not kidding about the headers being built differently! The Inspect output was so different it was rather confusing. So it seems Fluid doesn't use the Define Headers page functionality at all, is it all in the PT_BRAND_FLUID_TEMPLATE or one of the sub stylesheets now?.

    3. Not sure why your search icon is not displaying. It may not be due to the Branding.

      You could debug the code (App Class) to see how it is working and potentially why is it not displaying the search icon.

      As for Fluid and Classic branding being different, there is a good reason for that. All Classic pages uses the portal servlet (.../psp/... if you look in the URL) and Fluid uses the content servlet (.../psc/... if you look in the URL). This is one of the main reasons why the framework is different for Classic and Fluid.

      Yes. Fluid does not use the Define Headers (that is only for the Classic Branding).

  17. Sasank,

    I really like all your posts! We put in your data base bar in our 8.54 environment then upgraded to 8.55 & all was fine. We have now upgraded to 8.56.04 & it looks like the PT_JQUERY_1_6_2_JS file is no longer cached on the web fact I don't see any JQUERY files in the web server cache. Do you have any recommendations for getting around this? Just wondered if you have experienced the same behavior? Thanks. Dave

    1. Sorry for the delay in responding. If you are in 8.56, please refer the following post which discusses the variations for 8.56.

      For PT_JQUERY_1_6_2_JS, I ended up creating my own object CSK_JQUERY_1_7_2_JS (with code from jQuery 1.7.2) and referenced that custom object instead.

      Additionally, you will find that if you used my javascript injection framework (which uses Oracle JET libraries), then you may need to update the requireJS config paths as well.

  18. Hi Sasank,

    I have a requirement to change the background color for primary push button on fluid page.
    I am trying to achieve this using custom style class.
    Could you please guide me how to proceed?

    PS: Couldn't find branding push buttons anywhere, kindly provide link if you have already blogged about it.


    1. @anuj - Good question. I did not find a macro for this requirement.

      I ended up adding the following styles to the very end of my stylesheet CSK_BRAND_FLUID_TEMPLATE:

      /* Fluid Page - Primary Button */

      .psc_primary .ps-button, .psc_primary .ps-button:link, .psc_primary .ps-button:visited {
      border: 1px #396a90;
      background-image: linear-gradient(#396a90 , #396a90);
      text-decoration: none;
      color: #ffffff;
      box-shadow: none;
      text-shadow: none;

      .psc_primary .ps-button:hover, .psc_primary .ps-button:link:hover,
      .psc_primary:not(.psc_disabled) .ps-button:active,
      .psc_primary:not(.psc_disabled) .ps-button:hover,
      .psc_primary:not(.psc_disabled) .ps-button:focus,
      .ps_box-button.ps_button_stdheader.psc_primary:not(.psc_disabled) .ps-button:hover,
      .ps_box-button.ps_button_stdheader.psc_primary:not(.psc_disabled) .ps-button:focus {
      border: 1px #6bb6ef;
      background-image: linear-gradient(#6bb6ef , #6bb6ef);
      text-decoration: none;
      color: #ffffff;
      box-shadow: none;
      text-shadow: none;

    2. You will need to adjust the styles these classes to figure out the appropriate styling for your primary button and primary button hover.

  19. Hi,

    Do you know how to make use an image for the homepage background instead of a simple color ?


    1. Please review Colton Fischer's blog: