Push Notifications - Disabling the Notification Badge

I saw a question on a forum where someone wanted to disable the push notifications badge from showing the incremental counter.

What is the Notification Badge? It is the counter on the notification icon which indicates any new notifications that were pushed to the client/users.

Why would we want to disable this? Yes, that is a good question. It is hard enough to setup and ensure that Push Notifications is functional, so I would not touch anything if you ever get the badge to increment properly! 😉

That aside, let's say we have a valid reason to remove the counter. Maybe we decided to not interrupt our users and just let them view their notifications on their own accord (i.e., the next time they make a request to the server).

My first thought was that we could simply disable this at the app server configuration level.
PeopleBooks: Configuring an App Server Domain for Push Notifications 

However, this would only stop the server from sending 'push' notifications to the client using WebSockets. This would not stop the counter from displaying when the client/users initiate a request (such as initial login and subsequent actions within the application).

Note: In PeopleTools 8.58, the web profile custom property EnablePNSubscriptions is no longer used. Refer: Understanding Push Notification Configuration

Option 1

Looking for other options, I stumbled upon a PeopleTools Personalization that is new in 8.58.
Refer: Adding PeopleTools Option to Disable and Re-enable Push Notifications

This works great! Easy to setup online (no need to reboot any domains) and effectively stops the notification badge counter from displaying all together. The beauty about this approach is that we could either setup the default option as true or false (i.e., enabled/disabled) at a system level and let users (with appropriate access) to personalize this option via 'My Preferences' at an individual level.

Option 2

The other idea I had was to simply hide the badge using CSS.

CSS

For the sake of a proof of concept, I made the following update to the delivered CSS object - PSBASE_A_STYLES.

This is another option to achieve the same result at a system level.

Classic Drop-Down List Styling

Recently, there was a question on my blog related to drop-down list styling.

Refer: Original Question

How do we apply different colors to drop-down list values?

In this post, I will walk through a few examples of how we can use CSS to apply different background colors to drop-down list values. As an example, we will be using the 'Branding System Options' classic page which contains two drop-down lists.

Navigation: PeopleTools > Portal > Branding > Branding System Options

Identifying the style classes to target

The first step to overriding delivered CSS is to identify the style class(es) to target. We can do this using the browser's developer tools.

Overriding CSS using Component Branding

Since we are focusing on Classic UI, we can use the Component Branding feature which is available via the Branding Framework configuration to apply a custom Stylesheet object to the Component (PTBRANDINGSYSTEMOP).

Navigation: PeopleTools > Portal > Branding > Component Branding

Zebra Striping

In this approach we will use the nth-child() CSS to alternate between two different background colors as shown below.

Option 1: All Drop-Down lists on the page/component

Option 2: Specific Drop-Down list on the page/component

Notice the #PSBRSYSTOPT_WRK_PTBRANDTHEME in the CSS selector.

Styling specific rows

In this scenario, we will assume that we already know the rows that we want to style differently. Let's say, we want to display the custom Themes (with "SV_" prefix) differently.

Option 1: If we know the row numbers

Option 2: CSS based on attribute value prefix

Branding - Overriding the browser default :focus Selector

This post is based on a question that was recently asked here.

Question

"When user uses Keyboard instead of mouse, when they are using the TAB key on the homepage, the Home button and other button on the banner will be highlighted by the white dotted lines, and when it comes to the tiles, they are also highlighted by that white dotted line, but the visibility of that dotted lines is very minimal around the tiles, is there a way we can change the color of that dotted lines using the macro set or style sheet."

Demo

 
This 'dotted lines' is added by the browser for accessibility reasons and it could vary depending on the type of the browser. I found couple of excellent blog posts on this topic which are listed below.

https://www.kirupa.com/html5/changing_the_default_focus_styles.htm
http://outlinenone.com/

Overriding the browser default :focus Selector

Fluid - Global override

We simply need to add the following CSS to the 'Global Override Style Sheet' used in our current theme.

In this example, the 'Global Override Style Sheet' used in the current theme is shown below.

Demo

Fluid - Tile override

