Skip to Content

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 famous Flower background image.

Let us first observe, from where do they come from 😕 : Obviously as this is the Gateway system. Its stored in the MIME repository.

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

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

To report this post you need to login first.

39 Comments

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

  1. Bhavin A Shah

    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

    (0) 
    1. Tejas Chouhan Post author

      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

      (0) 
    2. Sreehari V Pillai

      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

      (0) 
    1. Tejas Chouhan Post author

      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

      (0) 
      1. Rajan Murthy

        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

        (0) 
        1. Tejas Chouhan Post author

          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

          (0) 
  2. Rheema Rahael

    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

    (0) 
  3. Trilochan Bagauli

    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.

    (0) 
    1. Tejas Chouhan Post author

      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

      (1) 
      1. Sreehari V Pillai

        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.

        (0) 
  4. PARTH BUDHIRAJA

    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.

    (0) 
    1. Kavitha G

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

      (0) 
  5. Kavitha G

    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

    (0) 
    1. Sreehari V Pillai

      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

      (0) 
    1. Tejas Chouhan Post author

      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

      (0) 
  6. Suman Biswas

    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

    (0) 
  7. Smriti Gupta

    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

    (0) 
    1. Tejas Chouhan Post author

      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

      (1) 
      1. Smriti Gupta

        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

        (0) 
      2. Smriti Gupta

        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

        (0) 

Leave a Reply