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 - Tile Wizard API - Part 2 - Dynamic Tile Images

This post is a continuation of my previous article on the Tile Wizard API, where I described how we can use the Tile Wizard API to dynamically update the Tile Content.

In this post, we will see how we can use the Tile Wizard API for another similar and more common use case to display a dynamic image based on certain conditions.

For the purposes of this post, let us assume that we want to create a Tile called 'My Team' that displays a different image and live data based on the user's security role assignment.

Demo:

Tile Wizard Setup:

NavBar > PeopleTools > Portal > Tile Wizard > Create Tile

App Package PeopleCode Implementation:

PeopleCode for Reference:

import PTGP_APPCLASS_TILE:Tiles:Tile;

class TILE_2 extends PTGP_APPCLASS_TILE:Tiles:Tile
   method TILE_2();
   method getTileLiveData();
end-class;

method TILE_2
   %Super = create PTGP_APPCLASS_TILE:Tiles:Tile();
end-method;

method getTileLiveData
   /+ Extends/implements PTGP_APPCLASS_TILE:Tiles:Tile.getTileLiveData +/
  
   If IsUserInRole("SV_CSK") Then
      rem %This.setTileImageRef("SV_CSK"); /* Method equivalent */
      %This.ImageReferenceField.Value = Image.SV_CSK;
      /* Live Data */
      %This.TileLiveData_1 = "Chennai Super Kings";
   End-If;
  
   If IsUserInRole("SV_RCB") Then
      rem %This.setTileImageRef("SV_RCB"); /* Method equivalent */
      %This.ImageReferenceField.Value = Image.SV_RCB;
      /* Live Data */
      %This.TileLiveData_1 = "Royal Challengers Bangalore";
   End-If;
  
end-method;

PeopleTools 8.54+ - Branding - Part 5B - Fluid Branding (Continued)

Before I start this post, I must apologize for the delay. This post has been on my "to do" list for a very long time but unfortunately other priorities had pushed it back. I finally managed to find time to go over some of the additional ("more advanced") topics that I wanted to cover on Fluid Branding continuing on my previous post Part 5A (using HCM 9.2 PUM Image 12 - PeopleTools 8.54.08).

It is common knowledge by now that there are several new configurable branding capabilities coming our way in PeopleTools 8.55 - particularly for Fluid. I learnt from various presentations at Oracle OpenWorld 2015 that moving forward - starting from PeopleTools 8.55 - there will be only one Branding (or in other words navigation experience) and it would be Fluid based. With that said, I still feel that this post would be useful/relevant for several folks who are currently on PeopleTools 8.54 or planning to upgrade to PeopleTools 8.54. Given that PeopleTools 8.55 has an expected GA perhaps by end of this year or early next year, it would still be a while before everyone gets in on the uptake!

Before I dive deeper, I want to share couple of topics (utilities) which will help us with some of the more advanced branding requirements.

Global JavaScript Injection Bootstrap for Fluid UI:

In my previous branding posts, we saw how we could inject custom style sheet overrides for Fluid UI using the online configuration options available in PeopleTools 8.54 (Assemble Themes - Global Override Style Sheet - follow the link for more details). This online configuration provides a mechanism to easily override delivered styles without any customizations.

But one of the major let downs with Fluid in 8.54 (at least from my perspective) is the fact that there is no way to inject javascript globally using a configuration (similar to style sheets). If we recall from my previous posts, we used the Branding System Options to inject Google Analytics javascript globally across the application for classic components (follow the link for more details). Once again, this online configuration ensures that the listed javascripts are injected in all components without any need for customizations. This helps us to avoid some of the hacks we used in the past for such injection e.g.: customizing the delivered javascript objects (PT_COMMON, PT_PAGESCRIPT, etc.). But unfortunately, the javascripts listed under 'Branding System Options' are not getting injected into the Fluid UI components.

Another disappointment for me (with regards to Fluid in PeopleTools 8.54) was that the jQuery and jQuery UI javascripts that were delivered for classic (injected globally as part of the Branding Header Definition - refer screenshot below) are NOT part of any of the Fluid UI pages/components. This is exasperated by the fact that we cannot really inject our custom javascript objects globally into Fluid!

The ability to inject javascript objects is very important for performing some of the more advanced branding tasks (which should be reasonably clear from the my preceding introduction and examples). With that in mind, I wanted to create my own framework (or bootstrap if you will) to inject custom javascript objects into Fluid UI pages. I am sure there are several ways to "skin the cat" but here are the principles or drivers for my approach:

- Should be least intrusive from a customization point of view. That is to customize the least amount of objects.
- Should be highly configurable. That is to build a bootstrap configuration that allows us the flexibility to dynamically add/remove javascripts objects online (on the fly) without repeatedly customizing.

Note: I ended up adding one line of custom code to a delivered PeopleCode object. Other than that, this framework is entirely configurable online (using the Branding Objects page).

Step 1: Create a custom javascript object

Navigation: Main Menu > PeopleTools > Portal > Branding > Branding Objects (JavaScript Tab)

Note: This javascript object needs to be added online so that it provides a configuration to inject additional javascript objects.

