Using/Customizing CSS in SAP Fiori Login Page

Hello everyone,

Most of the customers are not ready to adopt the SAP Standard Fiori Login page theme and they want to go for their own branding and theming. Branding and theming can extend from Client Logo to the color coding as per the customer requirement.

For people who are not aware of Standard Fiori logon screen :

Now what are the elements in the screen –  SAP Logo , Copyright text, Username Password field , Logon and Change Password field and the last but not the least : The Flower background image.

Let us first observe, from where do they come from 😕 Fiori logon is generated from the frontend system, hence go to MIME repository where all the images are stored.

Path : SAP -> Public -> BC -> UI2 -> logon ->img

Dig out to find the path for template_css.css file, where all the layout and color codings are well set. You can very well download it and modify and replace. And template_login for the layout of your client logo. Hell yeah, we want to make the logo responsive too 😎 . Make sure you make a copy of SAP version for future reference

Things you will need :

1) Customer Logo

2) Background image

3) Color coding for Log On

4) Layout for the logo and the Login form.

5) Copyright text- if required.

Note : Whenever you are adding a background image, do get ready with 4 versions of it : Desktop, Mobile Landscape, Mobile Vertical and IE version.

You can refer blogs in SCN which will give you a detailed version of enhancement required in the class : /UI2/CL_SRA_LOGIN ::: Method : INIT_DEFAULT_PROPERTIES only if you want to disable any of the available values specified above. If you are just replacing the SAP content with your customer’s content. Then no need of enhancement.

UPDATE : (Refer to the NEW section below as changing the standard code is not recommended)

Once you are done with replacing of images in the mime rep and modifying the CSS files as per your client requirement. You are just done.

I uploaded the sample image from google and here is how it looks like. You can notice that I have moved the SAP logo layout and inserted new logo, somewhere on top of the credential which can be done using template_css file.

Modifications done to achieve above :

• Replace : login_background with “Johny bravo background“ with same naming convention as used by SAP.
• Replace sap_logo.png with “CartoonNetwork.png“
• Modifications done in template_css.css file.

Like color of “LOGON” to black

Layout of Cartoon Network logo from bottom to center alligned. ( To be done in template_login )

Distance of logo from bottom, top,left and right.

Layout of Login form.

A shortcut to find out the class and div is using inspect element in Chrome/Firefox of CSS is shown below :

1. F12 in the screen or Right click and click on Inspect element in the browser once the page is loaded. Click on the Magnifier icon.

Drill down to <div tag and you can see the logo id and will be displayed above the logo as well. .sapUiSraFooter. Now find the same id in your css file and modify as required. if you click on the class below.

Right screen will show you all the styles used in the class :Here you see background-color: is blue. Click on it and you can change as required, but it will be a temporary change. To save it, deploy the same solution in your css code to be modified in template_css.css

For eg : Changing the login button color, when you are hovering over the button :

.sapMBtn.sapMBtnEmphasized:hover { background-color: #7FFF00; border-color: #7FFF00; } Gives you a green color

For login page customization, below ids will be useful :

.sapUiSraLoginLogo

.sapUiSraLoginCopyright

.sapUiSraLoginPage

.sapUiSraLoginButtonBlock

.sapUiSraLoginForm

Important CSS values :

• { margin-top: 120px; margin-right: auto; margin-left: auto; width: 400px; } Means that the object lies 120 px from the top of the page. Right and left are auto adjusted and the width of the object is 400px
• background-color: transparent; – The input field is transparent.
• { background-color: #7FFF00; border-color: #7FFF00; } : BGColor is green. Check google for colorcodes, border of the box is also same color.
• .sapUiSraLoginForm .sapMLabel : Means that sapMLabel is inside .sapUiSraLoginForm
• position: absolute; : CSS position property

Remember to always change the same in all the view : mobile desktop and mobile landscape.

In my next blog : I will show you, how you can use CSS in your launchpad to change Tile colors, background, Theme and Texts, Font colors, Font size and other things. Check below :

CSS for Fiori Launchpad

Let me know if you want to know more about the page customization.

NEW : Please note : Above steps should only be performed for POV purpose, do not implement this on productive landscape. The changes will revert to original standard images by SAP when you upgrade the UI5 library version.

Instead, create a custom class-> ref to /UI2/CL_SRA_LOGIN and include method : INIT_DEFAULT_PROPERTies ( be your custom ) and configure the same in your sicf node properties.. Also add your custom images on your mime rep.

Don’t forget to replace standard class name with your custom class “Z” in below path in SICF -> ushell node -> error pages -> configuration.

Once saved, your custom images will appear in login background.

Cheers 😉

Tejas