Skip to Content
Apr 21, 2020 at 11:31 AM

CSS Theming SAP Icon in Fiori Launchpad

54 Views Last edit Apr 21, 2020 at 11:34 AM 2 rev

I want to theme the background color of the back button, also the avata, the home, the search and the title when they are clicked (using :active). The serach button is also displayed along this first row of the fiori launchpad.(the screenshot is a different one)

this is how it looks in my fiori launchpad:

I'm able to theme the background :active action of the icon with:

.sapUshellShellHeadItm span:active{ background: #4661a0!important; }

(its nearly the same blue as the background, I know, but its enough to highlight it, even if you can barely see it here)

but somehow a different background color for the icon (not custom themed my myself) is shown (black), when you click on the red marked fields, shown in the next screenshot. If you directly click on the icon, the blue backgroudn is shown (#4661a0)

How can I select those with css?

I would be happy for any advice!

P.S. using the UI Theme Designer

Many thanks in advance!


2.png (23.5 kB)
0.png (995 B)
1.png (1.8 kB)
4.png (1.9 kB)
3.png (2.5 kB)