Let us create CSK_FL_BOOTSTRAP_JS as shown in the screenshot below. I will explain the placeholder javascript later as we start injecting other javascripts (using this javascript as a configuration).

Placeholder JavaScript Code - Updated on 20160403:

Updated on 20160403: I found a better way to dynamically retrieve the site name using the delivered getSiteName function (part of PT_COMMON javascript object) which seems to be a lot more efficient than my previous approach.

// This section was commented on 20160403
// Conditional logic for site name which might vary based on current DB instance;
// var dbname = String('%dbname').toUpperCase();
// if (dbname == "HCM92012")
// {
//   var site = "ps";  
// }// Repeat preceding logic for other instances (DEV, TEST, QA & PROD);
// This section was commented on 20160403

// This line was added on 20160403
// Use delivered getSiteName function for dynamically retrieving the site name for different environments.
var site = getSiteName();
 
// -- NOT REQUIRED (20160403) -- Repeat preceding logic for other instances (DEV, TEST, QA & PROD);
// E.g.:
// if (dbname == "HCMDEV")
// {
//    var site = "psdev";  
// }

// Inject javascript(s);

Step 2: Add custom code to PT_HEADERPAGE.Activate (Page Activate PeopleCode)

PT_HEADERPAGE is a header page that is part of all Fluid UI components and is mainly used for navigation purposes. We will be adding a line of code to inject our bootstrap javascript using peoplecode.

Custom PeopleCode:

/* CSK Custom Javascript Bootstrap for Fluid - Start */
AddJavaScript(HTML.CSK_FL_BOOTSTRAP_JS);
/* CSK Custom Javascript Bootstrap for Fluid - End */

Step 3: Inject Javascript

Now that we have our custom javascript object (CSK_FL_BOOTSTRAP_JS) injected into all Fluid UI components, we can use that as a configuration to further inject other javascript objects.

Custom JavaScript (CSK_FL_BOOTSTRAP_JS):

// This section was commented on 20160403
// Conditional logic for site name which might vary based on current DB instance;
// var dbname = String('%dbname').toUpperCase();
// if (dbname == "HCM92012")
// {
//   var site = "ps";  
// }// -- NOT REQUIRED (20160403) -- Repeat preceding logic for other instances (DEV, TEST, QA & PROD);
// This section was commented on 20160403

// This line was added on 20160403
// Use delivered getSiteName function for dynamically retrieving the site name for different environments.
var site = getSiteName();

// Inject javascript(s);

// jQuery - PT_JQUERY_1_6_2_JS;
document.write(unescape("%3Cscript src='/psc/" + site + "/EMPLOYEE/EMPL/s/WEBLIB_PTBR.ISCRIPT1.FieldFormula.IScript_GET_JS?ID=PT_JQUERY_1_6_2_JS' type='text/javascript'%3E%3C/script%3E"));

// CSK Fluid Image Replacement JS;
document.write(unescape("%3Cscript src='/psc/" + site + "/EMPLOYEE/EMPL/s/WEBLIB_PTBR.ISCRIPT1.FieldFormula.IScript_GET_JS?ID=CSK_FL_IR_JS' type='text/javascript'%3E%3C/script%3E"));
 

• The reason I am using the delivered IScript (IScript_Get_JS) in conjunction with document.write is because I am not able to use %JavaScript meta-HTML functions in javascript objects (in the same fashion as we do in HTML objects). Perhaps a future enhancement if anyone from Oracle is listening? :)
• The delivered IScript provides a way to resolve the javascript (at runtime) to the URL suitable for referencing the .js file on the web server (cache directory).
• I am using the custom variable site as a mechanism to make this javascript production ready and database refresh proof. This would allow the javascript to dynamically determine the sitename using variable substitution instead of hardcoding.

In the above example, you can see that I used the javascript object, CSK_FL_BOOTSTRAP_JS, as an online configuration to inject additional javascript objects with the following line of code.

document.write(unescape("%3Cscript src='/psc/" + site + "/EMPLOYEE/EMPL/s/WEBLIB_PTBR.ISCRIPT1.FieldFormula.IScript_GET_JS?ID=PT_JQUERY_1_6_2_JS' type='text/javascript'%3E%3C/script%3E"));

IScript for Image Object Source URL Resolution:

If we look into the WEBLIB_PTBR.ISCRIPT1.FieldFormula, we will find several useful IScripts similar to IScript_GET_JS that we used in the preceding section.

Since using meta-HTML such as %Image and %JavaScript does not seem to work in JavaScript objects, I tried to see if there was an IScript which might possibly return the URL suitable for referencing an image object on the web server (loaded on the cache directory). I did not find any delivered IScripts that did something like that so I wrote my own version.

WEBLIB_FL_CSK.ISCRIPT1.FieldFormula - IScript_Set_Image_URL_Variable

PeopleCode for Reference:

Function IScript_Set_Image_URL_Variable
 
   Local string &var = %Request.GetParameter("var");
   Local string &img = %Request.GetParameter("img");
  
   Local string &html = GetHTMLText(HTML.CSK_IMAGE_URL_JS, &var, &img);
  
   %Response.Write(&html);
  