Let us say that we only want to change the :focus on the Tiles, then we can simply target the Tile elements by adding the following CSS instead to the 'Global Override Style Sheet' used in our current theme.

Demo

Classic - Global override

Similarly, if we want the same global override in Classic, we can simply add the following CSS as an 'Additional Style Sheet Object' in the 'Branding System Options' page.

Demo

Fluid UI - Working with Grids - Part 4 - Styling Stacked Grids

There were some interesting requirements posted by a reader in the following blog post.

Refer: Fluid UI - Working with Grids

Requirement 1: How to align the elements in a column to 'top' in a Stacked Grid

Let us say, we have a two Stacked columns with different number of elements/fields in each Stack as shown in example - Responsive Flex Grid with 2 Columns. As we can see in the screenshot below, the first Stacked column contains 3 fields and the second Stacked column contains 2 fields.

Since the second Stacked column only contains 2 fields and they are centered from a vertical position point of view, they don't line up with the fields in the first Stacked column.

If we want to align the fields in the second Stacked column to the top, we can achieve that with the following CSS.

I really like the nth-child() CSS3 selector. The idea is to only apply the CSS to a particular child element and not all. In our case, I only wanted to apply the CSS to the second column <td> element with "ps_grid-cell" class as shown below.

You can find more details on the nth-child() selector in the following blog post.

https://support.awesome-table.com/hc/en-us/articles/115001393209-Add-style-to-specific-columns-or-rows-in-your-Table-view

Note: The CSS provided above is added to the page using the following Page Activate PeopleCode.

Requirement 2: How to align specific fields (elements) in a Stacked Column to the Right

Let us say, we want to right justify specific fields in a Stacked Column. For example, we want to right justify the EFF_STATUS field.

We can achieve this by simply identifying the the id value (or part of it) and apply a wildcard CSS selector that contains this value as shown in the following CSS.

The wildcard for the id is required in this case due to the window and grid row numbering that is prefixed and suffixed to the record field name to generate the id value.

Requirement 3: How to align a specific Stacked Column to the Right

Let us extend the previous requirement and say that we want to align the entire second Stacked column (including the Label) to the right.

We can simply achieve this by using the following updated CSS:

Result

Project Details

All examples in this blog post were built on the project provided in Fluid UI - Working with Grids.

Fluid Branding - File Attachments Icon

Here is a question from PeopleSoft General Discussion community.

How can we customize the icons in the Fluid file attachment dialog box?

Further, how do we use different icons for different form factors?

We can do this by using CSS to override the icon on different form factors. I added the following styles at the end of my Fluid - Global Override Style Sheet used in my Branding Theme.

Fluid - Global Override Style Sheet

CSS referenced in Theme Definiton

CSS for Reference

As we can see in the CSS, we can use a different image as the content for the File Upload icon based on the form factor.

Demo on Desktop (Extra Large Form Factor)

Demo on Mobile Device (Small Form Factor)

Fluid UI - Tile Wizard API - Part 3 - Dynamic Tile Style

This is a continuation of the Fluid UI - Tile Wizard API series: Part 1 and Part 2. In this part, we will explore the Tile Wizard API further to dynamically style tiles and more importantly find an option to target specific tiles to apply custom style classes.

In the past (refer Fluid UI - Styling Tiles - Part 1 and Part 2), I wrote about the challenges with the way the id attribute is auto-generated in the tile html (div elements).

E.g.: In the screenshot below, the div element for the 'Financial Account' Tile in the Student Homepage has an id attribute value of win0divPTNUI_LAND_REC_GROUPLET$2.

The number 2 in the id attribute value denotes that it is the third (starting with 0) tile on the Homepage. This auto numbered id value is still unique enough to target the elements under this div and apply custom styles using css selectors (e.g.: make the 'Financial Account' tile title appear in red color, etc.). But this assumes that the end users or even the administrators will not change the order of the tiles either via Personalizations or via administrative pages (structure and content). If such events occur, then it would be a bit complex to apply a style class targeted to a specific tile. This was the main reason I created an Idea on My Oracle Support to request this ability as a PeopleTools enhancement.

With this background, I got really excited when I saw that we could potentially use the Tile Wizard API for applying targeted styles to a tile using the TileID and the TileSpecificStyleSheet properties of the Tile Wizard Class.

