CSS for Fiori Launchpad

[former_member182874]

In my previous blog, I shared insights on using CSS on your Fiori Login page.

Using/Customizing CSS in SAP Fiori Login Page

In this blog, we will see how we can customize our standard SAP Fiori Launchpad look and feel and some CSS tweaks as well to make your Launchpad more attractive. Thanking SAP for introducing SAP Fiori and other UX strategy, which is for sure going to rule the market in near future with there business applications on mobile.

Launchpad (earlier launchpage) now has many new features which has cleared many restrictions which were not possible in SAP GUI screens, UI5 surely is the boss here.

SAP Fiori Launchpad is a one stop for all the tiles(applications/usecases) . User can add or remove the tiles and can personalize as per their requirement.

So till what level you can customize the launchpad, is the question :???:

The best and the cheapest option is using Theme Designer

1. Use /ui5/theme_designer to open the URL in your browser. Add the Launchpad URL and open the CSS tab.

2. Find all the div and classes where you want your code to affect.

Not a CSS expert though, but will share some of the screens which I tried and show how can this be done. Below transitions will show you how the launchpad is changed from the start.

• Here you can see, we have added custom background image and made the tile transparent.

• Here you can observe the change on the tile shape and sap icons colors are changed from blue to red.

Here the Font is changed to red now.

How to achieve above task ?

1. Open theme designer.

2. Add your Fiori launchpad URL.

3. Now open your CSS tab and right click on the preview page and open inspect element.

4. Click on magnifying glass, as shown .

5. Now hover your mouse pointer over all the elements displayed in the launchpad to get the id of the elements.

6. Here below I am showing you the same. I have kept my mouse over the "Group name" Fiori CSS and it shows me the id . Also it will show you on the footer of inspect element.

7.Take the id in your css tab and modify it as you want :smile:

8. You can use font size (px,em,rem) , font-weight (bold,italic), font-color( #colorcodes),

Similiarly I show you another screen.

Click on the SAP -Tile icon and get the id of the element and change the color as required. :smile: You can clearly see sap default colors on the style tab below. Modify the color and deploy the same in your css code to take the effect.

CSS code snippet:

• How to make your tile transparent ?

.sapUshellTile{ background-color: transparent;}

• Code for achieving above style of launchpad :

.sapUshellTile{background-color:rgba(255,255,255,0.55);

-webkit-box-shadow: 7px 7px 20px 0px rgba(0,0,0,0.3);

-webkit-border-top-left-radius: 2em; 

-webkit-border-bottom-right-radius: 2em; 

border-top-left-radius: 2em;

border-bottom-right-radius: 2em;}

.sapUshellContainerTitle{color:#980000;font-weight:bold;font-size: 30px;}

.sapUshellTileBase .sapUshellTileBaseIcon{color:#980000;}

.sapUshellTileBase .sapUshellTileBaseTitle {color: #980000;}

References : Colorful Fiori - Part 3 - Sea Blue

Enjoy and cheers : :smile:

Tejas