End-Function;

HTML Object - CSK_IMAGE_URL_JS

Let us see this in action. Let us create our custom javascript object.

Navigation: Main Menu > PeopleTools > Portal > Branding > Branding Objects (JavaScript Tab)

JavaScript for Reference:

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

// Print variable using jQuery once the document is ready;
var $jq = jQuery.noConflict();

$jq(document).ready(function(){
  alert(cskLogo);
});

What does this JavaScript do?
- Calls IScript (IScript_Set_Image_URL_Variable) and passes two variables (var - variable name to store image URL; img - image object name).
- Prints variable using jQuery once the document is ready for testing purposes.

Note: I previously injected the delivered jQuery javascript PT_JQUERY_1_6_2_JS object which is how I am able to use jQuery in the above javascript.

Let us now inject this javascript into Fluid UI using the Fluid Bootstrap javascript created in the previous section.

Now if we try to access any Fluid content then we should get the alert message that displays the variable cskLogo with the relative image URL substitution.

We can also access the IScript directly on the browser to see what it does behind the scenes.

In the next post, I intend to cover some advanced Fluid branding concepts such as image replacement techniques without customizations (using the utilities detailed in this post) and more. Stay tuned!

Note: You could enhance the utilities detailed in this post by writing your own custom meta-HTML which is a topic described in great detail by Jim Marion in his book,  PeopleSoft PeopleTools: Tips and Techniques - Chapter 9 - Page 350.

PeopleTools 8.54+ - Branding - Part 5A - Fluid Branding

PeopleTools 8.54 has been around for a while now and it is about time that we jump on the Fluid UI bandwagon as there are more and more delivered Fluid Components that are made available.

Before we get started though, we obviously need to review the Branding on the Fluid Pages to make sure that it is consistent with our organization's Branding theme and not referencing any Oracle delivered colors, images and styles.

This post is intended to provide high level guidelines to help with achieving a consistent Branding experience in Fluid Homepages and Fluid Content pages. I titled this post as Part 5A because I would like to follow up with a Part 5B if I missed anything right now.

At the time of writing this post, I am using HCM 9.2 PUM Image 12 (PeopleTools 8.54.08).

If you have been following my previous multi-part series on PeopleTools 8.54+ Branding (Part 1, Part 2, Part 3, Part 4A), then you would find that I most recently cloned the theme DEFAULT_THEME_TANGERINE_ALT as CSK_THEME_TANGERINE_ALT in a HCM 9.2 PUM Image 12 environment (refer Part 4A). This was to keep it consistent with the Fluid UI and also bring in additional features like the NavBar into the Classic Branding Header.

End result of using CSK_THEME_TANGERINE_ALT for the Classic Branding would appear as shown in the following screenshot.

We can see that the NavBar and other new icons are available on the Classic Branding Header. All is good - as of now! Enter Fluid UI!!!

Either click on the NavBar and select Fluid Home or navigate from Main Menu > Fluid Home.

OR

Fluid Homepage:

First thoughts? Dude where's my logo??? :)

Couple of key pieces of information that would help us with Fluid Branding:

1. Classic Branding and Fluid Branding are completely different and mutually exclusive.
2. Fluid Branding (unlike Classic Branding which uses frame-based HTML templates) is entirely within the content frame. Notice the URL for the Fluid Homepage http://pi012.hcm92.com:8000/psc/ps/EMPLOYEE/HRMS/c/NUI_FRAMEWORK.PT_LANDINGPAGE.GBL contains /psc/ instead of /psp/? Basically, the Fluid Branding is entirely self contained within the component that is currently displayed. In this case - Fluid Homepage - it is PT_LANDINGPAGE.GBL.

Very well! Let us move along and try to override the Oracle Logo on the Fluid Homepage.

Note: Since Fluid Branding is essentially at the component level, we might be switching back and forth between configuration and customizations (using App Designer). So dust off your "developer hats" as you might need them intermittently.

Disclaimer added on 06/10/2015:

1. The customizations suggested in this post are merely provided as a proof of concept. The obvious approach would be to try to tackle the changes using CSS (in combination with javascript/jquery if necessary) to avoid customizations. The customizations detailed are only to provide an idea of where the images are referenced. If I find a good way to avoid customizations, I will include it in a future post. I am still researching and evaluating various options.
2. Any theme (color/contrast/images/any other styling) changes suggested in this post (as well as my previous Branding articles) are again done as a proof of concept. Please be sure to work with your UX and/or Functional teams to make sure that user experience and accessibility requirements are met.

Update Fluid Homepage Logo:

To update the logo for the Fluid Homepage Logo, we must first understand where it is coming from. We can see in the following screenshot that the image is getting generated as part of a page field PTNUI_LP_HEADER.PTNUI_LOGO (Component: PT_LANDINGPAGE, Page: PT_LANDINGPAGE).

Now that we know where the logo is coming from, we just need to update the page field properties to reference the appropriate custom image.

Speaking of images, you will notice that the delivered image that is used for the Fluid Homepage Logo is a SVG (Scalable Vector Graphics) image. This again is another great move by Oracle to adopt SVG images particularly for the responsive Fluid UI. I don't want to go into too much of the details of SVG images but as you start using them you will notice that you can very easily modify the images (by editing the XML of the SVG using a text editor) without having to use software/editors like PhotoShop.