Environment Details:
- CS 9.2
- PUM Image 4
- PeopleTools 8.55.12

TileID Property Quirk:

But first, I found some quirky behavior with the TileID property. When I tried to set the TileID for the custom tile 'My Team' which I created in Part 2, it did not really update the id attribute on any of the elements that are part of the Tile. Instead the value was added to the class of the Tile Content area. This appears to be a bug from my understanding. If you are finding different results then please leave a comment with your experience!

PeopleCode:

We can see that the id attribute of the tile - where we would have expected the update - is still unchanged, whereas strangely the value is added to the class of the Tile Content area. Bug?

Using the TileSpecificStyleSheet Property:

While it is evident with the name of this property that it is specific to a tile, it does not necessarily mean that it will only be applied to the target tile. Basically, the style sheet is added to the response which may or may not be specific to the target tile depending on the style class selectors in the style sheet.

Let us say we added a custom style sheet to the 'My Team' tile using the TileSpecificStyleSheet property.

Scenario 1:

Let us add the following style to the freeform style sheet to set a different color to the Tile Title.

SV_TILE_CSS Style Sheet:


Results:

We can see that all the tiles on the homepage are affected by this style class. This is because the style class does not have any targeted css selectors and therefore will be applied to all tiles on the homepage.

Scenario 2:

Let us add another style - this time specifically targeting the 'My Team' tile using css selectors - to change the color of the Live Data text.

SV_TILE_CSS Style Sheet:


Results:

Overall, while there are workarounds, it would be great if the TileID property works as expected (perhaps in the future releases of PeopleTools?) which would allow us to easily write custom style classes to accurately and effectively target specific tiles.

Fluid UI - Custom Development - Styling Tiles - Part II

I previously described, in this blog post, how I ran into an issue with a Fluid tile and needed a way to apply some custom style overrides on the tile image.

In the same vein, a reader asked a question on this post, if there is a way to apply similar style overrides on the tile title? We should be able to follow a similar approach to achieve something like that.

This question proves that there is definitely a case to enhance the Fluid tile configuration to allow us to apply style overrides. If you agree, then please take a moment to vote for this Idea on My Oracle Support Community.

Here are the steps to target a tile title and apply custom style overrides:

Step 1: Identify the id of the tile title

All tile title elements will have a unique id property as follows PTNUI_LAND_REC_GROUPLET_LBL$29. Here 29 is the number that uniquely identifies my tile title.

Step 2: Apply custom style override

I simply added the following custom style at the very end of my 'Fluid - Global Override Style Sheet' (CSK_BRAND_FLUID_TEMPLATE) referenced on my custom Branding Theme (CSK_THEME_FLUID). Refer: PeopleTools 8.55.x - Branding - Part I for more details. 


Note: We can adjust the margin property as per the custom requirement.

Results:

Considering Small Form Factor:

When I said the id property is unique, I was not 100% accurate. It appears that it may vary depending on the form factor we are on. It is mostly true that the id property will be unique but if we are on small form factor (SFF), then it is likely that there may be other tiles that are suppressed. This suppression of tiles on SFF causes renumbering of tile id properties. There is nothing we can do about it because it is how PeopleSoft generates the HTML for the tiles.

That said, we could identify the SFF id property for the tile and write RWD - Media Query to supplement the CSS that I previously described.

Step 3: Identify the id property for SFF

In my case, it turned out to be PTNUI_LAND_REC_GROUPLET_LBL$23.

Step 4: Add media query for SFF

Again, I simply appended to my existing CSS that I used in step 2.


Results:

Fluid UI - Custom Development - Styling Tiles

In this post, I will write about how we can style any custom tiles that we might be creating for Fluid UI.

Why would we want to do that?

I created a custom Fluid component/page and created a Fluid Content Reference.

Now my icon¹ image (CSK_CC_SCAN) for my custom tile ended up as follows:

Notice how the icon is not position appropriately? Sure, I can create an image with the desired alignment and spacing. But wouldn't it be better to just adjust the style on the tile image to add some alignment/margin properties?

