Saturday, July 9, 2016

Fluid UI - Custom Development - Styling Tiles

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

3 comments:

  1. Hi Sasank,

    Thanks for sharing this. It is really helpful. Can we have GIF(.gif) files as Image for tiles?

    ReplyDelete
    Replies
    1. I have not tried GIFs as tile images. You could give it a try and see if it works.

      I would recommend using SVGs mainly because it will scale according to the device form factor.

      Delete
  2. Hi Sasank,

    Is it posstible to resize the tiles apart from
    1x1
    1x2
    2x1
    2x2

    ReplyDelete