Monday, April 18, 2016

PeopleTools 8.55.x - Branding - Part II

This is a continuation of my previous post where I detailed some of the new Branding features and configuration options available in PeopleTools 8.55. This post is intended to provide guidelines for accomplishing some common Branding tasks in PeopleTools 8.55. You will notice that majority of the tasks would only require simple configuration changes as opposed to making customizations or even writing many custom styles (Branding - Part 5A - describes the steps involved in Branding Fluid applications in PeopleTools 8.54). There are also reference links on the following tasks to compare with the effort involved in 8.54. This might be quite lengthy but hopefully you will find the steps useful!

Changing the Header Background Color:

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

Select the custom Theme Macro Set to override PT_BANNER_BACKGROUND_IMAGE macro with an appropriate linear-gradient.


Results:



Steps in 8.54: Click here.

Changing the Hover Over and Active Background Color for the Home, Notifications and Action Menu Icons:

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

Select the custom Theme Macro Set and override the following macros:
PT_BANNER_BUTTON_BACKGROUND_COLOR_ACTIVE
PT_BANNER_BUTTON_BOXSHADOW
PT_BANNER_BUTTON_BOXSHADOW_ACTIVE
PT_BANNER_BUTTON_TRUE_BG_COLOR_HOVER
PT_BANNER_BUTTON_TRUE_BXSHADOW_ACTIVE
PT_BANNER_BUTTON_TRUE_BXSHADOW_HOVER

Note: In my case, I set the box shadow color to be the same since I did not need a box shadow. You can adjust these macros as per your requirements.


Results:



Steps in 8.54: Click here.

Changing the Background and Hover Over Color for the NavBar Icon:

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

Select the custom Theme Macro Set and override the following macros:
PT_BANNER_NAVBAR_BACKGROUND_ACTIVE
PT_BANNER_NAVBAR_BACKGROUND_HOVER
PT_BANNER_NAVBAR_BACKGROUND_IMAGE
PT_BANNER_NAVBAR_BOXSHADOW


Results:



Steps in 8.54: Click here.

Changing the Left Border for the NavBar Icon:

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

Select the custom Theme Macro Set and override the following macros:
PT_BANNER_NAVBAR_SIDE_BORDER_COLOR


Results:


Steps in 8.54: Click here.

Changing the Background Color of the Fluid Landing Page - Tile Area:

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

Select the custom Theme Macro Set and override the following macros:
PT_HOMEPAGE_BACKGROUND


Results:


Steps in 8.54: Click here.

Changing the Branding Header - Bottom Border:

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

Select the custom Theme Macro Set and override the following macros:
PT_BANNER_BORDER_COLOR
PT_HOMEPAGE_BANNER_BORDER_COLOR


Results:



Steps in 8.54: Click here.

Changing the Fluid Homepage Title Selector Text Color:

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

Select the custom Theme Macro Set and override the following macros:
PT_HOMEPAGE_TITLE_SELECTOR_TEXT_COLOR


Results:


Steps in 8.54: Click here.

Changing the Background Color on the Fluid Landing Page Footer:

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

Select the custom Theme Macro Set and override the following macros:
PT_HOMEPAGE_FOOTER_BACKGROUND


Results:


Steps in 8.54: Click here.

Changing the Icons on the Header and Footer:

Let us use the following custom images for overriding the delivered icons:

Home: PT_HEADER_HOME > CSK_HEADER_HOME
Notification: PT_HEADER_ALERTS > CSK_HEADER_ALERTS
Search: PT_HEADER_SEARCH > CSK_HEADER_SEARCH
Actions List: PT_HEADER_ACTIONS > CSK_HEADER_ACTIONS
NavBar: PT_HEADER_NAVBAR > CSK_HEADER_NAVBAR
Homepage Selection Drop-Down: PTNUI_DOWN_ARW > CSK_NUI_DOWN_ARW
Refresh: PTNUI_REFRESH_ICN > CSK_NUI_REFRESH_ICN


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