If you see the Content Reference - Fluid Attributes - Tile Information, there is no way to assign a custom style to the Tile.

How do we associate styles to custom tiles?

I simply added the following custom style at the very end of my 'Fluid - Global Override Style Sheet' (CSK_BRAND_FLUID_TEMPLATE) referenced on my custom Branding Theme (CSK_THEME_FLUID). Refer: PeopleTools 8.55.x - Branding - Part I for more details.


CSK_CC_SCAN$30 is the id attribute generated on the HTML for my custom tile.

Now, we can see the results from the image above that my custom tile icon is displayed in the desired position with a top margin of 25px.

If you think this would be a good feature to add to the 'Fluid Content Reference - Tile Information' section, then please vote for this idea on My Oracle Support.

¹ - Icon made by Freepik from www.flaticon.com

PeopleTools 8.55 - Oracle JET - Using ACE Editor for Online Branding Objects (HTML, JavaScript, Style Sheets)

Have you ever wondered if there is a better way to edit the "Branding Objects" that are available online (PeopleTools > Portal > Branding > Branding Objects)?

If you have managed Branding Objects (JavaScript, HTML and CSS) online, you would have noticed that the editor is a simple 'textarea'. It is not a great UI and it makes it really difficult to manage/write anything more than a few lines.

E.g.:

Although it is great that, starting with PeopleTools 8.53, we now have the ability to manipulate javascript, html and css objects online (instead of using App Designer), the major part of reading/understanding/writing the code probably needs to be done outside on a text editor which has better support for the markup/syntax.

Why not a code editor for the web?

If you attended Jim Marion's popular session 'PeopleTools Tips and Techniques' either at Oracle OpenWorld 2015 conference or HEUG - Alliance 2016 conference, you might have seen him show us how he created a custom page to manage javascript content using ACE Editor. When I asked him how he built something like that, he mentioned that he used AJAX to marshal the content and the page itself is fronted by a component for searching, but is really an iScript for display and an iScript for saving. It was a brilliant idea to use a high performance code editor to manage such objects (some features/benefits include auto complete, syntax highlighter for over 100 languages, better maintenance/display of indending/outdending, folding function/code modules and overall better readability).

Jim's approach involved storing the javascript contents in a custom table and then referencing them as needed. I wanted to take the same idea and create a mechanism to integrate ACE Editor with any page field (textarea). At the same time, I did not want to customize anything. So, I want my approach to be very similar to creating/enabling Rich Text page fields but instead of using App Designer, I want to simply inject a custom javascript to the page and enable the ACE Editor. Another difference with my approach is that I want to use JavaScript and the component processor to take care of marshaling and saving the data instead of using the AJAX/IScripts option.

Do any challenges come to mind?

- How do we replace the existing 'textarea' on the page with the ACE Editor?
- Next, how do we transfer the contents of the ACE Editor to the page field 'textarea'?
- Next, how do we make the component processor accept and honor this change made to the buffer via JavaScript (especially because we are not customizing the page and the page field may not have the 'Modifiable by JavaScript' setting enabled)?

Here are steps I went through to integrate ACE Editor with the PeopleTools - Branding Objects Page. If you like this idea and implementation, then please click here to vote for it on My Oracle Support Community.

Note:

1. A similar approach could be used to extend the ACE Editor functionality to any other page field - textarea.
2. I used the latest version of my 'Global JavaScript/Style Sheet Injection Bootstrap' (using Oracle JET and more importantly requireJS) to inject a custom javascript into the 'Branding Objects' page. If you choose not to use this approach, then you will need to find an alternative way to inject the custom javascript but the core functionality of the js code should work as described. (Refer: 'Using Oracle JET' series - Part 1, Part 2, Part 3 and Part 4).

Step 1: Download the ACE Editor library and store it locally on the web server

I downloaded the ACE Editor library from the following github URL and placed it on my web server:
https://github.com/ajaxorg/ace-builds/archive/master.zip

Web Server:

Just to show the library folder structure, here is a screenshot highlighting the path to the ace.js file.

Step 2: Add new function cskGetFormName() to our JS Bootstrap (CSK_FL_BOOTSTRAP_JS)