That said, let us upload a custom image to replace the delivered logo for the Fluid Homepage. Note: I am using a SVG image for my Fluid Homepage logo. For best results and scaling it is highly recommended that we move towards using SVG images.

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

You could also do this using App Designer but always a good idea to have these Branding Objects configurable online.

Now that we have the logo uploaded, let us open App Designer to update the image referenced and replace with the custom logo.

App Designer > File > Open > Page > Select: PTNUI_LP_HEADER

On PTNUI_LP_HEADER Page, open the Page Field PTNUI_LP_HEADER.PTNUI_LOGO and update the properties to appropriate custom values and 'Save' the page:
- Label Tab > Alt tag for image (Type and Text)
- Label Image > Image ID

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 delivered logo on the Fluid Homepage is now replaced with the custom logo. Although we are making progress, the image does not look great due to the background color. Let us see how we can go about applying a few style sheet overrides to further customize the Fluid Branding.

Notes:

1. I found that SVG images and their usage in Responsive Web Design (RWD) is a very interesting topic. There are plenty of online resources and content that provide a lot of information and opinions. Here is one of the many articles that I enjoyed reading: http://www.smashingmagazine.com/2014/03/05/rethinking-responsive-svg/
2. I am sure some of you (just like me) might be wondering why we need to fall back to customizing objects in App Designer particularly with all the configurations that has helped us with Branding the Classic Homepage/UI? I gave this quite some thought. I was trying to see if there are easy options to override the image using CSS without too much overhead. I see some options of using Javascript or JQuery to perform these overrides but the question is "Is the juice worth the squeeze?". Right now, for the sake of simplicity and providing a proof of concept I decided to update the images using App Designer. In more complex use cases, we might need to dynamically change these images. For example, an environment with different themes for different user types such as Manager Self Service, Employer Self Service, etc. I plan to research this topic further and write a separate article on it if I find a good way to approach this requirement. If anyone has any suggestions then please feel free to leave a comment!

Getting ready to override Fluid Styles:

Before we go ahead and start applying custom style sheet overrides for Fluid UI/Branding, we need to do a few housekeeping tasks so that our custom style sheet(s) get injected while the Fluid Pages are rendered.

Step 1: Create Custom Style Sheet(s)

Navigation: Main Menu > PeopleTools > Portal > Branding > Branding Objects > Style Sheet (Tab)

Upload your style sheet(s) as appropriate. For now, I am just creating a place holder style sheet to first complete the housekeeping activities.

Step 2: Applying Custom Style Sheet as an Override for Fluid Components on the Theme Definition

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

In my case, I updated the theme CSK_THEME_TANGERINE_ALT because that is the "current" theme definition referenced in my Branding System Options. You can see that I assigned the new style CSK_FLUID_CSS as the Global Override Style Sheet (in the Fluid Components section). This configuration would inject the custom style sheet while rendering Fluid pages globally. We could also use the Theme Style Sheet Mapping at the node level but that would be an advanced topic which I don't intend to cover in this post (could be handy for interaction hub scenarios where there are multiple applications).

Now that we set the above configuration in place, we can add styles to the custom style sheet (CSK_FLUID_CSS) to override the delivered fluid styles.

Overriding the Fluid Header Bar Background Color:

Let us change the background color of the Fluid Header Bar by adding the following style class to CSK_FLUID_CSS.

/* Fluid Header Bar Background Color */
.ps_header-banner, .ps_header_bar {
  %BV(background-image:linear-gradient(rgb(240, 238, 80),rgb(219, 204, 47)));
}

Navigation:  Main Menu > PeopleTools > Portal > Branding > Branding Objects > Style Sheet (Tab)

Update the style sheet CSK_FLUID_CSS:

Test Changes:

Recommendations if you are experiencing caching issues.

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

Notes:

1. %BV is a new Meta-HTML function delivered in PT 8.54 that would expand the generic style into a browser specific style and add the browser specific prefix to the CSS property value.Refer: PeopleBooks.
2. linear-gradient is a CSS3 Gradient property that allows us to provide a smooth transition of two or more colors. This allows us to use css for background colors instead of using images. Refer: W3Schools.

Update Hover Over, Active Background Color for Home, Notification and Drop Down Menu Icons:

If you hover over the Home, Notification, Drop Down Menu icons on the right hand side of the header you will notice that the background color for those icons need to be modified for the Hover Over and Active events.

Let us add the following styles to CSK_FLUID_CSS to override the delivered style.

/* Fluid Header - Hover Over, Active Background Color for Icons (Home, Notification, Drop Down Menu) */
.ps_header_bar .ps_box-button:not(.psc_disabled) .ps-button:hover
{
  background-color: #F0EE50;
  %BP(box-shadow:none);
}
.ps_header_bar  .ps_box-button:not(.psc_disabled) .ps-button:active,
.ps_header_bar  .ps_box-button:not(.psc_disabled) .ps-button:hover:active
{
  background-color: #F0EE50;
  %BP(box-shadow:none);
}
.ps_header_bar .ps_box-button:not(.psc_disabled) .ps-button:hover
{
  background-color: #F0EE50;
  %BP(box-shadow:none);
}

