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.

CSS1.JPG

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

CSS2.JPG

Here the Font is changed to red now.

CSS3.JPG

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),

css4.JPG

Similiarly I show you another screen.

css5.JPG

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 :


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

Tejas

To report this post you need to login first.

8 Comments

You must be Logged on to comment or reply to a post.

  1. PARTH BUDHIRAJA

    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

    Parth

    (0) 
  2. Waqas Ansari

    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.

    Regards

    Waqas

    (0) 
  3. 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!

    (0) 

Leave a Reply