SAP for Mobile: Using/Customizing CSS in

SAP Fiori Login Page

Posted by Tejas Chouhan Jan 2, 2015
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 famous Flower background image.

Let us first observe, from where do they come from

the MIME repository.

: Obviously as this is the Gateway system. Its stored in

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

Generated by Jive on 2016-07-15Z

1

SAP for Mobile: Using/Customizing CSS in SAP Fiori Login Page

Things you will need :

1) Client 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 3 versions of it : Desktop, Mobile
Landscape, Mobile Vertical.
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.

(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
For the love of cartoons, I have tried this and you can as well try it out and make your customer's happy.

Modifications done to achieve above :

Generated by Jive on 2016-07-15Z

2

SAP for Mobile: Using/Customizing CSS in SAP Fiori Login Page

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.

Generated by Jive on 2016-07-15Z

3

SAP for Mobile: Using/Customizing CSS in SAP Fiori Login Page

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

Generated by Jive on 2016-07-15Z

4

SAP for Mobile: Using/Customizing CSS in SAP Fiori Login Page

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, if you are not willing to upgrade your SAP UI5
library . If you have implemented above steps and you upgrade your library version, your changes will be gone
and not saved.
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.

Jeremy Good Here you go

Cheers
Tejas
7764 Views Tags: sap_mobile, sap_fiori, fiori, loginpage_fiori, fiori_css

Tarun Sharma
Apr 28, 2016 9:47 AM
Nice Explanation Tejas
Sreehari V Pillai in response to Bhavin A Shah on page 10

Generated by Jive on 2016-07-15Z

5

SAP for Mobile: Using/Customizing CSS in SAP Fiori Login Page

Jan 28, 2016 12:39 PM

Tejas Chouhan CC
You must be able to do this , as the background image is loaded from mime repository and the
path is feed by abap logic. /UI2/CL_SRA_LOGIN - extend this class and make z class. re define
INIT_DEFAULT_PROPERTIES method and write your logic here.
Sreehari
Tejas Chouhan in response to Sreehari V Pillai on page 6
Jan 28, 2016 5:08 AM
Yep, you are correct
Tejas Chouhan in response to Guru Raj on page 6
Jan 28, 2016 5:07 AM
You can open theme designer on cloud and deploy your changes on advanced option. But not sure for login
page, as the mime rep objects will be present on your on premise system. No thoughts on above.
Regards,
Tejas
Guru Raj
Jan 25, 2016 2:37 PM
Hi Teja,
How to do this in HCP.
Regards
Guru
Hemendra Sabharwal
Sep 25, 2015 12:41 PM
Nice blog Tejas.
Warm Regards
Hemendra
Sreehari V Pillai in response to Tejas Chouhan on page 7
Jul 21, 2015 1:43 PM
Why to enhance
create own class and inherit from standard. Redefine the INIT_DEFAULT_PROPERTIES
method and do what ever you want . Configure this custom class instead of the standard one.
Sreehari V Pillai in response to Kavitha G on page 7
Jul 21, 2015 1:42 PM
dear .. do not overwrite any of the mime object as said in the blog. Instead create your own class and inherit
it from "/UI2/CL_SRA_LOGIN" . You can redefine the "INIT_DEFAULT_PROPERTIES" method and make
changes in that.. If i remember , there is a property to adjust the image width as well.

Generated by Jive on 2016-07-15Z

6

SAP for Mobile: Using/Customizing CSS in SAP Fiori Login Page

Sree
Kavitha G in response to PARTH BUDHIRAJA on page 7
Jul 21, 2015 1:03 PM
Did you achieve this? Am trying the same and facing the same issue. The logo image size comes from the img
src width set by SAP (no idea in which file it is defined).
Kavitha G
Jul 21, 2015 1:00 PM
Hi Tejas Chouhan
I replaced the SAP logo with customer logo but the width of the logo is coming from the img src. So I'm not able
to resize it using any of the CSS classes in template_css.css file. How did you achieve the cartoon network
logo size by just replacing the sap_logo in the mime repository?
Thanks
Kavitha
PARTH BUDHIRAJA
May 11, 2015 12:46 PM
Hi Tejas
Very nice blog. I just want to change the size of the logo I have uploaded. I did the following changes so that
my image get enlarge, but all in vain. The image source tag <img> contains fixed width of 64px everytime I load
the launchpad. How to solve this. Your kind help is needed.
sapUiSraLoginLogo {
1. position : absolute;
2. left : 16px;
3. height: 32px;
4. width: 50px;
}
Note: I have uploaded the logo of exactly same dimension as original sap_logo does.

Tejas Chouhan in response to Trilochan Bagauli on page 7

Apr 27, 2015 4:28 PM
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
Enhance the method and keep whatever text you want.
Reg
Tejas
Trilochan Bagauli

Generated by Jive on 2016-07-15Z

7

SAP for Mobile: Using/Customizing CSS in SAP Fiori Login Page

Apr 27, 2015 2:53 PM

Hi,
Very nice blog. we have a requirement where we have to change the text of Log On or Change Password
button.
could you please help how we can achieve this.
Abhishek Modi
Apr 3, 2015 3:42 PM
Very nice blog. I am unable to see the images in this blog, is this happening with only me or everyone else?
Rheema Rahael in response to Tejas Chouhan on page 8
Mar 17, 2015 10:04 AM
Thanks! The issue is now solved by our Basis team
Tejas Chouhan in response to Rheema Rahael on page 8
Mar 13, 2015 11:34 AM
Authorization error. Check with basis team
Check su53 any auth object is missing
Rheema Rahael
Mar 13, 2015 10:18 AM
Hi Tejas,
While I am trying to upload and replace the login_background image in MIME Repository the below error is
displayed. Could you please clarify it.

Tejas Chouhan in response to Hardeep Singh on page 8

Feb 13, 2015 6:28 PM
Thanks
Hardeep Singh
Feb 13, 2015 1:33 PM

Generated by Jive on 2016-07-15Z

8

SAP for Mobile: Using/Customizing CSS in SAP Fiori Login Page

Nice and explanatory blog.

Tejas Chouhan in response to Rajan Murthy on page 9
Feb 9, 2015 6:25 AM
Just a quick check. Its at SAP - Public - BC - UI2 - Logon - Template_login.html..Right ? : Yes the path is
correct
Tejas Chouhan in response to Rajan Murthy on page 9
Feb 9, 2015 6:09 AM
Language option can be removed from sicf node. Goto sap-> bc-> ui5_ui5 ->ui2 ->ushell, double click and go
to Error pages tab -> Logon Errors -> configuration change mode.
Uncheck language option inside System logon settings and save.
Regards
Tejas
Rajan Murthy in response to Tejas Chouhan on page 9
Feb 9, 2015 5:53 AM
Hi Tejas,
Thanks for the heads-up. Just a quick check. Its at SAP - Public - BC - UI2 - Logon Template_login.html..Right ?
Although my Fiori URL is https://XXX.XXX.XXX:44300/sap/bc/ui5_ui5/ui2/ushell/shells/abap/
FioriLaunchpad.html?sap-client=100&sap-language=ES, I still get the Language Option after Username and
Password, giving the user options to select German, English and Spanish.
How do I remove that or it can be controlled somwhere else ?
I just want to keep "Username", "Password" and "Login" buttons in my Fiori Login Screen.
Regards,
Rajan Murthy
Tejas Chouhan in response to Rajan Murthy on page 10
Feb 8, 2015 7:58 AM
Hi Rajan,
You need to check template_login.html file in MIME rep. It has @label_change_password. Edit this html file
and remove the property.
</div><div class="sapUiSraBtnBlock sapUiSraLoginHidden sapThemeBarBG"><button
type="button" id="CHANGE_PASSWORD_LINK" class="sapMBtn sapMBtnDefault"

Generated by Jive on 2016-07-15Z

9

SAP for Mobile: Using/Customizing CSS in SAP Fiori Login Page

onclick="fioriLogin.submitLogin('@sys_form_input_processing', '@sys_form_event_changepwd',
true)"><span class="sapMBtnContent sapMLabelBold">@label_change_password</span></button>
</div></div>
Regards,
Tejas
Rajan Murthy
Feb 8, 2015 6:38 AM
Tejas, I want to remove "Change password" from the login Screen..whats the best way to do that
Tejas Chouhan in response to Sreehari V Pillai on page 10
Jan 21, 2015 8:41 AM
Thanks
Sreehari V Pillai
Jan 21, 2015 8:14 AM
Cool one Tejas.
Tejas Chouhan in response to Bhavin A Shah on page 10
Jan 8, 2015 6:55 AM
Hi Bhavin,
Right now the page is static, as we have replaced SAP login page with ours.
Once your new products are launched, may be you have to handle it manually by replacing the previous image
with the new one.
Reg
Tejas
Bhavin A Shah
Jan 8, 2015 6:39 AM
Hi Tejas,

That's a great blog

. However, I would like to know whether I can change my logon wall paper dynamically

with my new products launch

Regards,
Bhavin
Tejas Chouhan in response to Syam Babu on page 10
Jan 7, 2015 5:40 PM
Thank you Syam !

Generated by Jive on 2016-07-15Z

10

SAP for Mobile: Using/Customizing CSS in SAP Fiori Login Page

Syam Babu
Jan 7, 2015 10:13 AM
Well explanation Tejas
Thanks,
Syam
Tejas Chouhan in response to Jeremy Good on page 11
Jan 7, 2015 8:08 AM

Jeremy Good
Jan 6, 2015 11:44 PM
Thank you Tejas!

Generated by Jive on 2016-07-15Z

11