Function Name: cskGetFormName


This function helps us resolve the %FormName meta-html which is not available currently for client side javascript. So, we cannot use it, for example, as submitAction_%FormName in a client side javascript. The expectation is that it would resolve itself to submitAction_win0, submitAction_win1 or submitAction_winN depending on the current window. So, I wrote this function to determine the %FormName portion as a string, which I will be using in the next step as part of FSU_ACE_CFG_JS javascript code.

Step 3: Create Custom JavaScript Object (CSK_ACE_CFG_JS) to configure the ACE Editor on the desired page

JavaScript Object: CSK_ACE_CFG_JS


Explaining the Script:

• First, you will notice that I am adding the ACE Editor library path to the requireJS configuration locally instead of using the requireJS configuration script object (CSK_REQUIIRE_CFG_JS). The reason I am appending to the requireJS paths locally is because, we don't want this library to get loaded for the entire application, rather just conditionally to a specific page. In step 4, I will detail how to achieve that using the Global Injection Bootstrap (CSK_FL_BOOTSTRAP_JS).
• Next, I am defining jquery, ace.js and jqueryui as dependencies for the function execution using requireJS.
• Inside the function execution, I included BOOTSTRAP 3.0.0 (which was downloaded from this link and stored in a custom object) and JQUERY 1.8.17 (delivered object) CSS. I am using the custom function cskLoadCSS to take care of the CSS loading.
• Next, I search for the textarea (id="PTBR_MGOBJ_WRK_PTBR_HTMLAREA1"), hide it and replace it with the ACE Editor div.

• Now the delivered textarea is hidden and our custom ACE Editor is in the DOM. Further, I used a basic set of configuration options for the Editor which we can certainly expand depending on our use case (ACE Editor is highly configurable). Also, I am dynamically setting the mode of the Editor to either html, javascript or css depending on the object type that we are updating. As part of the Editor configuration, I also initialized the contents of the ACE Editor with the contents of textarea.
• Lastly and most importantly, we update the textarea (now hidden) with the latest contents of the ACE Editor any time there is a change in the editor contents. 
• addchg_%FormName Function: The trick to make the component buffer accept and honor the changes made to the textarea (PTBR_MGOBJ_WRK_PTBR_HTMLAREA1) - via client side javascript - is to use the addchg_%FormName function. I had no idea about the existence of such a function and its significance. I learned about this gem from Chris Malek while discussing and troubleshooting an unrelated issue with Fluid!

Step 4: Conditionally Load ACE Editor Config JavaScript (CSK_ACE_CFG_JS) using the Global JavaScript Injection Bootstrap

The conditional logic to only load CSK_ACE_CFG_JS on the Secondary Page PTBR_ADDHTML_SEC, can be found in the cskInjectJS function which is part of CSK_FL_BOOTSTRAP_JS object. An updated version of CSK_FL_BOOTSTRAP_JS source code can be found here.

Results:

HTML:

JavaScript:

CSS:

Now we are ready to enjoy the ACE Editor for writing code! Once again, if you like this idea and implementation, then please click here to vote for it on My Oracle Support Community.

PeopleTools 8.54+ - Branding - Part 4B - Customizing DEFAULT_THEME_TANGERINE_ALT Theme (Continued)

This post (Part 4B) is a continuation of one of my previous Branding articles on customizing the DEFAULT_THEME_TANGERINE_ALT theme (Part 4A).

In part 4A, we saw how we could override the logo image while using the DEFAULT_THEME_TANGERINE_ALT theme.

Result:

In this post we will see how we can further customize this theme which was cloned from DEFAULT_THEME_TANGERINE_ALT.

Override Branding Header Background Image:

The background image on the Branding Header is generated by the following style.

Let us override this style to use a custom image.

Custom Image: CSK_HEADERBG_ALT

Custom Style:

/* Branding Header Background Color */
#ptbr_header_container #pthdr2container.pthdr2container {
  background-image: url(%image(CSK_HEADERBG_ALT));
}

The additional custom selector (highlighted above) was added to provide a higher precedence to the custom style.

Test Changes:

Recommendations if you are experiencing caching issues.

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

