Skip to Content
Technical Articles

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 :

logo.JPG

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.

Login page.JPG

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.

div.JPG

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.

div2.JPG

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

bg.JPG

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

44 Comments
You must be Logged on to comment or reply to a post.
  • 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

    • 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

    • 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

    • 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” 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

  • 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.

    March 13 1.png

  • 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.

    • 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

  • 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.

    • 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).

  • 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

    • 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.

      Sree

    • 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

  • Hello Tejas,

    ice blog. I am stuck with changing the background image in my FIORI Launchpad home page. I am not using the custom CSS but trying to change the background image via the quick theming option.

     

    Unfortunately The image though uploaded in not reflected in the preview and nor when I try to save and build and run preview application. It is strange because when I for example change the tile colour it reflects just fine, but changing the background image of the application  or the background colour doesn’t seem to work.

    Could you let me know where I might be going wrong?

     

    Regards,

    Suman

  • Hello Tejas,

     

    I replaced the background image in Fiori login sceen by uploading the image in Mime repository. But My backgorung image has a customer logo and that’s not visible on logon page. Also SAP logo and Copyright I want to hide. Do I need to change it in template_css? How do I access this file?

     

    Thanks

    smriti

    • Hi Smriti,

      SAP logo is also a image in MIME, though it needs to be done through below procedure.

      Please read the last part of blog :

       

      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.

      Regards,

      Tejas

      • Hello Tejas,

        Many thanks for your prompt reply and sorry for reverting late. I will do it using custom class. Thanks for the nice blog.

         

        Regards,

        Smriti

      • Hello Tejas,

         

        I create a z class, redefined the method init default propertis, and as i want to remove sap logo and copyright text, I commented these lines, activated the zclass and set it in sicf


        SPAN {
        font-family: “Courier New”;
        font-size: 10pt;
        color: #000000;
        background: #FFFFFF;
        }
        .L0S31 {
        font-style: italic;
        color: #808080;
        }
        .L0S33 {
        color: #4DA619;
        }
        .L0S55 {
        color: #800080;
        }
         set_propertyiv_name ‘img_logo’ iv_value ‘/sap/public/bc/ui2/logon/img/sap_logo.png’ ).
        *  set_property( iv_name = ‘img_logo_width’ iv_value = ’64’ ).


        SPAN {
        font-family: “Courier New”;
        font-size: 10pt;
        color: #000000;
        background: #FFFFFF;
        }
        .L0S31 {
        font-style: italic;
        color: #808080;
        }
        *  set_property( iv_name = ‘label_copyright’ iv_value = m_txt_copyright ).

        However, it does’t have any effect. Can you pls advise if I am doing something wrong here? Do I need to change in template_css then?

        thanks

        smriti

  • Hello Tejas,

     

    could you pls tell if I do not have access to sap gui , can I also customise the logon page by accessing the required transactions thru app finder in fiori 2.0?

     

    Thanks

    Smriti

      • Hello Tejas,

         

        yes , i could access MIME repositort thru Object Navigator in App finder. It wasn’t present be default and I  had to add it from utilities. Then I  was able to replace the background image by upload and replace functionality. However SICF transaction was not running on the launchpad so I didn’t try the other settings like copyright logo in custom class.

         

        Thanks for replying

        Smriti

  • Hey Tejas,

    I am having issues with the customized launchpad login page. I have fours links that route to other apps but most times only 2 out 4 of those links work.

    I am also having issues with the look of it when the launchpad is open on any other browser other then chrome. Is CSS an known issue on other browsers and is there a way to solve this problem?

    • Hi Babalwa,

      For browser issues on not behaving the same in other browser. Please check for the updated UI libraries, Can be because, your library is at lower level or requires some upgrade. The libraries are related to SAP_UI component in your frontend system.

      For Custom login page, you need to modify standard CSS and create a custom class, as specified above. Touching the standard CSS folder in mime repository may effect  any upgrade planned, since after SP upgrade, the files are overwritten and customizations are lost.

      Regards,

      Tejas