Navigation:  Main Menu > PeopleTools > Portal > Branding > Branding Objects > Style Sheet (Tab)

Update the style sheet CSK_FLUID_CSS:

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 how the hover over background color for the Home icon has changed to a more desirable custom color!

Notes:

1. %BP similar to %BV is a new Meta-HTML function delivered in PT 8.54 that would expand the generic style into a browser specific style and add the browser specific prefix to the CSS property name.Refer: PeopleBooks.
2.  box-shadow is a CSS3 property that attaches one or more shadows to an element. Refer: W3Schools.

Update NavBar Icon Background and Hover Over Background Color:

We can see that the NavBar icon is still using a different background color. Let us add some styles to CSK_FLUID_CSS to override the delivered styles.

/* Fluid Header - NavBar Background Color */
.ps_header_bar .ps_actions_cont .ps_system_cont .ps_header-navbar .ps-button {
  %BV(background-image:linear-gradient(rgb(240, 238, 80),rgb(219, 204, 47)));
  %BP(box-sizing:none);
}

/* Fluid Header - NavBar Hover Over Background Color */
.ps_header_bar .ps_actions_cont .ps_system_cont .ps_header-navbar .ps-button:hover {
  background: #F0EE50;
  %BP(box-shadow:none);
}

Navigation:  Main Menu > PeopleTools > Portal > Branding > Branding Objects > Style Sheet (Tab)

Update the style sheet CSK_FLUID_CSS:

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 NavBar icon background and hover over background colors have changed.

Notes:

1. box-sizing is a CSS3 property used to tell the browser what the sizing properties (width and height) should include. Refer: W3Schools.

Update NavBar Icon Left Border:

We can see from the screenshot above that there is still a left border on the NavBar icon. Let us update CSK_FLUID_CSS to take care of this.

/* Fluid Header - NavBar Background Color and Border Left */
.ps_header_bar .ps_actions_cont .ps_system_cont .ps_header-navbar .ps-button {
  border-left: 1px solid rgb(219, 205, 48);
  %BV(background-image:linear-gradient(rgb(240, 238, 80),rgb(219, 204, 47)));
  %BP(box-sizing:none);
}

/* Fluid Header - NavBar Hover Over Background Color */
.ps_header_bar .ps_actions_cont .ps_system_cont .ps_header-navbar .ps-button:hover {
  background: #F0EE50;
  %BP(box-shadow:none);
}

Navigation:  Main Menu > PeopleTools > Portal > Branding > Branding Objects > Style Sheet (Tab)

Update the style sheet CSK_FLUID_CSS:

Test Changes:

Recommendations if you are experiencing caching issues.

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

Update the Fluid Landing Page - Background Color for the Content Portion:

Let us now try to update the background color for the content portion (area where tiles are present) by adding the following style to CSK_FLUID_CSS.

/* Fluid Landing Page - Content Portion Background Color */
#PT_LANDINGPAGE .ps_content {
  background-color: #E8E29E !important;
}

The reason why I used !important rule above (which might not be best practice) is because the delivered style also has the !important rule and the only way to override the delivered style is to use the !important rule again.

Navigation:  Main Menu > PeopleTools > Portal > Branding > Branding Objects > Style Sheet (Tab)

Update the style sheet CSK_FLUID_CSS:

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 background color of the content area has changed. But there is still a blue line (bottom header) between the Branding Header and the content area. Let us fix that in the next section.

Update Fluid Header Bottom Border:

Let us add the following style to CSK_FLUID_CSS to take care of this.

/* Fluid Landing Page - Header Border Bottom */
.ps_header_bar {
  border-bottom: 1px solid rgb(240, 238, 80);
}

Navigation:  Main Menu > PeopleTools > Portal > Branding > Branding Objects > Style Sheet (Tab)

Update the style sheet CSK_FLUID_CSS:

Test Changes:

Recommendations if you are experiencing caching issues.

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

Update Fluid Landing Page - Homepage Drop Down Text Color:

Let us now add the following style to update the color of the Homepage Drop Down text color.

/* Fluid Landing Page - Homepage Drop Down Text Color */
.nuihdr_hpbtn > span > a > span.ps-text {
  color: #1d418c;
}

Navigation:  Main Menu > PeopleTools > Portal > Branding > Branding Objects > Style Sheet (Tab)

Update the style sheet CSK_FLUID_CSS:

Test Changes:

Recommendations if you are experiencing caching issues.

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

Update Fluid Landing Page - Footer Background Color:

/* Fluid Landing Page - Footer Background Color */
.lpfooter {
  background-color: transparent;
  background: rgba(216, 206, 93, 0.8);
}

Navigation:  Main Menu > PeopleTools > Portal > Branding > Branding Objects > Style Sheet (Tab)

Update the style sheet CSK_FLUID_CSS:

Test Changes:

Recommendations if you are experiencing caching issues.

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

Notes:

1. rbga is a new feature in CSS3 where 'a' parameter/property stands for alpha. It allows us to specify the opacity of the color. Refer: W3Schools. You can see that the footer background color is slightly transparent because the alpha property is set to 0.8.

Update Fluid Landing Page - Footer Dot Styling:

/* Fluid Landing Page - Footer Dot Styling */
.lpfooter .dot.on {
  background: #EEEB4D;
}
.lpfooter .dot {
  background: #E8E29E;
  border: 2px solid #1d418c;
}

Navigation:  Main Menu > PeopleTools > Portal > Branding > Branding Objects > Style Sheet (Tab)

Update the style sheet CSK_FLUID_CSS:

Test Changes:

Recommendations if you are experiencing caching issues.

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

Update Fluid Homepage - Icons:

You can see that there are several icons on the Fluid Homepage - Home, Notification, Drop-Down Action Menu (hamburger icon), NavBar, Homepage Selection Drop-Down Arrow and Footer Refresh - that don't seem to share the same theme as that of our custom CSK theme.

Let us see how we can update these icons to be consistent with our custom theme.

Home Icon:

The home icon is generated by the page field PT_WORK.PT_BUTTON_HOME (Header Page: PT_HEADERPAGE) as part of the Push Button > Label Image Property.

You will notice that the image PT_HEADER_HOME is actually in SVG format. As I have previously mentioned, I am really excited at the prospects of using SVG images. One of the primary reasons aside from the general benefits of using scalable images in RWD is that I find it extremely easy to modify them using a text editor. Previously, modifying images for Branding would require a significant effort and involves using image editing tools such as Photoshop.

To take a look at the image, export the object PT_HEADER_HOME from App Designer (File > Export Image) to your computer and then open the image in a text editor. You will see the following XML:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="25px" height="25px" viewBox="0 0 25 25" enable-background="new 0 0 25 25" xml:space="preserve">
<g>
    <path opacity="0.35" fill="#231F20" d="M22.3,15.3l-9.8-9.8l-9.8,9.8L0,12.7L12.5,0.2L25,12.7L22.3,15.3z M2,12.7l0.7,0.7l9.8-9.8
        l9.8,9.8l0.7-0.7L12.5,2.1L2,12.7z"/>
    <path opacity="0.35" fill="#231F20" d="M21.3,24.8h-6.9v-5h-3.9v5H3.7V14.4l8.8-8.8l8.8,8.8V24.8z M15.8,23.5H20v-9.1l-7.5-7.3
        l-7.5,7.3v9.1h4.1v-5h6.6V23.5z"/>
    <polygon fill="#FFFFFF" points="12.5,4.5 22.3,14.3 24,12.7 12.5,1.1 1,12.7 2.7,14.3     "/>
    <polygon fill="#FFFFFF" points="12.5,6.1 4.4,14.1 4.4,24.1 9.9,24.1 9.9,19.2 15.1,19.2 15.1,24.1 20.6,24.1 20.6,14.1     "/>
</g>
</svg>

Replace #FFFFFF (Hex for White - delivered home icon color) to #1d418c (desired custom color) and save the file as CSK_HEADER_HOME (custom home icon).

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="25px" height="25px" viewBox="0 0 25 25" enable-background="new 0 0 25 25" xml:space="preserve">
<g>
    <path opacity="0.35" fill="#231F20" d="M22.3,15.3l-9.8-9.8l-9.8,9.8L0,12.7L12.5,0.2L25,12.7L22.3,15.3z M2,12.7l0.7,0.7l9.8-9.8
        l9.8,9.8l0.7-0.7L12.5,2.1L2,12.7z"/>
    <path opacity="0.35" fill="#231F20" d="M21.3,24.8h-6.9v-5h-3.9v5H3.7V14.4l8.8-8.8l8.8,8.8V24.8z M15.8,23.5H20v-9.1l-7.5-7.3
        l-7.5,7.3v9.1h4.1v-5h6.6V23.5z"/>
    <polygon fill="#1d418c" points="12.5,4.5 22.3,14.3 24,12.7 12.5,1.1 1,12.7 2.7,14.3     "/>
    <polygon fill="#1d418c" points="12.5,6.1 4.4,14.1 4.4,24.1 9.9,24.1 9.9,19.2 15.1,19.2 15.1,24.1 20.6,24.1 20.6,14.1     "/>
</g>
</svg>

Now I have my own CSK Home icon. Here is how it looks when I open the image (use any browser).

You can see how easy it is to modify the image. Now let us update PT_WORK.PT_BUTTON_HOME page to reference this custom SVG image.

Test Changes:

Recommendations if you are experiencing caching issues.

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

Notification, Drop-Down Action Menu (Hamburger) and NavBar Icons:

Similarly, we can clone the following delivered SVG images:

Notification: PT_HEADER_ALERTS > CSK_HEADER_ALERTS
Action Menu: PT_HEADER_ACTIONS > CSK_HEADER_ACTIONS
NavBar: PT_HEADER_NAVBAR > CSK_HEADER_NAVBAR

Update page field PT_WORK.PT_BUTTON_NOTIFY (Header Page: PT_HEADERPAGE) to replace PT_HEADER_ALERTS with CSK_HEADER_ALERTS.