We can see that the branding header background color change has taken effect.

Overriding the NavBar Background Image:

The NavBar background image is generated by the following style.

Custom Image: CSK_NAVBARLINK_BG_ALT

 Main Menu > PeopleTools > Portal > Branding > Branding Objects (Image Tab)

Custom Style:

/* NavBar Background Color */
#pthdr2navbarlinks.pthdr2navbarlinks #pthdr2navbar_div #pthdr2navbar {
  background: url(%image(CSK_NAVBARLINK_BG_ALT)) repeat-x scroll 0 0 transparent; 
}

The additional custom selector (highlighted above) was added to provide a higher precedence to the custom style.

Test Changes:

Recommendations if you are experiencing caching issues.

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

Overriding the Drop Down Menu Background Image:

The drop down menu background image is generated by the following style.

Custome Image: CSK_BREADCRUMB_ALT

Custom Style:

/* Drop Down Menu  Background Color */
#ptdropdownmenu.ptdropdownmenu {
  background: url(%image(CSK_BREADCRUMB_ALT)) repeat scroll 0 0 transparent;
 }

The additional custom selector (highlighted above) was added to provide a higher precedence to the custom style.

Test Changes:

Recommendations if you are experiencing caching issues.

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

Override Drop Down Menu Font Color:

The drop down menu font color is generated by the following style.

Custom Style:

/* Drop Down Menu Font Color */
#ptdropdownmenu .pthnav a.pthnavbcanchor, #ptdropdownmenu .pthnav a.pthnavbcanchor:hover, #ptdropdownmenu .pthnav a.pthnavbcanchor:focus, #ptdropdownmenu .pthnav #pthnavbc li a, #ptdropdownmenu .pthnav #pthnavbc li a:hover, #ptdropdownmenu .pthnav #pthnavbc li a:focus {
  color: #284562 !important;
}

The additional custom selector (highlighted above) was added to provide a higher precedence to the custom style.

Test Changes:

Recommendations if you are experiencing caching issues.

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

Override System Links Font Color:

The system links font color is generated by the following style.

Custom Style:

/* System Header Links Font Color */
#pthdr2container.pthdr2container a.PSHYPERLINK, #pthdr2container.pthdr2container a.PSHYPERLINK:hover, #pthdr2container.pthdr2container a.PSHYPERLINK:visited {
  color: #284562;
}

The additional custom selector (highlighted above) was added to provide a higher precedence to the custom style.

Test Changes:

Recommendations if you are experiencing caching issues.

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

 

Override Drop Down Menu and 'Add To' Menu - Active Background Color:

Custom Styles:

/* Add To Drop Down Background Color (Active) */
#pthdr2navbarlinks.pthdr2navbarlinks #pthdr2addto_div.active {
  background-color: #FFFFFF;
  border: 1px solid #666666;
}

/* Drop Down Menu Navigation Background Color (Active) */
.pthnav .pthnavbaropen {
  background-color: #FFFFFF;
}

The additional custom selector (highlighted above) was added to provide a higher precedence to the custom styles.

Test Changes:

Recommendations if you are experiencing caching issues.

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

Override Drop Down Menu Icon Images:

Custom Images:

CSK_HNAV_ALT_FAV_SEP

CSK_HNAV_ALT_BC_DOWN_ARROW

CSK_HNAV_ALT_HIERARCHY_SEP

Custom Styles:

/* Drop Down Menu Down Arrow Image */
#ptdropdownmenu.ptdropdownmenu .pthnavbarfldr:after {
  content: url(%image(CSK_HNAV_ALT_BC_DOWN_ARROW));
}

/* Drop Down Menu Fav Icon Separator Image */
#ptdropdownmenu.ptdropdownmenu li#pthnavfavsep {
  background-image: url(%image(CSK_HNAV_ALT_FAV_SEP));
}

/* Drop Down Menu Hierarchy Separator Image */
#ptdropdownmenu.ptdropdownmenu li.pthnavhiearchysep:before {
  content: url(%image(CSK_HNAV_ALT_HIEARCHY_SEP));
}

The additional custom selector (highlighted above) was added to provide a higher precedence to the custom styles.

