Skip to Content
Author's profile photo Tejas Chouhan

CSS for Fiori Launchpad

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 πŸ™‚

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. πŸ™‚ 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 :


-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 : πŸ™‚


Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      Hi Tejas,

      Very well explained blog. I just want to know how to change the shapes of the tiles as you did in your case. Kindly share the code.

      Best Regards


      Author's profile photo Tejas Chouhan
      Tejas Chouhan
      Blog Post Author


      Thanks, its already shared  : For chrome its webkit, for mozilla its moz.

      Refer reference blog : Colorful Fiori - Part 3 - Sea Blue



      Author's profile photo Former Member
      Former Member


      Thanks for your reply πŸ™‚ . Will try as directed.



      Author's profile photo Former Member
      Former Member

      Hi Tejas,

      Thanks for such a help full blog highly appreciated. I just want to know that can we change the fevicon of the fiori launchpad and if its possible then how to change it. please help me out  was stack from last few days din't found anything.



      Author's profile photo Agnieszka Szczepankiewicz
      Agnieszka Szczepankiewicz

      To Replace the logo image and any other images. Goto Transaction SE80.

      The logo_image for the login page is located in the mime repository under the path:/sap/public/bc/ui2/logon/img/”(other images are located there too). Perform the “Upload and Replace” on the sap_logo.png file (keep the same names for new uploaded images).

      Simple steps to configure Fiori Login\Logoff Page

      Author's profile photo Kenneth Hartman
      Kenneth Hartman

      Great series of documents Tejas!

      I was trying to find out how I can add a banner or some type of static disclaimer to the launchpad. Cannot seem to have any of those options available using simple design. Thanks!

      Author's profile photo Tejas Chouhan
      Tejas Chouhan
      Blog Post Author

      Thanks Kenneth !

      Try seeing

      how they have added disclaimer. This comes as customization, you may need to add a dialog popup.

      Other options are adding a page inside news tile. See here : Do you have a 'News' to share ?



      Author's profile photo Sebastian Meise
      Sebastian Meise

      dear tejas,

      maybe you can help me.

      could you please have a look at my question? I'm looking for the correct css code for box shadows in combination with the hover effect - border lines only when hover -Β in fiori tiles.


      thanks a lot.





      Author's profile photo JAVIER RUBIO

      Hello Tejas,

      Thanks for your blog.


      I am trying to change the Font for some labels by selecting its ID as per your advice.

      ".__item0-anchorNavigationBar-6" --> this is the ID i want to give new font, size, etc


      But after applying the below change in CSS file everything remains the same

      .__item0-anchorNavigationBar-6{color:#EF1232;font-weight:bold;font-size: 90px;}



      Do you know what i am missing, please?