Update page field PTLAYOUT.HEADER_ACTIONGROUP (Subpage: PT_HEADER_ACTION) to replace PT_HEADER_ACTIONS with CSK_HEADER_ACTIONS.

Update page field PT_WORK.PT_BUTTON_NAVBAR (Header Page: PT_HEADERPAGE) to replace PT_HEADER_NAVBAR with CSK_HEADER_NAVBAR.

Test Changes:

Recommendations if you are experiencing caching issues.

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

Homepage Selection Drop-Down Arrow Icon:

The Fluid homepage selection drop-down arrow icon is generated by the page field PTNUI_LAND_WRK.GROUPBOX14 (Subpage: PTNUI_SELLP_POP) as part of the Group Box Use Properties > Display Options > Label Image for Collaped State.

We can see that PTNUI_DOWN_ARW image is a PNG. To keep all the icon image formats consistent I decided to use a SVG image for all the custom icons. I found a Down Arrow SVG image online which has the following XML:

<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="14px" height="10px" viewBox="0 0 404.308 404.309" style="enable-background:new 0 0 404.308 404.309;"
     xml:space="preserve" fill="#1d418c">
<g>
    <path d="M0,101.08h404.308L202.151,303.229L0,101.08z"/>
</g>
</svg>

Let us save this image as CSK_NUI_DOWN_ARW.SVG and update the page PTNUI_SELLP_POP to reference it.

Test Changes:

Recommendations if you are experiencing caching issues.

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

Homepage Footer Refresh Icon:

The Fluid homepage footer refresh icon is generated by page field PTNUI_LP_FOOTER.REFRESH_BTN (Footer Page: PTNUI_LP_FOOTER) as part of the Push Button/Hyperlink > Label Image property.

PTNUI_REFRESH_ICN is also in PNG format as delivered. I found a refresh icon SVG image online with the following XML:

<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="23px" height="35px" viewBox="0 0 408 408" style="enable-background:new 0 0 408 408;" xml:space="preserve" fill="#1d418c">
<g>
    <g id="refresh">
        <path d="M346.8,61.2C311.1,22.95,260.1,0,204,0C91.8,0,0,91.8,0,204s91.8,204,204,204c94.35,0,173.4-66.3,196.35-153H346.8
            C326.4,313.65,270.3,357,204,357c-84.15,0-153-68.85-153-153c0-84.15,68.85-153,153-153c43.35,0,79.05,17.85,107.1,45.9
            l-81.6,81.6H408V0L346.8,61.2z"/>
    </g>
</g>
</svg>

Let us save this image as CSK_NUI_REFRESH_ICN.SVG and update the page PTNUI_LP_FOOTER to reference it.

Test Changes:

Recommendations if you are experiencing caching issues.

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

Now our Fluid Homepage has a completely custom look and feel. Let us take a look at any Fluid Content Page (e.g.: My Team under Manager Self Service) to make sure that the theme is consistent.

We can see that there is still a little bit more work to be done on the Fluid Content Page Header.

Fluid Content Page - Title Text Color:

Let us add some additional styles to CSK_FLUID_CSS style sheet to address the page title text color.

/* Fluid Content Page(s) - Page Title Text Color */
.ps_header-banner, .ps_header_bar {
  color: #1d418c;
}

Navigation:  Main Menu > PeopleTools > Portal > Branding > Branding Objects > Style Sheet (Tab)

Update the style sheet CSK_FLUID_CSS:

Test Changes:

Recommendations if you are experiencing caching issues.

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

Now the only thing that looks a bit odd is the 'Return to Homepage' Button on the Fluid Content Page. We will try to fix the look and feel of this button in the next section.

Fluid Content Page - 'Return to Homepage' Button:

The Return button on the Fluid content pages is a combination of an image, text and push button/hyperlink styling.

Update Image:

Let us first update the image which is generated by the page field PT_WORK.PT_BUTTON_BACK (Subpage: PT_HEADERPAGE) as part of Push Button/Hyperlink > Label Image Property.

PT_NUI_BACK_PRIM_IMG is delivered in SVG format. We can update the XML of this SVG as appropriate:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="18px" height="18px" viewBox="0 0 18 18" enable-background="new 0 0 18 18" xml:space="preserve">
<g>
    <path fill="#F0EC12" d="M9,17.5c-4.7,0-8.5-3.8-8.5-8.5c0-4.7,3.8-8.5,8.5-8.5c4.7,0,8.5,3.8,8.5,8.5C17.5,13.7,13.7,17.5,9,17.5z"
        />
    <path fill="#F2EE29" d="M9,1c4.4,0,8,3.6,8,8s-3.6,8-8,8s-8-3.6-8-8S4.6,1,9,1 M9,0C4,0,0,4,0,9s4,9,9,9s9-4,9-9S14,0,9,0L9,0z"/>
</g>
<polygon fill="#1d418c" points="7.8,9 11.6,5.1 9.9,3.5 4.3,9 9.9,14.5 11.7,12.9 "/>
</svg>

Save the image as CSK_NUI_BACK_PRIM_IMG.SVG.