Test Changes:

Recommendations if you are experiencing caching issues.

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

Override System Link Icons and NavBar Icon Images:

Custom System Link Icon Images:

CSK_HEADERLINK_HOME_ALT:

CSK_HEADERLINK_SEP_ALT:
 

Custom NavBar Icon Images:

CSK_ADDTOLINK_ARROW:

CSK_HEADER_ALERTS (SVG image):

CSK_HEADER_NAVBAR (SVG image):

Custom Styles:

/* Home Icon Image */
#pthdr2container.pthdr2container #pthdr2home {
  background: url(%image(CSK_HEADERLINK_HOME_ALT)) no-repeat scroll left center transparent;
}

/* System Header Links Separator */
#pthdr2container.pthdr2container .pthdr2sep {
  background: url(%image(CSK_HEADERLINK_SEP_ALT)) no-repeat scroll center center transparent;
}

/* Add To Drop Down List Down Arrow Image */
#pthdr2navbarlinks.pthdr2navbarlinks #pthdr2addto:after {
  content: url(%image(CSK_ADDTOLINK_ARROW));
}

/* Notification Icon Image */
#pthdr2navbarlinks #pthdr2notify_div #pthdr2notify span {
  background: url(%image(CSK_HEADER_ALERTS)) no-repeat scroll center 8px transparent;
}

/* NavBar Icon Image */
#pthdr2navbarlinks #pthdr2navbar_div #pthdr2navbar span {
  background: url(%image(CSK_HEADER_NAVBAR)) no-repeat scroll center 8px transparent;
}

The additional custom selector (highlighted above) was added to provide a higher precedence to the custom styles.

Test Changes:

Recommendations if you are experiencing caching issues.

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

Add a Hyperlink to the Branding Logo:

In this section we will see how we can add a hyperlink to the branding logo. This would be useful in cases where we might want to link the logo to another website.

Create Custom URL:

Modify existing style for the Branding Logo:

Comment the content property.

Modify the logo element in the custom Header Definition:

PeopleTools > Portal > Branding > Define Headers and Footers

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

HTML for reference:
<a href='%URL(CSK_LOGO_URL)'>
   <img src='%image(CSK_LOGO)' title='%URL(CSK_LOGO_URL, DESCR)' style='border: none;'></img>  
</a>

Test Changes:

Recommendations if you are experiencing caching issues.

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

Display Database Name on the Branding Header:

Most organizations would like to print the name of the database on the branding header for test environments (e.g.: DEV, TST, UAT, etc). Let us see how we can display the database name on the branding header.

Additionally, we will use a custom javascript object to write some conditional logic to only display the database name if it is a non-production environment. This helps us to keep the header "clean" for production but display the database name only for testing (non-production) environments.

Create Custom Javascript Object:

if ("%dbname" !== "PROD_DBNAME")
{

   // 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);

}

Note: In the javascript, replace PROD_DBNAME with the actual name of your Production Database.

Create Custom Style for Database Name:

/* Database Name Text Style */
#pthdr2container.pthdr2container #cskdbname.cskdbname {
    display: inline-block;
    color: #284562;
    margin: 0 5em;
    vertical-align: super;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12pt;
    font-weight: bold;
    float: left;
}

 Add a new leaf element to represent the database name on the Branding Header Definition:

We will add a new child element under the pthdr2container. This element is a basic javascript type (cskdbname) which is ordered after the cskhdrlogo element.
 

Test Changes:

Recommendations if you are experiencing caching issues.

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

Display Dynamic and User Specific Greeting Message:

In this section, let us see how we can modify the Branding Header definition to display a dynamic greeting message for the users.

The personalized greeting message would display the text "Welcome to CSK " appended with the User's Description text using the %UserDescription system variable.

Let us assume we want to display this greeting message at the bottom of the 'Add To' menu.

Before we add the message, let us make a little bit of room by moving the 'Add To' menu to the top.

Move elements using CSS:

Custom Style:

/* Add To Drop Down Menu Position (Align to the top) */
#pthdr2navbarlinks.pthdr2navbarlinks #pthdr2addto_div {
  vertical-align: top;
}

