Oracle Fluid: Branding those Tiles

Ever wondered how you could restyle the tiles on the Oracle Fluid landingpage? During the summer my colleague Lukas Degens blogged here about how we applied the corporate branding of Leiden University. At first glance it reminded me of the office365 look. In this blog we cover the technical aspects of how we can brand the landing page without customizations and use a CSS only approach.

This would be the end result.

The end result - Colored tiles

Looking at the above picture we created the following features.

  • Square tiles with no dropshadow
  • Tiles have different colors.
  • Embedded logo of the university.
  • Different font-size on the tiles (Vestula).
  • Customized SVG icons.
  • Images on the tile appear in the upper-left corner while text appears on the bottom.

Note: The complete stylesheet can be found at the bottom of this page.

Getting Prepared

Lukas quickly mentioned the use of themes in his blog. So let me elaborate on that. What we want to do is create a custom theme that fires off once a person has a specific role. To do so, we need three things in place.

  1. Having a custom stylesheet in our branding objects
  2. Hook this stylesheet into a theme.
  3. Tie this theme to a Role

Go to PeopleTools > Portal > Branding > Branding Objects and create a new custom stylesheet. I called mine: CY2_SELFSERVICE_CSS
For now, just create an empty ‘shell’ and save the stylesheet. See below picture.

A shell CSS script ready to be filled

Then go to Peopletools> Portal > Branding > Assemble Themes

The screenshot below shows the theme I created, it’s called CY2_THEME. I copied the DEFAULT_THEME_FLUID and changed the Global Override StyleSheet to CY2_SELFSERVICE_CSS. Below picture shows the result.


Finally, you can use the Assign theme page to attach a role to this specific theme. Once a user has this specific role / permission list, this theme kicks off, resulting in the global overriding Stylesheet we are about to create.

CSS step1: Getting those colored tiles

If it comes to branding tiles, there is one important thing you should know. Tiles can be re-ordered into the landingpage and therefore have a dynamic id.  So it is quite a challenge to get the right ID of those tiles while their location is uncertain. Fortunately CSS does a great job!

To get a specific tile, regardless of its position, we can refer to the onclick attribute most tiles have. Almost every tile points to some kind of URL and in the DOM. This URL is visible as an onclick property. For better isolation of this project,  I added  a custom query string at the end in the URL as identifier for the project.

Take a look at the CREF screenshot below. It points to the classic Student Selfservice Class Schedule. Also note the query string ?LEI_V_SS=Y at the end of the url.

Url Info

Using the inspector we can see this tile representing the following HTML.

DOM model tile

To identify this tile with CSS, we make use of the onclick and the extra query parameter:

 background:#f46e32;; /* your color */

You can repeat this behavior for the rest of the tiles that you want to have a different colour. just replace the ‘onclick’ with a different part of another URL.

CSS step2: Make it square without drop shadow

We can follow the similar approach when creating square tiles and remove their drop shadows. This time I leave out the onclick part of the main url, because I want all tiles to be square and without having a drop shadow. I leave the LEI_V_SS=Y in, so it only affects the tiles tied to our project.

   %BP(border-radius: 0);

CSS step3: Image and text placement and hover

To change the image and text location, we can play around with some margins.

