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.

75 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
    14. Hi Sasank,

      I tried to change the background colour of all the fluid pages using above method but it is not working. I have added code from PSSTYLEDEF_FMODE to the end of my custom style sheet and then changed the background colour value. Custom style sheet is set as Global Override Style Sheet.

      Can you please help on this?

      Delete
    15. @Yogesh Raut,

      If you are in this post, I am assuming that you followed the steps in the previous post to setup your theme and branding system options as described in the previous post:
      https://pe0ples0ft.blogspot.com/2016/03/peopletools-855x-branding-part-i-what.html

      If that is the case, you can change the background color for all fluid pages by adding the following style class (override) at the end of CSK_BRAND_FLUID_TEMPLATE:

      .ps_main {
      background-color: #000;
      }

      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
  9. Hi Sasank,

    Once again your blog has helped me immensely, I really enjoy your articles.

    We are in the process of upgrading to 8.55.15. We have our dev and test environments up and working. So I am doing the branding right now.

    I'm following your steps in https://pe0ples0ft.blogspot.com/2016/03/peopletools-855x-branding-part-i-what.html and this article, and everything works fine except for one thing.

    I cannot set the banner image to an actual image. I can set a theme macro for PT_BANNER_BACKGROUND_IMAGE to linear-gradient(rgb(0,92,0),rgb(0,179,0)) and it works fine, so the macros are being invoked.

    But I'd like to use an actual PNG image instead and cannot get it to work. I did the following:
    1. Created a 200px x 40 px PNG in Photoshop, saved it as MZ_HEADERBG_GREEN_DEV.png
    2. Uploaded it to Branding Objects, named it MZ_HEADERBG_GREEN_DEV
    3. Set the PT_BANNER_BACKGROUND_IMAGE macro to MZ_HEADERBG_GREEN_DEV

    But the image does not appear, I get the pale blue header as if the image is not found.

    Do you have any thoughts about what I might be doing wrong?

    Thanks,
    Jason

    ReplyDelete
    Replies
    1. Hi Jason - I believe you must use images in SVG format for Fluid Branding Logo and icons. To confirm, you can test with a SVG image and see if it works in your environment.
      https://en.wikipedia.org/wiki/Scalable_Vector_Graphics

      There are several tools like adobe, etc. that help with convertiny to SVG format. Do you have some resources in your organization that can help you with this?

      I am not an expert at creating SVGs or any images for that matter. But for my testing purposes, I use inkspace:
      https://inkscape.org/en/

      Thanks!

      Delete
    2. Ah, I did not know that. I do have access to Photoshop. I exported A 300px by 40px image as a SVG, but when I upload to Branding Objects I get an odd error message:

      ---
      Unable to get image extents for MZ_GREEN_DEV. (2,820) PTBR_MGOBJ_WRK.FUNCLIB.FieldFormula Name:ProcessObjectGrid PCPC:12775 Statement:259
      Called from:PTBR_IMG_DETAILS.Activate Statement:1

      Verify that the image name is correct.
      ---

      That error is after renaming it so it didn't have the same filename as any previous one, in case there was some cache issue or something. That didn't work, and it doesn't display the thumbnails of any other images in the grid either. If I delete the offending row, they other thumbnails appear again. Very odd.

      Delete
    3. I should add that I used a PNG for the logo, and it works fine. It's only on the header background image that I am having problems. And the error happens with ANY SVG file I upload to Branding Objects.

      Delete
    4. I see what you are trying to do. I doubt that will work because the macroset is simply a variable substitution at the style level.

      If you are using an image name for PT_BANNER_BACKGROUND_IMAGE then all it is doing is substituting the value you are setting in the following style sheets:
      PT_BRAND_FLUID_TEMPLATE - Refer https://snag.gy/3XvTCD.jpg
      PT_BRAND_CLASSIC_TEMPLTE_FLUID - Refer https://snag.gy/5349F6.jpg

      I would try setting the following value for PT_BANNER_BACKGROUND_IMAGE:
      url(%Image(MZ_GREEN_DEV))

      My thought is that it will get the proper URL location for the image on the web server. Please note that I have not tried this out, just thinking that in theory it should work! Let us know how it goes.

      Delete
  10. Has anyone had much success replacing the Oracle Logo with your own SVG file? When we do this through macro sets (macro name: PT_LOGO_IMAGE_NAME) we are not able to see the logo in Chrome, but it works fine in IE.

    ReplyDelete
    Replies
    1. I have not encountered any issues with replacing the Oracle Logo using the PT_LOGO_IMAGE_NAME macroset with a SVG image.

      Delete
    2. thanks for the quick response. When you replaced the image, did you create a new object or just update the delivered PTNUI_ORACLE_LOGO. In our case, we created a new object.

      Delete
    3. New object.

      I normally follow steps described here:
      https://pe0ples0ft.blogspot.com/2016/03/peopletools-855x-branding-part-i-what.html

      I wonder if it is an issue with the macroset itself. That is the theme/macroset is not loading correctly in Chrome. You can test this theory by making any changes to the other theme macrosets.

      Delete
    4. Hi Sasank, the macrosets are working fine. I think Chrome is not liking my SVG for some reason. It works fine in IE but not in Chrome. I can see under the hood in chrome's developer tools the image is actually getting called. Strangely enough, if I switch to PNG, that works.

      CSS as seen in developer tools:

      .nuihdr_logo:after {
      content:url(/cs/ps/cache/TEST_NEW_LOGO.svg);
      padding-top: 0.25em;
      margin-left: -0.7em;

      Delete
    5. Ah. That makes sense.

      There may be a good possibility that there is something wrong with your SVG. Have you tried using another SVG image?

      You can try opening the SVG directly using Chrome and it does not display then there is your issue. SVG is basically XML and it may be possible that something in your SVG is not accurate and Chrome could very well be a bit more strict when it comes rendering SVGs as opposed to IE.

      Delete
  11. Hi Sasank,
    First of all, thanks for this nice article! Please would allow to ask you few questions regarding the branding in PT8.55.

    Do you have any idea/hints for customizing the company logo and header background for classic navigation using? We are using PSSTYLEDEF_TANGERINE as the default style sheet name. I was wondering if it is a good practice to open with App Designer the style PSSTYLEDEF_TANGERINE and change the images for the logo and the background images. Unfortunately, it is not possible to modify with Application Designer the style PSSTYLEDEF_TANGERINE.

    Do you have any suggestion for changing the company logo and the background images in classic navigation using PSSTYLEDEF_TANGERINE as default style?

    ReplyDelete
    Replies
    1. You can use the DEFAULT_THEME_TANGERINE in 8.55 if that is what you want (although it is recommended to use the latest DEFAULT_THEME_FLUID).

      I would not recommend directly modifying any delivered Branding objects (including the style sheet such as PSSTYLEDEF_TANGERINE). I would rather recommend that you clone the delivered objects and use those cloned objects to make your customizations.

      You can follow the steps in these series of posts to clone and use the DEFAULT_THEME_TANGERINE:
      https://pe0ples0ft.blogspot.com/2014/11/peopletools-854-branding-part-1.html
      https://pe0ples0ft.blogspot.com/2014/11/peopletools-854-branding-part-2.html
      https://pe0ples0ft.blogspot.com/2014/12/peopletools-854-branding-part-3.html

      Delete
    2. Many Thanks Sasank!! Cloning the delivered DEFAULT_THEME_TANGERINE works well. The branding engine seems to be very powerful and offer a lot of flexibility.

      Is there away for migrating a custom branding from one environment to another?

      Delete
    3. The process for migrating brandings is well describe in the post branding-part-3.
      Thanks you! This is a nice article.

      Delete
  12. Many Thanks. This was very helpful. I do have a question though. I seem to have lost the 'hamburger' in the header. I am on tools 8.56.06 and it is now dots, but I do not see any after applying the branding and was hoping you would have some suggestions. Also, is there a way to move the logo up on the fluid page? I was able to move it on the classic page following your steps.

    ReplyDelete
    Replies
    1. I have not seen the issue of the hamburger icon disappearing completely. Not sure how that can happen. You may want to inspect the element on the browser using developer tools and see if you can identify anything. Also, a screenshot of the issue shared via https://snag.gy/ or other image sharing tools would be helpful.

      Regarding the Fluid icon positioning, you could write your own CSS and add it to PT_LOGO_CSS and/or PT_LOGO_CSS_SMALL macros:
      For example: https://snag.gy/8ChBTJ.jpg

      I don't know exactly what CSS you may need to add. That will depend on your requirement.

      Delete
  13. Hi Sasank, Thank you so much for your articles, they helped me in most of the difficult cases.. I need your inputs on one of our client requirement.

    Client need the Navigator of Nav Bar on top left side before company logo. i could manage to move the Nav Bar button, but when i click on it, the content is appearing on right side as usual... is there any way that i can move only navigator to the left side of the screen?

    It really helps me if i can get some inputs.. Thank you in Advance..

    regards,
    Raj

    ReplyDelete
    Replies
    1. @Raj - Here is how I was able to change the direction of the NavBar slidein from rtl to ltr.

      https://pe0ples0ft.blogspot.com/2018/03/customizing-navbar-slidein-direction.html

      Delete
    2. Hi Sasank, Thanks alot for quick reply. I have done all the changes as mentioned, but i am getting empty slidein. Please let me know if i missed anything?

      Regards,
      Raj

      Delete
    3. I am not sure. I made this change in HCM 9.2 PUM 23 - PT 8.56.01. It works without any issue. Initially, I got the empty slider as well. But I fixed that by changing the %AlignEnd to %AlignStart in the two locations mentioned in the blog post.

      Then make sure you have your browser cache (and potentially server cache) is not still using the old CSS.

      Delete
    4. Thanks alot Sasank, we are actually on FSCM 9.2 PUM 24 - PT 8.55.13. I am cross checking all the Style sheets. I am getting slider on left side but empty.

      Delete
    5. I am not sure what you mean by it appears on the left side but empty.

      Can you please share a screenshot of the issue using any image sharing tools such as https://snag.gy?

      Delete
    6. Hi Sasank, Please find screenshot here https://pasteboard.co/HdHmVbO.png

      Delete
    7. That is strange. So, when this appears on the right, does it display with contents?

      Delete
    8. Yes, On the right side it is displaying with all the content. but when i changed %AlignEnd to %AlignStart and "rtl" to "ltr" then only empty slide is displaying.

      Delete
  14. Hi Sansank,

    Thanks for your post. It really helped me. I am working on one issue . When user logs in Fluid mode and after going to Form-i9 page under Employee Self service , when he clicks the home button, the classic home page is opening up instead of fluid home page.

    When i analysed the issue i found that the following code returns as classic instead of Fluid .

    Code : %Request.StartPageType

    I believe this %Request.StartPageType is configured somewhere in branding or theme setup but i am not able to find where it is. Could you please let me know where it would have been setup?

    Thanks
    Joris

    ReplyDelete
    Replies
    1. Hi Joris,

      Great question. The %Request.StartPageType, I believe is configured at the web profile level. I have seen this issue occur where the %Request.StartPageType was defaulting to Classic. But this was occurring for all pages (not specific to one page - like the Form-i9 page which you described).

      I worked around that problem by following the steps in this document:
      E-FLUID: Why is Login Showing Classic Navigation Instead of Fluid Navigation? (Doc ID 2212274.1)

      Give it a try and let us know if it resolves your issue as well!

      Delete
  15. does anyone know which of the theme set element dictates the yellow hover color over tiles/etc?

    thanks in advance.

    ReplyDelete
  16. Hi Sasank,

    In one of our peoplesoft instance, in classic mode, the delivered peoplesoft fluid links such as 'Tile wizard' and 'Change My Password' are not appearing . I checked the web profile settings and branding and it looks correct to me. could you please let me know whether there is any other settings to be checked in specific ?

    Thanks in advance

    ReplyDelete
  17. Hi Sasank,

    We are PeopleTools 8.56 and doing the Branding activity.

    Everything worked as-is. But, facing problem in the "Back Button" functionality. It's behaving in a strange way.

    If I open a "Fluid Page", when I hover near the Back Button. It is showing the shades of delivered "Blue Color".

    But, If I open "Non-Fluid Page", its working as expected. Where there shouldn't be any color change.

    Can you please guide, as to what could be the missing factor.

    Regards,
    Sidd

    ReplyDelete
    Replies
    1. Have you tried updating the PT_BACK* macros as described in this post here?

      https://pe0ples0ft.blogspot.com/2016/04/peopletools-855x-branding-part-ii.html#11

      Delete
  18. Sasank - Is there a way for a end user to apply their own personalized theme / background color? I know we can apply changes to the background globally for all users, but I wanted to know if there is any way to this individually? Right now we are using DEFAULT_THEME_TANGERINE for branding.

    ReplyDelete
  19. Hi Sasank - Is it possible to create a personalized theme / background color for a specific end user? I understand we can apply a different background globally, but I wanted to know if there is any capability out of the box to apply individual background personalization? Thank you.

    ReplyDelete
    Replies
    1. @kdrymer - Yes. It is possible provided the user has access to a unique role.

      You can look into 'Role Based Theme Assignments'.

      Here is an example: https://pe0ples0ft.blogspot.com/2016/08/peopletools-branding-role-based-themes.html

      Delete
  20. Hi Sansank, I have question. I have issue in Fluid Page Back Button after click on any tiles
    1. This "Back" button is not working in Chrome and Firefox, however its working fine in IE 11 and Edge
    2. Basically Back button label is not changes to "Student Homepage" in Chrome and Firefox, but this perfectly working in IE 11 and Edge
    3. This issue existing in Custom branding and Delivered (blue) branding
    4. We using Portal IH 9.1 and Campus Solution 9.2 and Tools 8.57.07 for both application

    Can you please help on this issue. Please do the needful.

    Thanks, Krishna

    ReplyDelete
    Replies
    1. Since this is browser related and an issue that occurs with the delivered branding, the best course of action is to create an Oracle support ticket.

      Delete
  21. Dear Shanshank
    I find your post very informative, I need to change the banner color at top ( which for you in tangerine Strip) but i have to change in to other color as per client requirement. can you let me know which microset we need o modify for this.

    ReplyDelete
  22. Hi Sasank,

    Can we highlight the current row in flexigrid soon after placing the cursor on that row?

    For ex: I am moving from one row row to another to enter some value in the editable field in that case i want to highlight the row which i am in currently

    ReplyDelete