I previously described, in this blog post, how I ran into an issue with a Fluid tile and needed a way to apply some custom style overrides on the tile image.
In the same vein, a reader asked a question on this post, if there is a way to apply similar style overrides on the tile title? We should be able to follow a similar approach to achieve something like that.
This question proves that there is definitely a case to enhance the Fluid tile configuration to allow us to apply style overrides. If you agree, then please take a moment to vote for this Idea on My Oracle Support Community.
Here are the steps to target a tile title and apply custom style overrides:
Step 1: Identify the id of the tile title
All tile title elements will have a unique id property as follows PTNUI_LAND_REC_GROUPLET_LBL$29. Here 29 is the number that uniquely identifies my tile title.
Step 2: Apply custom style override
I simply added the following custom style at the very end of my 'Fluid - Global Override Style Sheet' (CSK_BRAND_FLUID_TEMPLATE) referenced on my custom Branding Theme (CSK_THEME_FLUID). Refer: PeopleTools 8.55.x - Branding - Part I for more details.
Note: We can adjust the margin property as per the custom requirement.
Results:
Considering Small Form Factor:
When I said the id property is unique, I was not 100% accurate. It appears that it may vary depending on the form factor we are on. It is mostly true that the id property will be unique but if we are on small form factor (SFF), then it is likely that there may be other tiles that are suppressed. This suppression of tiles on SFF causes renumbering of tile id properties. There is nothing we can do about it because it is how PeopleSoft generates the HTML for the tiles.
That said, we could identify the SFF id property for the tile and write RWD - Media Query to supplement the CSS that I previously described.
Step 3: Identify the id property for SFF
In my case, it turned out to be PTNUI_LAND_REC_GROUPLET_LBL$23.
Step 4: Add media query for SFF
Again, I simply appended to my existing CSS that I used in step 2.
Results:
In the same vein, a reader asked a question on this post, if there is a way to apply similar style overrides on the tile title? We should be able to follow a similar approach to achieve something like that.
This question proves that there is definitely a case to enhance the Fluid tile configuration to allow us to apply style overrides. If you agree, then please take a moment to vote for this Idea on My Oracle Support Community.
Here are the steps to target a tile title and apply custom style overrides:
Step 1: Identify the id of the tile title
All tile title elements will have a unique id property as follows PTNUI_LAND_REC_GROUPLET_LBL$29. Here 29 is the number that uniquely identifies my tile title.
Step 2: Apply custom style override
I simply added the following custom style at the very end of my 'Fluid - Global Override Style Sheet' (CSK_BRAND_FLUID_TEMPLATE) referenced on my custom Branding Theme (CSK_THEME_FLUID). Refer: PeopleTools 8.55.x - Branding - Part I for more details.
Note: We can adjust the margin property as per the custom requirement.
Results:
Considering Small Form Factor:
When I said the id property is unique, I was not 100% accurate. It appears that it may vary depending on the form factor we are on. It is mostly true that the id property will be unique but if we are on small form factor (SFF), then it is likely that there may be other tiles that are suppressed. This suppression of tiles on SFF causes renumbering of tile id properties. There is nothing we can do about it because it is how PeopleSoft generates the HTML for the tiles.
That said, we could identify the SFF id property for the tile and write RWD - Media Query to supplement the CSS that I previously described.
Step 3: Identify the id property for SFF
In my case, it turned out to be PTNUI_LAND_REC_GROUPLET_LBL$23.
Step 4: Add media query for SFF
Again, I simply appended to my existing CSS that I used in step 2.
Results:
Sasank, when an end user personalizes the tile order, the css fix based on $xx will not work, right? I assume this id generation is based on the position it is rendered on the homepage and not constant for a tile.
ReplyDeleteThanks,
Madan.
Hi Madan - Yes. My method has some shortcomings. You are right. It will not be possible to identify all the different $xx that end up getting created as a result of user personalization (if that is an option for users).
DeleteThis is where, I think this idea has merit:
https://community.oracle.com/ideas/13674
That said, as a workaround, we will need to find something that is unique for tile and target it using css selectors. But I it does not appear to be an easy task. Potentially, we could use the onClick attribute on the DIV (parent of the SPAN i targeted) which has the URL of the component. Just a thought, I have not tried it to check if it works.
Hope this helps.
Hi is there a way to override CSS style using peoplecode?
ReplyDeleteYes. It depends what exactly you are trying to do.
DeleteHere is a starting point:
https://docs.oracle.com/cd/F44200_01/pt859pbr2/eng/pt/tflu/concept_ApplyingStyles.html?pli=ul_d32e64_tflu
Hey Sasank,
ReplyDeleteWe have a requirement where two different tiles (Tile1 and Tile2) are mapped to the same component. But we need to show different content on the component when the users click on the tile1 vs when user clicks on tile2.
How can we track if user clicked on Tile 1 vs Tile 2 ?
If I am able to track which tile was clicked by the user then I can change my login on the component.
One idea is to pass a parameter in the URL using the CREF properties.
ReplyDeleteOn the component, use the Request class GetParameter method to retrieve this value and execute appropriate code.