Result:

Add a Child Element under pthdr2navbarlinks:

This will serve as a container for holding both the 'Add To' menu and the new custom greeting message.

Custom Style for cskhdr2navbarcontainer:

/* Style for custom container in navbar */
#cskhdr2navbarcontainer.cskhdr2navbarcontainer {
  position: relative;
  float: left;
  height: 57px;
}

Move 'Add To' Drop Down Menu under cskhdr2navbarcontainer:

Let us set the parent for 'pthdr2addto' element as 'cskhdr2navbarcontainer'.

Result:

Create Custom Branding Element Type for Greeting Message:

Main Menu > PeopleTools > Portal > Branding > System Data > Define Element Types

Note: The implementation details for the Custom App Class CSKGreetingText is exactly the same as in my previous post - PeopleTools 8.54 - Branding - Part 3 (Please refer Display Dynamic and User Specific Greeting Message using Custom Branding Elements section).

Add custom 'Greeting Message' element to the Branding Header:

Add 'cskgreetingmessage' element under 'cskhdr2navbarcontainer' using 'CSK Personalized User Greeting' as the element type.

Add custom style for the Greeting Message:

/* CSK Personalized Greeting Message */
#pthdr2navbarlinks.pthdr2navbarlinks #cskgreetingmessage.cskgreeting {
  position: absolute;
  bottom: 0px;
  right: 10px;
  color: #284562;
  font-family: Arial,Helvetica,sans-serif;
  font-size: 12pt;
  font-weight: normal;
}

Test Changes:

Recommendations if you are experiencing caching issues.

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

Add Custom Links to the Branding Header System Links:

In this section let us see how we can add some useful links (for pages of interest such as Process Monitor and Report Manager) to the System Links section on the Branding Header.

Create Custom Element Types for Process Monitor and Report Manager Links:

Main Menu > PeopleTools > Portal > Branding > System Data > Define Element Types

Process Monitor:

Report Manager:

Note: The implementation details for the Custom App Classes ProcessMonitorLink and ReportManagerLink are exactly the same as in my previous post - PeopleTools 8.54 - Branding - Part 3 (Please refer Application Class Implementation for Process Monitor AND Application Class Implementation for Report Manager sections).

Add Process Monitor and Report Monitor Elements to Branding Header:

Test Changes:

Recommendations if you are experiencing caching issues.

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

Adjusting the width of the Navigation Breadcrumb Scroll to accommodate the additional links on the Branding Header System Links:

Special thanks to Cache Staheli (see comments below) who pointed out an issue with adding custom links to the System Links. It appears that when we add custom links to System Links, the Navigation Breadcrumb Scroll (which can be seen when the browser width is reduced/limited) overlays with the System Links causing the entire header to render poorly.

Upon inspecting the HTML further, we will find that there is a hard-coded offset (set to 150) injected as part of a javascript.

Let us see how we can override this hard-coding to accommodate our additional custom links. This offset value is set in a javascript that is associated as part of the header definition. Note: This javascript would not be available as a PeopleTools managed object as it is added directly as a static javascript (meaning it cannot be found in App Designer).

Let us go ahead and update this offset value to something that is more appropriate to the current header design.

If you would like to make the offset variable a bit more dynamic then you can use the following JavaScript to replace the Static JavaScript:

// ptHNavSideOffset = 150;
ptHNavSideOffset = document.getElementById("pthdr2syslinks").clientWidth;

This would ensure that the offset is set to the width of the pthdr2syslinks (the container DIV for the Branding Header - System Links).

Test Changes:

Additional Customizations:

Please refer PeopleTools 8.54 - Branding - Part 3 for the following changes (implementation steps are exactly the same):

- Branding the Timeout Popup Warning Message
- Implementing Google Analytics
- Migrating Branding to other environments

Note: For 'Migrating Branding Objects to other environments' please also refer the following links:
Branding Objects - Migration Issue and Workaround
E-PORTAL: Managed Branding Objects are not Accessible in the Target Environment After Migration (Doc ID 2011383.1) 

Adding/Updating the FavIcon for Classic (Included on 2016/04/01):
Refer: FavIcon for Classic