Select the custom Theme Macro Set and override the following macros:
PT_BANNER_HOME_IMAGE
PT_BANNER_NOTIFY_IMAGE
PT_BANNER_SEARCH_IMAGE
PT_BANNER_ACTIONLIST_IMAGE
PT_BANNER_NAVBAR_IMAGE
PT_TITLE_SELECTOR_IMAGE
PT_HOMEPAGE_REFRESH_IMAGE


Results:



Steps in 8.54: Click here.

Changing the color of the Content Page Title Text:

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

Select the custom Theme Macro Set and override the following macros:
PT_BANNER_TEXT_COLOR


Results:

Note: This change only works for Fluid Page and does not override the Classic Page Titles.



To update the title text color on Classic pages, make the following style sheet overrides using the custom Classic - Theme Style Sheet - CSK_BRAND_CLASSIC_TEMPL_FLUID (Click here for more details).

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

Edit CSK_BRAND_CLASSIC_TEMPL_FLUID and set color to rgba(29,65,140, 0.95) for pthdr2pagetitle selector.


Results:


Steps in 8.54: Click here.

Changing the Icon and Styling on the 'Back' Button:

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

Select the custom Theme Macro Set and override the following macros:
PT_BANNER_BACK_BACKGROUND_COLOR_ACTIVE
PT_BANNER_BACK_BACKGROUND_COLOR_HOVER
PT_BANNER_BACK_BACKGROUND_IMAGE
PT_BANNER_BACK_BACKGROUND_IMAGE_ACTIVE
PT_BANNER_BACK_BACKGROUND_IMAGE_HOVER
PT_BANNER_BACK_BORDER_BOTTOM_COLOR
PT_BANNER_BACK_BORDER_BOTTOM_COLOR_HOVER
PT_BANNER_BACK_BORDER_COLOR
PT_BANNER_BACK_BORDER_COLOR_HOVER
PT_BANNER_BACK_BOXSHADOW
PT_BANNER_BACK_BOXSHADOW_ACTIVE
PT_BANNER_BACK_BOXSHADOW_HOVER
PT_BANNER_BACK_IMAGE
PT_BANNER_BACK_TEXT_COLOR
PT_BANNER_BACK_TEXT_COLOR_HOVER
PT_BANNER_BACK_TEXT_COLOR_ACTIVE


Note: You may also need to adjust other PT_BANNER_BACK* macros depending on your custom styles.

Results:


Steps in 8.54: Click here.

Changing  the color of the new Notification Badge:

This seems to be a new feature of PeopleTools 8.55 and I don't recall seeing this in 8.54.


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

Select the custom Theme Macro Set and override the following macros:
PT_BANNER_BUTTON_BADGE_BORDER_COLOR
PT_BANNER_BUTTON_BADGE_TEXT_COLOR


Results:


Changing the Dot Styling on the Fluid Landing Page Footer:

Unfortunately, this style override is not yet supported as part of the macros. So, we need to fall back to the previous method of overriding the styles.

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

Edit the custom Fluid - Global Override Style Sheet (CSK_BRAND_FLUID_TEMPLATE) and include the following style at the very end of the style sheet.

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


Results:


Steps in 8.54: Click here.

In the next post, I intend to cover some more advanced branding tasks including steps to create custom marcos using the Branding Theme Macro Sets framework.

