In this post, I will write about how we can style any custom tiles that we might be creating for Fluid UI.
Why would we want to do that?
I created a custom Fluid component/page and created a Fluid Content Reference.
Now my icon1 image (CSK_CC_SCAN) for my custom tile ended up as follows:
Notice how the icon is not position appropriately? Sure, I can create an image with the desired alignment and spacing. But wouldn't it be better to just adjust the style on the tile image to add some alignment/margin properties?
If you see the Content Reference - Fluid Attributes - Tile Information, there is no way to assign a custom style to the Tile.
How do we associate styles to custom tiles?
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.
CSK_CC_SCAN$30 is the id attribute generated on the HTML for my custom tile.
Now, we can see the results from the image above that my custom tile icon is displayed in the desired position with a top margin of 25px.
If you think this would be a good feature to add to the 'Fluid Content Reference - Tile Information' section, then please vote for this idea on My Oracle Support.
1 - Icon made by Freepik from www.flaticon.com
Why would we want to do that?
I created a custom Fluid component/page and created a Fluid Content Reference.
Now my icon1 image (CSK_CC_SCAN) for my custom tile ended up as follows:
Notice how the icon is not position appropriately? Sure, I can create an image with the desired alignment and spacing. But wouldn't it be better to just adjust the style on the tile image to add some alignment/margin properties?
If you see the Content Reference - Fluid Attributes - Tile Information, there is no way to assign a custom style to the Tile.
How do we associate styles to custom tiles?
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.
CSK_CC_SCAN$30 is the id attribute generated on the HTML for my custom tile.
Now, we can see the results from the image above that my custom tile icon is displayed in the desired position with a top margin of 25px.
If you think this would be a good feature to add to the 'Fluid Content Reference - Tile Information' section, then please vote for this idea on My Oracle Support.
1 - Icon made by Freepik from www.flaticon.com
Hi Sasank,
ReplyDeleteThanks for sharing this. It is really helpful. Can we have GIF(.gif) files as Image for tiles?
I have not tried GIFs as tile images. You could give it a try and see if it works.
DeleteI would recommend using SVGs mainly because it will scale according to the device form factor.
Hi Sasank,
ReplyDeleteIs it posstible to resize the tiles apart from
1x1
1x2
2x1
2x2