PeopleTools 8.54 - Branding - Part 2

This is a continuation of my previous post on my experiments with PeopleTools 8.54 Branding.

The general theme I would like to continue is to explore how we can leverage the new features and configuration provided in PeopleTools 8.54. The idea is to see how far we can go without having to use App Designer (using just the online configuration).

Now that we learnt how we can easily change the logo of the application in Part 1, let us see how we can further brand the application.

Changing the background color of the Branding Header:

We can see from the screenshot that the background color for the branding header div (pthdr2container) is actually an image PT_HEADERBG_CSS.JPG which is repeated to cover the background entire div (repeat-x).

Note: If you are wondering how we can see html and css generated on the browser as in the screenshot above, I am using Firebug which is a Web Developer add-on for FireFox. Most browsers have Web Developer support similar to Firebug. It is highly recommended to use such tools to understand the html, javascript and css that are being used on a page.

PT_HEADERBG_CSS image for reference:

Let us see how we can override this delivered background image:

- Upload custom background image:

PeopleTools > Portal > Branding > Branding Objects (Images Tab)

Note: In this case, I am using a background image that is of similar height and width as the delivered PT_HEADERBG_CSS image because my custom branding header div (pthdr2container) is of the same height as the delivered div. If the custom branding header div is of a different height then please be sure to create your custom background image of similar height to cover the entire div.

- Create custom style to override the background on the branding header div (pthr2container):

PeopleTools > Portal > Branding > Branding Objects (Style Sheet Tab)