34 comments:

  1. PeopleSoft Interaction Hub Image 2 includes a new branding feature called Theme Builder. This tool provides an easy to use UI for updating Fluid header, logo, background color\image, etc. You must have a look. It makes use of the same Macroset technology explained in your blog. However, the UI is much more intuitive. More info available here:
    http://docs.oracle.com/cd/E71360_01/ps91pbr6/eng/ps/psbr/task_ManagingTheThemeBuilderGuidedProcess.html#ContentsNavBar

    ReplyDelete
  2. Roshni - Thanks for sharing! I am sure that those who use Interaction Hub (IH) will find it useful.

    I am aware of the Branding Theme Builder in the latest IH image and I plan to post a blog on that topic soon!

    But, not everyone use Interaction Hub (IH) even though it is free to use under the restricted use license. So, this blog is targeted specifically for the benefit of customers in that scenario. It is intended to explain how the theme macro sets work and how to use the macros for Branding applications directly without requiring to setup and integrate an IH environment (particularly when IH is not being used for any other purpose).

    I previously referred to the IH theme builder in Part I (refer link below).
    https://pe0ples0ft.blogspot.com/2016/03/peopletools-855x-branding-part-i-what.html

    ReplyDelete
  3. Hi Sasank,

    Your blog is excellent and it helped me a lot for our tools upgrade.

    I am not able to change the background color of the home page.

    Below point is not working for me.
    Changing the Background Color of the Fluid Landing Page - Tile Area:

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

    Select the custom Theme Macro Set and override the following macros:
    PT_HOMEPAGE_BACKGROUND

    I changed the color to #f56811 but still the background color is not changing.

    Thanks in advance.

    ReplyDelete
    Replies
    1. Hi. It seems to work fine for me. I tried adding your color and here are the results:
      https://snag.gy/POCF08.jpg

      By the way, sometimes, I noticed that no matter how many times I change it on theme, it would not reflect on the PIA. It seems like in those occasions, clearing both app and web server cache fixed the problem for me.

      Just a thought. But otherwise, I don't see any issues with the override for the PT_HOMEPAGE_BACKGROUND macro.

      Delete
    2. Hi Sasank,

      Thanks for your quick. I will try clearing my app and web server cache and will let you know.

      Thanks
      Sam

      Delete
    3. Sam - One more thing I forgot to mention:

      Make sure the Theme is exactly as specified in this section:
      https://pe0ples0ft.blogspot.com/2016/03/peopletools-855x-branding-part-i-what.html#CustomClassicThemeStyleSheet
      The Homepage Header, Classic - Theme Style Sheet and Fluid - Global Override Style Sheet need to be cloned from the delivered counterparts. If any of these are not as delivered or cloned as specified, the theme macroset overrides would not work.

      Delete
    4. Hi Sasank,

      Thanks for your response. Sorry I was busy in our upgrade and it took a while to figure it out.Actually I did the entire process once again and still the background image doesn't change.

      One thing noted in your post is the below point:
      Fluid - Global Override Style Sheet: Must be derived (cloned) from PT_BRAND_FLUID_TEMPLATE or PT_BRAND_FLUID_NOIMG_TEMPLATE

      I used the PT_BRAND_FLUID_TEMPLATE and not the PT_BRAND_FLUID_NOIMG_TEMPLATE. Is that the reason?

      Also could you please let me know the best way to migrate these changes? Do we need to redo the changes in each instance or can we go for DMS scripts?

      Delete
    5. Sam,

      I don't think it matters that you cloned your Fluid - Global Override Style Sheet from PT_BRAND_FLUID_TEMPLATE. I did the same! So, not sure why you are running into issues. May be worth raising a support case.

      To migrate the Macrosets, you can use Data Migration Workbench.
      PeopleTools > Lifecycle Tools > Migrate Data > Data Migration Workbench

      There is a dataset called PTBR_MACRO which can be used for Macroset migration.

      For other Branding related items you could use the remaining datasets delivered for Branding (PTBR_%). Alternatively, you can follow the steps I detailed in 8.54, which should be relevant for most objects (images, stylesheets, js, html, headers, themes, etc.).
      https://pe0ples0ft.blogspot.com/2014/12/peopletools-854-branding-part-3.html
      https://pe0ples0ft.blogspot.com/2015/04/peopletools-854-branding-objects.html

      Delete
    6. This comment has been removed by the author.

      Delete
    7. Awesome. Thanks for sharing the details with respect to migration.

      Yes better I will create an Oracle case and will see what they are suggesting.

      Once again thanks a lot for this wonderful post and your response

      Delete
    8. You are welcome. Let us know if you find out the reason why you had trouble with this particular macro. As I said, I cannot see any obvious reasons for that behavior. It seems to work for me on HCM PUM Image 17 as I detailed.

      Thanks!

      Delete
    9. Sure. I will let you know.

      Delete
    10. This comment has been removed by the author.

      Delete
    11. Hi Sasank,

      We have applied the patch 8.55.07 and now I am able to see the background color on home page.

      Previously we were on 8.55.05 and that's were it didn't work.

      Also one more thing, how can we change the background color for all the pages so that it looks same as the home page?

      If we do that, I believe we may have a huge impact since lot of object needs to be touched.

      Delete
    12. Sam - Thank you for posting back the details on the patch. I did these steps on 8.55.01 and 8.55.03. Glad to hear that your problems in 8.55.05 were fixed by patching to 8.55.07.

      With regards to changing other styles, I will suggest the same principles:
      - Check if there is a delivered macroset that already helps with your required override.
      - If not, find out the style that is currently generating the style (you will need to use the browser tools and find it yourself because each requirement will be different).
      - Once you find the style, just override it by using one of the style sheets on the Theme.

      For changing the background color on all Fluid pages, I can see that we need to override the following delivered style (PSSTYLEDEF_FMODE):
      html, body, form {
      height: 100%;
      background: #fff;
      color: #000;
      }

      I used CSK_BRAND_FLUID_TEMPLATE style sheet which is my "Global Override Style Sheet" on my theme (CSK_THEME_FLUID). I added the following at the very end of the style:
      html, body, form {
      background: #E8E29E;
      }

      You may need to adjust other styles depending on your requirement and background color. Hope this helps.

      Delete
    13. Sasank Sorry for the late reply. Thanks for the details.

      I will try out your suggestions and will let you know.

      Delete
  4. Hi Sasank, very good information, thank you. Have you ever thought of a way to store the CSS outside of the peoplesoft database? We have been seriously considering this route as this way, you can involve front end developers who are really the experts at UX and not PeopleSoft developers. I wish Oracle had provided an easy way to do this.

    ReplyDelete
    Replies
    1. Hi - Great question and it is a topic I am very interested in. I agree that the UX experts who are better aware of styling and CSS in general should be able to access the styles without needing to use/learn PeopleTools or App Designer.

      That is why I love the Branding Objects (PeopleTools > Portal > Branding > Branding Objects).

      We just need to provide access for the UX team to this page and they can update the custom style sheets. Then we can simply reference the style sheets to the CSS using Branding System Options (or other approaches I have shown in my Branding posts depending on the tools release).

      The "Branding Objects" page is a way of decoupling the styling tasks to folks who may not be experts with and prone to using App Designer.

      Also, I recently found a way to integrate ACE Editor with Branding Objects so that additionally provides a better UI for those making changes.
      Refer: https://pe0ples0ft.blogspot.co.uk/2016/06/peopletools-855-oracle-jet-using-ace.html

      Remember, by storing these styles as a PeopleTools managed object helps us a lot with maintenance. As opposed to them residing externally, so there are some other hidden advantages if we store the styles as PeopleTools objects as well.

      Delete
    2. If you are interested in storing your js and css files externally and managing them outside of the PeopleSoft Database, then you may want to take a look at this blog post:
      https://pe0ples0ft.blogspot.com/2016/07/using-bower-to-manage-javascript.html

      I tried to use Bower to manage my js packages and integrate it with PeopleSoft. I am using it for managing open-source libraries but you could use a similar approach and manage your custom package outside of PS. You could also take this idea further and perhaps GITify your package.

      But once you take the objects outside of the PS database we will certainly lose the ability to manage them via Tools for the purposes of release management and upgrades.

      Delete
    3. Hi Sasank,

      We just upgraded to 8.55 and used the branding to change the header and footer colors. Everything looks fine in DEV & QAT. Yesterday we went live and found that we are having issues with production Header.

      We changed the color to orange but some times the header reverts back to blue like the old classic 8.53 and the nav bar, Home and all other icons are not visible. This is not consistent and it is sporadic. For some time I can correctly getting the Header and some times the header changes. Have you faced this issue. Since its PRD, we need to fix it asap.

      Delete
    4. If it works most times and does not work sporadically, it sounds like a caching issue to me.

      I would suggest that clear your cache and restart all your app and web server domains.

      Delete
    5. Thanks for the quick reply. Really appreciate it. Will check for the down time and we will bounce and see if that helps.

      Delete
    6. We are also seeing the issue where the header reverts back to blue and the icons at the top right become invisible. Classic pages using the fluid header still show the customizations and the icons, however, all fluid pages and the fluid homepage exhibit the blue header/invisible icon behavior.

      A bounce and a cache clear does fix the issue temporarily; but after a week, the header reverts to blue and the icons become invisible again. We've seen this behavior on PT 8.55.06 and 8.55.09 on multiple occasions. We think it is an Oracle issue and filled out an SR, however, they simply suggested to post the question to this blog.

      Is this not an Oracle sanctioned/supported way for branding? Has anyone else seen the behavior and/or know of a permanent fix?

      Delete
    7. I can point you to the following PeopleSoft Spotlight Series Video:
      https://www.youtube.com/watch?v=DECiaeogXyE

      The second half of the video talks about how we can clone a delivered macroset and add custom values to it. What I have done up until this part (i.e.: Part 1 and Part 2) is no different from what is described in the PeopleSoft Spotlight Servies Video.

      With regards to the caching issue you are encountering, I have not seen this in my PUM images (8.55.03 and 8.55.06), so I am not sure why you are having that intermittent issue. I would encourage you to continue to work with My Oracle Support (service request) and also post your problem referencing your SR number in the My Oracle Support - Community (see URL below).
      https://community.oracle.com/community/support/peoplesoft/peopletools_-_psft?customTheme=otn

      Delete
    8. The losing branding issue is single sign on without Interaction Hub and different branding between the two servers. Either disable single sign on or try setting the InPortalContext property to false on the web profile or make the branding the same on all servers. More details in Oracle Doc ID 2060292.1.

      Thanks for the information presented here and your always helpful comments Sasank!

      Delete
    9. Great news. Glad you figured out the problem. Thank you for circling back and posting the resolution!

      Delete
  5. Can you tell me how to change the background color of the menu? We are on pt8.55 but is still using classic style.

    ReplyDelete
    Replies
    1. If you are still using Classic (that is completely bypassing Fluid) then you can use the approach I have described in the past for PeopleTools 8.54.

      Refer to this post:
      https://pe0ples0ft.blogspot.com/2014/11/peopletools-854-branding-part-1.html

      At the very end of this post, you will find links on how to clone and customize different themes. How you override the background color of the menu depends on what theme you are currently using on your application. I have steps detailed on how to clone and customize themes: DEFAULT_THEME_TANGERINE and DEFAULT_THEME_TANGERINE_ALT.

      Delete
  6. Sasank....can we have tangerine style dropdown added to the Fluid header? Thanks for a very nice blog about Branding.

    ReplyDelete
    Replies
    1. Hi Durai - I don't think you can add the classic dropdown navigation to the Fluid Header. It is either or. That is, you either use Classic or Fluid.

      Also, the dropdown navigation does not really fit in well with the overall navigation strategy for Fluid.

      Delete
  7. @All,

    Can anyone tell me how to migrate fluid tile to another instance . i have created a tile using navigation collection and placed it on home page.For migration perspective , I have added all portal registry structure of navigation collection and tile to my project and migrated it but still tile content is not visible in target instance.

    ReplyDelete
    Replies
    1. Ankur - Couple of things to check if you have not done so already.

      - Did you check security to the tile content reference?
      - Also, you may have to also migrate the homepage to the target environment. Because, that content reference in your target might not have the tile added already. Portal Structure and Content > Fluid Structure Content > Fluid Homepages > Edit the homepage in question > Tile Content (Tab). This information should be same in both source and target (you can migrate the homepage CREF).

      Delete
  8. This write-up is excellent. With 177 macros and not all of them as descriptive as one would hope, it would have taken me forever to figure out which ones I need to change to achieve what you're doing here. This saved me a bunch of time. Thank you!

    ReplyDelete