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:
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:
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:
- Classic Branding and Fluid Branding are completely different and mutually exclusive.
- 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.
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:
- 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.
- 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.
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:
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.
Notes:
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.
You can see how the hover over background color for the Home icon has changed to a more desirable custom color!
Notes:
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.
We can see that the NavBar icon background and hover over background colors have changed.
Notes:
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.
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.
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.
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.
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.
Notes:
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.
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.
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.
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.
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.
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.
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.
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.
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.
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
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.
- Clear local browser cache.
- 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:
- 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/
- 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.
- Clear local browser cache.
- Shutdown, purge and reboot the web server(s).
Notes:
- %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.
- 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.
- Clear local browser cache.
- 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:
- %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.
- 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.
- Clear local browser cache.
- Shutdown, purge and reboot the web server(s).
We can see that the NavBar icon background and hover over background colors have changed.
Notes:
- 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.
- Clear local browser cache.
- 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.
- Clear local browser cache.
- 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.
- Clear local browser cache.
- 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.
- Clear local browser cache.
- 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.
- Clear local browser cache.
- Shutdown, purge and reboot the web server(s).
Notes:
- 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.
- Clear local browser cache.
- 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:
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.
- Clear local browser cache.
- 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.
- Clear local browser cache.
- 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.
- Clear local browser cache.
- 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.
- Clear local browser cache.
- 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.
- Clear local browser cache.
- 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.
- Clear local browser cache.
- 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.
- Clear local browser cache.
- 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.
- Clear local browser cache.
- 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
Hi Sasank,
ReplyDeleteGreat article, thanks! Very interesting insight on override the FLUID UI via the front end. Have you had any more thought about doing these overrides on a less global level? We end up overriding bits and pieces for lay out issues and specific pages and do that via app designer but would be nice if we could move that to the front end.
Kind regards,
Ernst
Hi Ernst,
ReplyDeleteHow are you? Good to hear from you! Thanks for your feedback. Much appreciated! :)
Great question. I have not looked into that for Fluid yet. But I wanted to experiment a little more on some related topics. You might know this already. There is an additional configuration where we can override theme style sheets at a node level for Fluid (refer Assemble Themes Page - Fluid Section - Theme Style Sheet Mappings). I am interested in exploring this for some targeted branding. Will let you know when I find out more.
Also, we could try to use component level branding (new in 8.54) that allows us to override styles only on a component without having to customize (via the front end) and without affecting global styles. Have you tried looking into that for fluid page specific layout changes to avoid customizations?
Here is an example where I tried this on a Classic Page/Component. I am hoping it would work the same for Fluid as well (if not we might all benefit from a feature like that!).
http://pe0ples0ft.blogspot.com/2015/01/peopletools-854-component-branding.html
Thanks,
Sasank
Hey Sasank... You have really done a GREAT job.. This article is very useful especially for those who are new to Fluid pages and start working on the Branding part.. Appreciate it a lot... All your articles on branding are Fantastic!!!
ReplyDeleteThanks,
Muthukumaran M R
@Muthukumaran - Thanks for the feedback! :)
DeleteIn PeopleTools 8.54, there is a delivered html file called "signin_fmode.html" for mobile signin page. I understand that the purpose of this new html is for having two different login pages for mobile and laptop devices and this html is displayed when we add an additional query string "&fmode=1" along with the signin URL. But my question is how can we render the respective html pages automatically based on the device used to login with single URL. Because we can't provide PeopleSoft users two different login URLs (one with fmode=1 and another one without it) for different devices. Will the automatic redirection to fluid signin page when we use mobile device to login happen or do we need to add any custom stuff to achieve this?
ReplyDeleteMuthu Kumaran,
DeleteGreat question! I recently ran into this problem as well.
If you look into the actual HTML files signin.html and sign_fmode.html that reside under:
{PS_HOME}/webserv/{YOUR_DOMAIN_NAME}/applications/peoplesoft/PORTAL.war/WEB-INF/psftdocs/{YOUR_DOMAIN_NAME}/
You will notice that both files are almost identical except for some carriage returns and commenting. Also, both pages are responsive. So it does not really matter if you are using Fluid or Classic.
After reviewing the following Doc IDs on My Oracle Support, it seems to me that it is a bug and the signin_fmode.html file was accidentally placed by development.
E-FLUID: Fluid HomePage Sign Off Link Calls fmode=1 in URL, Skips Custom signout.html Page (Doc ID 2001761.1)
E-PIA: Web Profile/Expire Page (expire.html) Contains "&fmode=1" In The 'Sign In To PeopleSoft' Link (Doc ID 1995386.1)
I went ahead and applied all customizations on the signin.html to sign_fmode.html so that both files are consistent (until a fix is provided).
You don't need to provide the users two different URLs. Just use the cmd=login URL without the fmode parameter.
E.g.: http://pi012.hcm92.com:8000/psp/ps/?cmd=login
Hope this helps. Thanks!
Thanks for your quick reply Sasank!
DeleteThis information is really useful for me. I believe your sign page has the same look and feel and content details for all devices irrespective of the type and size. In that case, as you said the fluid or classic mode doesn’t matter. Basically our login page contains lots of customized things, many information to show. So the requirement is like there should be different login pages for laptop/desktop and other smaller form factor devices. In laptop we would show all the information as it is now, but for smaller devices we are going to create a new layout suitable for those displays with less information. That’s where we face the challenge in identifying the device type and render respective login pages. Anyway which page (fluid or classic landing page) to display after login depends on the user’s personalization settings.
I shall post the updates if I found any appropriate approach.
Muthu Kumaran,
DeleteI see where you are going with this. It is very interesting!
That would be considered a custom requirement, so I am not sure if there is going to be a delivered approach for solving your requirement.
That said, you might want to keep the following in mind:
- It is not possible to use the user personalization for unauthenticated content. When displaying the login page you would not be able to make a determination based on the user personalization because the user is not logged in yet.
- Alternatively, you can design your own (custom) responsive login pages using CSS media queries. The responsive login page would display appropriate information based on the device type.
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
Let us know how it goes. :)
Thanks,
Sasank
This comment has been removed by the author.
ReplyDeleteHi Sasank,
ReplyDeleteThis blog entry is very timely as I am currently working on a POC to include %UserId in the Sign Out link on the Fluid header.
Using Classic branding (with a Fluid header), I could just clone the SignOutLink class, override the Label property, define this new class as a new element type, and replace the old Sign Out link in the DEFAULT_HEADER_FLUID element hierarchy with this new one.
However, as you pointed out, I also can't seem to find any means of doing the same thing using Fluid branding without tinkering with the delivered PeopleTools code in PT_HEADERPAGE. If the Tools team suddenly decides to change the page Activate code, my changes won't hold up and I'd have to reapply them.
I'm very keen in knowing whether you've made any headway on your research into Fluid branding without customizing objects via App Designer. Would love to hear from you!
Andrei,
ReplyDeleteThanks for the feedback!
I have not found an easy way to avoid customizations for Fluid Branding in 8.54. But I am waiting to see the features in 8.55 for Fluid Branding. I read that there are several enhancements to the Fluid Branding in 8.55 so I am looking forward to that release.
For your requirement, right now I don't see an easy way to avoid a customization.
With regards to customizing the Page Activate PeopleCode, the object should show up in the compare reports in any future upgrades. So I don't see it as an issue of missing/losing customizations. At a point of a future upgrade, it would be a good idea to evaluate if the customization is still required.
With that said, I have not found the time yet to follow up this post with another one that details a few more advanced branding topics for Fluid. Hoping to work on it soon! :)
Thanks,
Sasank
Hi Sasank,
ReplyDeletethanks a lot for your branding articles.
We have changed our fluid branding following this article. But every now and then we see our fluid page render in the PS default style before switching to the branded design. I expected it to be a network bandwith problem in a way that the customized css gets loaded delayed but I couldn't reproduc the behaviour by reducing the bandwith in chrome developer tools.
Do you have an idea how to avoid that effect? Otherwise I would switch back to the old way of cloning the PS delivered style sheet and customize that directly in AppDesigner.
Regards,
Ralf
Hi Ralf - Good question. I am interested to hear if others are having similar issues. I have not seen this problem with regards to overriding CSS (CSS has always performed without any issues for me). But I have seen this issue occasionally with image overrides such as logos, icon images and particularly with tile icon images (part of Portal Structure and Content - Fluid Attributes).
DeleteI may be wrong but I don't believe this issue is related to the bandwidth. I believe it is related to caching at the web server layer. I have seen performance improvements with this as cache builds up. So give that a try and check if your poor performance aligns with purging of web server cache.
Also, if you are considering cloning and replacing styles you may still run into the issue of cascading styles unless you actually replace (customize) the styles on the delivered objects (which is not generally recommended).
Let us know how it goes! Thanks!
Hi Sasank,
ReplyDeleteDo you know the differences between styles delivered with FLUID interface that start with ps_ and psc_?
Thanks Venkat
Hi Venkat - Great question. I never really paid much attention to the naming convention of these styles. I don't know what the significance of ps_ and psc_. I will try to find out and let you know if I stumble on anything useful.
DeleteI saw your question on the OTN - MOSC forums. I am hoping someone from Oracle will answer your question.
Also, what is the reason you are trying to understand the naming convention? Just curious because there is a style guide that details the individual styles for Fluid and what they mean. But there is no information on naming convention.
Refer MOS Document: FLUID UI: PeopleSoft Fluid User Interface Documentation Updates (Doc ID 1909955.1)
I should clarify. I meant I don't know the significance of ps_ and psc_ in ther context of styles.
DeletePSC generally refers to the Portal - Content Servlet. So, if I have to take a wild guess, I would assume psc_ in styles may refer something to do with the content/page area as opposed to the header/footer?
Thanks Sasank for the response. I was looking at the style guide, that is when i saw the styles that start with PS_ & PSC_. Got curious about naming convention. Not a big deal, but just curious what is behind the naming convention. I was also guessing that PSC is something related to content. Will see anyone from Oracle would respond. By the way great blog you have here going. Just stumbled upon it last week when i was searching for PS fluid. Keep up the good work.
ReplyDeleteVenkat
Hi Sasank and All,
ReplyDeleteI am developing a fluid page in peopletools 8.55 and application is 9.2. I have to create a train progress tracker at the top of the page.It is exactly same as in delivered classical'consume web services' page(peopletools>Integration broker > Web service > Consume web service)
Every circle is a individual pushbutton with image icon.As i can't attached the screen-shot so i am explaining in below manner :
(1)--(2)--(3)--(4) like this here (1) is a circle with 1 and -- is straight line. I hope u understand what i am trying to achieve it.
Thing is that i have copied the images and create a separate fluid page/component but image is showing scattered in PIA . icons are not connecting at all. It is showing in below manner :
(1) --(2) --(3) --(4)
I have tried to override the default peopletools style sheet and try to connect image by writing 'PS_Padding-none' in default style field of fluid property page of pushbutton but it is not working.
Can you please help me in this regards that how to connect these as same in classical page.
One more question , if i have to give two style additionally then how would i write in fluid property page. I tried to write "psc_auto_size,psc_padding‐none" separated by comma(,) but it is not working.
Thanks in advance
Hi Ankur - I understand what you are trying to achieve.
DeleteFirstly, if you want to add more than one style at the Fluid Page Field level then you can do that by simply separating them by a space.
E.g.: psc_margin-none ps_ag-step-seqnum
With regards to getting the train stop to work in a Fluid page, I think this functionality already exists in the form of Fluid Activity Guides. There is a good example in HCM 9.2 PUM Image 17. Manager Self Service > My Team > Go to the Analytics Tab and click on the Related Actions for any employee > Job and Personal Information > Promote Employee.
You can use that as a sample. Take a look at this page, PTGP_SP_STEPSTOP, and see if you can clone or just create your own Fluid Activity Guide.
Hope this gives you some ideas. Let us know how it goes!
You are awesome!!!
ReplyDeleteThanks for such a detailed article Sasank! it us truly helpful.
ReplyDeleteI have a very basic q for you. I am looking at our HCM 9.2 Demo environment on 8.54. Not sure who turned on fluid but I want the reverse. I want to see the classic home with ESS . How can i revert back to the classic home, classic ESS pages etc?
Hi Sandhya - If you want to revert back to Classic (that is disable Fluid) in a 8.54 environment, then you can configure that on your web profile.
Deletehttp://docs.oracle.com/cd/E58500_01/pt854pbh1/eng/pt/tflu/task_ConfiguringFluidModeWebProfileSettings.html#u699efe93-366d-4cbf-a34e-68cd1fe040fa
Just make sure the 'Disable Fluid Mode' and 'Disable Fluid On Desktop' properties are selected as desired. Then once you make the change, you will need to also bounce your web server. Hope this helps. Thanks!
Thank you! that resolved it. :)
ReplyDeleteGlad that helped. :)
DeleteHi Sasank,
ReplyDeleteI have used your articles with our PT8.54 upgrade last year and I am thankful for your good insight and helpful instructions. We are currently upgrading to PT8.55 (on Campus Solutions 9.0) and adopting the fluid theme. I have a question about changing out the logo. I am the one who did it for our product in 8.54 and I see that it is different in 8.55 fluid (just like you said). But I'm looking at your instructions above about opening page PTNUI_LP_HEADER. The field PTNUI_LOGO in your screenshots show a Field Type of pushbutton hyperlink. In our upgraded system that field is a Static Image and is blank. Am I missing something? It isn't clear to me if I am supposed to change the field type from "static image" to a "pushbutton/hyperlink" before continuing with your below steps (yikes! Help!). Thanks.
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
Hi Carmen - Glad you found the 8.54 steps useful.
DeleteWith 8.55, I suggest that you use the Macrosets that was delivered as an enhancement for 8.55.
Here is a blog post where I describe the steps to update the logo in 8.55:
https://pe0ples0ft.blogspot.com/2016/03/peopletools-855x-branding-part-i-what.html
There is also a spotlight series video that explains this at a high level:
https://www.youtube.com/watch?v=DECiaeogXyE
I think you should review the above prior to going to deep with the 8.54 approach (specifically for Fluid). Rather follow my 8.55 blog series!
Thanks,
Sasank
Hi Sasank,
ReplyDeleteHow do I get the Peoplesoft fluid page to auto refresh using a Java Script.
I do have the Java Script which works perfectly fine when used on a classic page but the same thing doesn't work when I use it on fluid page.
I'm able to launch a third party page using Java Script but my Peoplesoft page should still be waiting to get a response back a keep on refreshing till a valid response comes.
Showing the snippet from my Code below:
Using the AddJavaScript function in peoplecode to add the HTML object having JS.
Then calling the specific function of JavaScript using the AddOnLoadScript
if (blnChecker != 0 )
{
//setTimeout("SubmitRefresh('"+sPageName+",'"+sDQ+"')", 2000);
//setTimeout("SubmitRefresh(\'"+sPageName+"\',"+ sDQ+")",2000);
setTimeout(SubmitRefresh, 2000, sPageName, sDQ);
}
if(cnt == 0)
{
document.addEventListener('load' ,Execute(sIntTransID, sAmount, sEncrypted_id, sNewurlloc,cnt));
var xelements = document.cookie.split('=');
for (var x = 0; x < xelements.length; x++)
{
if (x==2)
{
cnt = xelements[x].substring(0,1);
}
}
}
}
function SubmitRefresh(s1PageName, s1DQ)
{
var form = document.%FormName;
var actionName = '%SubmitScriptName';
var fldVal=s1PageName;
var evalparam=actionName + s1DQ+"('"+form+"','" +fldVal+"')" +s1DQ ;
eval(evalparam);
}
Hi Avi - I am not entirely sure how that will work in Fluid.
DeleteAre you waiting on a web service all from a third party or waiting on the third party page to load?
Hi Sasank,
DeleteOn the Page activate the Java Script is getting executed and a third party page is opened for payment, and Peoplesoft page should be refreshing until the third party payment is done.
Response from third party is coming as a URL to execute an IScript will will trigger some code and also load the subsequent page which shows that Payment was successful or not with the relevant details.
Instead of constantly refreshing the page (for the response), you could check with your third party payment system if they could redirect to the IScript URL.
DeleteI have worked on third party payments before (in Classic) and it generally works based on browser redirects (and perhaps server to server messaging for validation/confirmation). That is, PeopleSoft redirects to third party, then once payment is completed, third party redirects back to PeopleSoft.
Yeah, that's exactly what I'm trying to do and it's working in the similar fashion in classic mode.
DeleteHowever when the same thing is tried on fluid it doesn't work, although in logs I can see the Return URL from Third Party which is to call the Peoplesoft IScript.
When I manually try to open that URL in the browser it doesn't bring back to Peoplesoft page. But same thing if I do on custom, it bring me back to Payment Result page showing the respective message whether Successful or Unsuccessful.
Is there something which doesn't work on fluid. All I'm doing is executing same Java Script as it was in Custom and the respective functions are also getting executed which I verified using "Alert();"
I also observed that eval function under SubmitRefresh function is trying to execute the below as a parameter.
Delete"submitAction_win20\"('[object HTMLFormElement]','#ICSetFieldMYPAGENAME.MYFIELDNAME.A')\""
And if I turn on the Developer option then I do see an Error under Console tab stating "Expected ';'"
Do you see any mistake in the above? I think it's going inside the function but not executing the eval
You may want to add some messages using console.log in your code and try to log the evalparam variable. It may be possible that it is not a valid statement (perhaps missing '; or something else).
DeleteHi Sasank,
ReplyDeleteI have been following your Blog Posts on PeopleTools Branding since long i.e. for other tools version also.Appreciate you work and pointing out the steps in detail which makes it cakewalk for other's who are making/planning to make such changes.
@Bhavesh - Glad to hear that the blog posts are helpful! :)
DeleteGreat Post! Is it possible to hide 'Home' and 'Hamburger' Icon for specific user?
ReplyDeleteYou may have to write some PeopleCode since it appears that you want to hide it conditionally.
DeleteHI Sasank,
ReplyDeleteI need to keep EDIt link(push button) end of NAME field value.But EDIT link is not even aligned properly and tried using Psc_float right or psc_halign as well.Exactly EDIt link should render end of the value or starting of the NAME field.Eg: Name : Rohan(EDIT link).
Hi Sasank,
ReplyDeleteThank you so much for this! Very helpful. Question on the Fluid Logo - I updated it as you suggested and it looks fabulous. However, when I go into Personalize Homepage, the logo actually now hides the Cancel button. I'm not sure why this happens with our custom logo and not the Oracle logo. Have you run into this?
Rachel