We can see how a new style was added and how it uses the id selector (#) and class selector (.) to specifically target the element (div) with id = "pthdr2container" and class = "pthdr2container". This style is referencing the custom background image CSK_HEADERBG_CSS.

- Include custom style sheet definition on the Branding System Options Page:

PeopleTools > Portal > Branding System Options

This would ensure that our new style sheet is also loaded while rendering the page.

- Test changes:

Recommendations if you are experiencing caching issues:

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

Changing the background color of the Navigation Drop-Down Menu:

We can see in the screenshot that the background color for the Navigation Drop-Down Menu is coming from the image PT_BREADCRUMB_CSS3. The nav element (pthnavcontainer) is enclosed within the dropdown menu div element (ptdropdownmenu).

PT_BREADCRUMB_CSS3 image for reference:

Let us see how we can override this delivered background image:

- Upload custom background image:

PeopleTools > Portal > Branding > Branding Objects (Images Tab)

Note:Again, in my case I am using a custom background image that is of the same height as PT_BREADCRUMB_CSS3.

- Create custom style to override the background on the Navigation Drop-Down Menu (nav element):

PeopleTools > Portal > Branding > Branding Objects (Style Sheet Tab)

We can see in the screenshot that we are using the existing style sheet (CSK_BR_GEN) to add the new style. The new style is using the id selector (#) and the descendant selector (e.g.: X Y, where Y is a descendant of X) to target the element (nav) with id = "pthnavcontainer" and is a descendant of element with id = "ptdropdownmenu". This style is referencing the custom background image CSK_BREADCRUMB_CSS3.

Note: As we already have the style sheet CSK_BR_GEN added to the 'Branding System Options', we can directly proceed to test these changes.

- Test changes:

Recommendations if you are experiencing caching issues:

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

Sticking with our theme, we have now implemented a custom logo, custom branding header background image and custom navigation drop-down menu background image by just using the PeopleTools Branding features and configuration available online.

Changing the font color of Branding Header System Links (Home, Worklist, ..., Sign out):

We can see in the screenshot that the System Links on the Branding Header is using the style class of PSHYPERLINK (color: #004b91). As most of you know, this style class is widely used across the application.

Let us see how we can use css to specifically target the required elements and override the font color:

- Create custom style to override the font color of the Branding Header System Links:

We can see in the screenshot that we are using the existing style sheet (CSK_BR_GEN) to add the new style. The new style is using the id selector (#), class selector (.) and the descendant selector (e.g.: X Y, where Y is a descendant of X). This style would target all elements with class = "PSHYPERLINK" and are descendants of element with id = "pthdr2syslinks".

- Test changes:

Recommendations if you are experiencing caching issues:

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

Changing the font color of the Navigation Drop-Down Menu:

We can see from the screenshot that the font color (#284562) of the Navigation Drop-Down Menu is using the style .pthnav a (all anchor elements which are descendants of element with class = "pthnav").

Let us see how we can override this delivered font color:

- Create custom style to override the font color of the Navigation Drop-Down Menu:

We can see in the screenshot that we are using the existing style sheet (CSK_BR_GEN) to add the new style. The new style is intended to specifically target all anchor elements (a) that have a descendant hierarchy of #ptdropdownmenu #pthnavcontainer .pthnav. The descendant hierarchy would target all anchor tags that are descendants of elements with class = "pthnav" which are in turn descendants of elements with id = "pthnavcontainer" which are in turn descendants of elements with id = "ptdropdownmenu".

- Test changes:

Recommendations if you are experiencing caching issues:

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

Let us now look at how we can further branding our application with some more common branding requirements.

Note: I am not a big fan of the bright red font color on the Branding Header (it was just used as an example) and besides the orange/yellow and delivered blue go well with the CSK team colors. So I will be reverting the font color changes which I just made for future examples to make it a bit easier on the eyes.

Adding a Hyperlink to the Branding Logo:

Let us assume we want our logo to image to link to another website.

- Create URL Definition to store the hyperlink address:

PeopleTools > Utilities > Administration > URLs

- Modify existing style for the Branding Logo:

CSK_HDR_LOGO was created in example provided in Part 1. We can see from the screenshot that the style has been modified to comment out the content attribute.

- Modify logo element in the custom Header Layout Definition:

PeopleTools > Portal > Branding > Define Headers and Footers

-> Additional Options for leaf cskhdrlogo

We have replaced the existing Static HTML (which was a non-breaking space  ) with an anchor element referencing the URL Definition (href), Image Object (img element) and URL Definition Description (title).

- Test changes:

Recommendations if you are experiencing caching issues:

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

Moving Branding Elements using CSS:

Most organizations would like to print the name of the database (e.g.: DEV, TST, UAT, etc) on the branding header for test environments. Let us move the ptgreetingmessage div to make way for the Database name to be printed on the branding header. We will use css to move the ptgreetingmessage div to the bottom right hand corner of the header.

Create custom style to override the alignment and location of the ptgreetingmessage div:

Modify the ptgreetingmessage (div) leaf on Header Layout for logical ordering:

Test changes:

 

Adding Database Name on the Branding Header:

Now that we moved the ptgreetingmessage div and made way for displaying the database name, let us use custom javascript to achieve this requirement. We could directly use the %dbname meta-html in a div to display the database name but we will be using a javascript to write some logic to only display database name in non-PROD environments.

- Create custom style for the database name:

This style is cloned from the delivered greeting style class to replicate the font and location.

- Add new leaf to represent the database name element on the Branding Header Layout:

We added a new child element under the pthdr2container. This element is a static javascript object (cskdbname) which is ordered after the cskhdrlogo element.

Note; In the javascript, replace PROD_DBNAME with the actual name of the Production Database. The javascript is intended to not display the name of the database for Production.

- Test changes:

Recommendations if you are experiencing caching issues:

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

I found that adding static javascript to the Header Layout breaks the "Preview" functionality on the page. Here are the results of clicking/expanding the "Preview" functionality on the "Define Headers and Footers" page when it contains a static javascript object.

The reason this occurred is because the document.write in the javascript is overwriting the page. Let us replace the static javascript with a javascript object to avoid the issue with the preview.

Result:

Note: document.write is not generally recommended. In this case, we got away with it because it is being used at the header level and does not interrupt the page that is loaded during runtime.

Although document.write works in our case, to comply with best practice let us replace the document.write with Document Object Model (DOM).

Modified JavaScript (CSK_DBNAME):

if ("%dbname" !== "PROD_DBNAME")
{
   // document.write("<div id='cskdbname' class='cskdbname'><p>%dbname</p></div>");

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

   // set attributes and innerHTML
   dbname.setAttribute("id","cskdbname");
   dbname.setAttribute("class","cskdbname");
   dbname.innerHTML = "<p>%dbname</p>";

   // insert dbname div after the cskhdrlogo div
   var logo = document.getElementById("cskhdrlogo");
   document.getElementById("pthdr2container").insertBefore(dbname, logo.nextSibling);

}

We have commented out the document.write and replaced with DOM to create the DIV element, set attributes, set innerHTML and finally added the div to the pthdr2container element. We are using the logo.nextSibling as a logical selector for the next child of pthdr2container after cskhdrlogo because we do not know if ptsearchbox would be displayed at runtime (e.g.: in cases where SES is turned off).

So far we have seen some of the more common branding requirements and we were able to achieve all of them by just using the online configuration pages. I hope this is definitely something everyone would be excited about!

In the next part (as time permits), I would like to look into some of the more advanced branding requirements like using a custom image on the PeopleTools Timeout message (which contains the Oracle Logo), displaying a more dynamic, user specific greeting message, adding Google Analytics javascript and migrating the branding modifications.

As always, I would appreciate any feedback/improvements that could be made to the content of this post.

Custom CSS for Reference:

Object Name: CSK_HDR_LOGO

#cskhdrlogo {     float: %AlignStart;     width: 66px;     height: 55px;     margin:0;     padding: 0 5px 0 0;     background:none; } #cskhdrlogo:before {     // content: url(%Image(CSK_LOGO));     left: 0px;     position: relative;     top: 0px; }

Object Name: CSK_BR_GEN

#pthdr2container.pthdr2container {     background: url(%Image(CSK_HEADERBG_CSS));     background-repeat: repeat-x; } #ptdropdownmenu #pthnavcontainer{     background: url(%Image(CSK_BREADCRUMB_CSS3));     background-repeat: repeat-x; } // Commenting Font Color Changes //   #pthdr2syslinks .PSHYPERLINK, //   #pthdr2syslinks .PSHYPERLINK:link, //   #pthdr2syslinks .PSHYPERLINK:visited, //   #ptdropdownmenu #pthnavcontainer .pthnav a //    { //       color: #FF0000; //   } #pthdr2container.pthdr2container #ptgreetingmessage.greeting {     position: absolute;     right: 0;     bottom: 0; } #pthdr2container.pthdr2container #cskdbname.cskdbname {     display: inline-block;     color: #426a92;     margin: 0 5em;     vertical-align: super;     font-family: Arial,Helvetica,sans-serif;     font-size: 12pt;     font-weight: bold; } Useful CSS References (There are plenty more online resources available): http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048 http://css-tricks.com/multiple-class-id-selectors/