div[id^="win"][id*="GROUPLET"][onclick*="LEI_V_SS"].ps_box-group.psc_layout.nuilp > div > img.ps_process{

This is for the text.

div[id^="win"][id*="GROUPLET"][onclick*="LEI_V_SS"].ps_box-group.psc_layout.nuilp> h2 > span{
  font: normal 22px Vestula;
  color: #fffff;

This is for the hover:


CSS step4: Embedded logo

One of the best design ideas I have seen on the landingpage is to embed the logo on it. Actually this idea came from the branding specialist of Leiden itself. In order to do so, we need to make a custom tile. Furthermore we need to make it non-clickable, by checking the Disable Main Hotspot.

Disable main hotspot

One disadvantage of disabling the Main Hotspot is that we lose our onclick as an attribute in the DOM. In our case the embedded logo will always be the last tile, so we could take advantage of the :last-child CSS selector.

DOM model for embedded logo

Basically the embedded logo is a combination of giving the tile a similar background- and text color as the landingpage itself. By removing the drop shadow of the tile, you won’t even notice it’s a tile anymore. The following three CSS blocks are needed to get that embedded logo.

/*Give the tile title the same color as the tile background - we don't want to see it*/
div.ps_grid-div.ps_grid-body > div[id*="_row_"]:last-child > * >
[id^="win"][id*="GROUPLET"]:not([onclick]):not([role]).ps_box-group.psc_layout.nuilp > h2 > span{
/*Give the embedded image a width and opacity*/
div.ps_grid-div.ps_grid-body > div[id*="_row_"]:last-child > * >
[id^="win"][id*="GROUPLET"]:not([onclick]):not([role]).ps_box-group.psc_layout.nuilp> div > img.ps_process{
   opacity: 0.6;
/* Remove the dropshadow*/

div.ps_grid-div.ps_grid-body > div[id*="_row_"]:last-child > * >

Step5: Installing your font

Install your font on the webserver. I am using the PUM Image of CS with tools 8.55. Place the .woff file in the following location:


In the CSS refer to this font with the following construct:

@font-face {
 font-family: Vestula;
 src: url("../fonts/vestula-regular.woff2") format("woff2"),
 url("../fonts/vestula-regular.woff") format("woff");
 font-weight: normal;
 font-style: normal;


As you can see, rebranding can be done with pure CSS quite easily.
In a follow-up post I will show you how we could leverage the Macro Themes together with our CSS. Happy styling.

Please download the full css at the GitHub:

Share on social media
Showing 12 comments
  • Avatar
    Charandeep Singh

    Have seen that homepage layout on your previous post few weeks back, always wondered how it was achieved. Thanks for sharing!

    • Avatar

      Hi Charandeep,

      Your absolutely welcome!

    • Avatar
      Stefan van Liempt

      Sure, your Welcome.

  • Avatar
    Rauhan Farrukh

    Hey Stefan,

    This is looks great! Thanks for not keeping it to yourself!

    Can’t wait to try this out.

    • Avatar
      Rauhan Farrukh

      Actually, can I ask for a bit more info regarding the progress bar? Looks very interesting.

      Fluid pivot grid?


      • Avatar

        Hi Rauhan,

        Sorry for the late reply. Yes indeed! 100% Pivot grid. with stacked horizontal bars.

      • Avatar
        Stefan van Liempt

        Hi Rauhan,

        Yes 100% Pivot Grid, with Stacked horizontal Bars. If you are still interested I can share you more details. let me know.

        • Avatar
          Rauhan Farrukh

          Hi Stefan,

          Happy New Year and sorry for the late reply!

          You’ve already covered the branding, so maybe if you could go over the settings in Pivot Grid Wizard, and perhaps the query running behind it?

          Much appreciated,

          • Avatar
            Stefan van Liempt

            Hi Rauhan,

            Happy new year to you too 🙂

            In the query I have 4 columns: Emplid, Programname, units_done and units_todo

            Then in the pivot grid wizard I selected in the 2nd step Program, Units_done and Units_todo.

            In the 3rd step we set Programname as Axis and both Units_done and units_todo as Value (Both aggregate as sum)

            In the 4th step Programname as X-asis and both Units_done and units_todo as Y-axis

            In the chart-options select 2d-stacked horizontal bar.

            Hope this helps.

  • Avatar
    Rauhan Farrukh

    Stefan, thanks for the details on the query! (sorry could not respond to the latest comment).

    All the best to you and CY2! Hope to see more blog posts like this in the future

  • Avatar
    Mahesh B

    You have explained this topic very nicely. I was able to borrow some ideas from your blog and use them with Event Mapping Framework to get very nice results (and without too much customization). Thanks.

pingbacks / trackbacks

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Privacy Preference Center