Update the page PT_HEADERPAGE to reference the custom image.

Test Changes:

Recommendations if you are experiencing caching issues.

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

Another test with lesser real estate on the page causing the image to scale (RWD styling).

Update CSS:

Finally, let us see how we can apply some style overrides on the 'Return to Home' button.

/* Fluid Content Page(s) - Return Button */
.ps_box-button.ps_button_backnav .ps-button,
.ps_box-button.ps_button_backnav .ps-button:link,
.ps_box-button.ps_button_backnav .ps-button:not(.psc_disabled) .ps-button:hover,
.ps_box-button.ps_button_stdheader .ps-button,
.ps_box-button.ps_button_stdheader .ps-button:link,
.ps_box-button.ps_button_stdheader .ps-button:not(.psc_disabled) .ps-button:hover {
  font-size: 0.95em;
  box-shadow: inset 0 1px 0 0 #CBD015;
  padding: 0.6em 1em 0.6em 0.5em;
  border: 1px solid #F2EE29;
  border-bottom-color: #F0EC12;
  background-image: linear-gradient(rgb(240, 238, 80),rgb(219, 204, 47));
  text-align: left;
  display: inline-block;
}

.ps_header_bar .ps_box-button .ps-button, .ps_header_bar .ps_box-button .ps-button:link, .ps_header_bar .ps_box-button .ps-button:hover {
  color: #1d418c;
  font-size: 0.95em;
}

.ps_box-button.ps_button_backnav:not(.psc_disabled) .ps-button:hover,
.ps_box-button.ps_button_stdheader:not(.psc_disabled) .ps-button:hover
{
  background-color: #F0EE50;
  %BP(box-shadow:none);
  background-image: none;
  border-color: none;
  border-image: none;
  border-style: none;
  border-width: none;
  color: #1d418c;
}

.ps_box-button.ps_button_backnav:not(.psc_disabled) .ps-button:active,
.ps_box-button.ps_button_backnav:not(.psc_disabled) .ps-button:hover:active,
.ps_box-button.ps_button_stdheader:not(.psc_disabled) .ps-button:active,
.ps_box-button.ps_button_stdheader:not(.psc_disabled) .ps-button:hover:active
{
  background-color: #F0EE50;
  %BP(box-shadow:none);
  background-image: none;
  border-color: none;
  border-image: none;
  border-style: none;
  border-width: none;
  color: #1d418c;
}

The above CSS was identified as the styles that were affecting the 'Return to Home' button on the Fluid Content Page(s).

Update the style sheet CSK_FLUID_CSS:

Test Changes:

Recommendations if you are experiencing caching issues.

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

Return Button:

Return Button Hover Action Style:

Return Button with page width less that 680 px (testing Responsive Styling):

We can see that although the button styling looks good for the original size and hover over action, it looks out of place for the responsive styling (smaller screen width). Let us see how we can fix this issue using some additional responsive styling.

Update CSS further:

@media only screen and  (max-width: 680px) {
    .ps_header_bar .psc_hide-BP3 { display: none !important; }
    .ps_menutype-act .psc_show-BP3:not(.psc_hidden) { display: block; }
    .ps_header_bar .ps_button_backnav > .ps-button-wrapper > .ps-button > .ps-text {
      display:none !important;
    }
    .ps_header_bar .ps_button_backnav > .ps-button-wrapper > .ps-button > .ps-img {
      max-height:none !important;
      height:1.8em;
      width:1.8em;
      padding:0;
    }
    .ps_header_bar .ps_button_backnav > .ps-button-wrapper > .ps-button {
      padding:0.4em;
    }
    .ps_header_bar  .ps_pagetitle > .ps-text { /*01A - Added for banner changes only */
        max-width:49vw;
      }
}

I found the above RWD related CSS in the delivered style sheet PSSTYLEDEF_FMODE. This seems to be controlling the background, background image scaling and text of the 'Return to Home' push button. So I included this in the custom CSK_FLUID_CSS to make sure that our custom style sheet is not inadvertently overriding the delivered style.

Update the style sheet CSK_FLUID_CSS:

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 from the screenshot that the 'Return to Home' button is responsive to the screen width (less that 680 px).

This concludes Part 5A - Fluid Branding. I think we covered several Fluid Branding topics that should provide a good initial introduction and help us personalize and further customize the Fluid UI as per our own requirements.

Thanks for reading this article and as always I welcome all feedback and/or questions. Please feel free to let me know if anything stated in this post can be done in a better way!

I intend to follow up this post with other additional Fluid UI Branding and Customization techniques. Stay tuned for Part 5B!

Updated on April 18th, 2016:
Please review my related posts on PeopleTools Fluid Branding:
PeopleTools 8.54+ - Branding - Part 5B - Fluid Branding
PeopleTools 8.54+ - Branding - Part 5C - Fluid Branding
PeopleTools 8.54+ - Branding - Part 5D - Fluid Branding

PeopleTools 8.55.x:
PeopleTools 8.55.x Branding - What has changed?
PeopleTools 8.55.x Branding - Part II
PeopleTools 8.55.x Branding - Part III - Custom Macros and More