How do I change tile background image ?

[fabiobrandao]

Hi everyone,

I tried using UI theme designer to change a launchpad site that is hosted on a cloud foundry account and was able to change the tile color and also other colors. However, I also wanted to change the background image of the individual tiles. I searched around for a few tutorials but could not find anything that works.

What i did sp far was to right-click on the tile and inspect, to find the tile id: __tile2

I then inserted the followin CSS code in the css tab in ui theme designer:

“__tile2” {

background-image: url(“https://www.myimage.com.jpg”);

background-repeat: no-repeat;

background-position: center;

background-size : 200px 200px;

}

But that does not seem to have any effect at all after I publish and reload the page.

Does anyone know how to accomplish this, and if it is even possbile ?

Thank you.

[fabiobrandao]

Thank you Dominik, I was able to make my customization via css in UI Theme Designer, which is working fine. However, this means that for a multi-tenant application, I would have to create a site manually everytime for a new subaccount. Is there a way to embbed the theme into the application itself ? I mean the theme that I have created in UI theme designer.

Thank you very much for your input !

[dsch]

Hi Fabio,

what you try to achieve is currently not intended for custom theming. Tile parameters available for custom theming are

• background colors,
• border colors,
• text colors,
• the color of the separator (between title and body) of cards, and
• icon colors

You can find the whole list here: baseTheme/base.less on github.com.

So your approach of adding custom CSS is the only possible one. Although you have to be aware that custom CSS is in your own responsibility, i.e. you have to adapt them to changes e.g. of your UI5 runtime.

The problem you're facing is that it's hard to reliably target a single tile with custom CSS. Your __tile2 id is most probably generated by the Fiori Launchpad, if I would have to guess then it would be the id for the 2nd tile rendered (or 3rd, if they start counting from 0).

Unfortunately I as well don't see a generic/better way of targeting specific tiles without changing the rendering (i.e. adding stable ids or something like this).

Then the only helpful hint I could give is that, in CSS, ids are targeted with a #, not in double quotes (i.e. your custom CSS is syntactically invalid). Please try if this small change has the desired effect:

#__tile2 {
  background-image: url("https://www.myimage.com.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 200px 200px;
}