Introduction

This blog is about creating themes for SAP FIORI and for SAPUI5 custom applications.

In these series of blogs i will share different colors of fiori 🙂 . I will try to create fiori themes using different colors. You all are most appreciated to mark your likes or dislikes 🙂 . All suggestions are most welcome.

I always love to play around with CSS. I have worked as Web designer at my previous employer where i learnt web designing. Today i am happy that in SAP again i got something which i love to do 🙂 .

Page.JPG

Content

In this blog i will share the images, color codes, css classes and how can we use those classes in application.

References

  1. Create and Apply Custom Theme to SAPUI5 Application
  2. SAPUI5 SDK – Demo Kit
  3. Ultimate CSS Gradient Generator – ColorZilla.com

Here We Go

We will talk in the context of the “sap_bluecrystal”

Let us start with RED color for theme.

Page - Copy.JPG

Figure 1. Full application preview


caaada.JPG

                                             Figure 2. Tiles


sdaa.JPG

Figure 3. List

3.JPG

Figure 4. Tab 1


6.JPG


Figure 5. Tab 2


77.JPG


          Figure 6. Mix


Lets Discuss


Hmmmm… did you see something new?

Everything RED 🙂 you may not like RED but yes we have something new.


What i did for this ?

  • Custom theme created
  • Few color code changed
  • Added new css class

How i achieved this?


I used standard blue_crystal theme for my application.

To create custom theme you can refer the document which i have referred at the beginning of this blog.

Apply that theme to your application and Bingo !!! You will Rock 🙂


Color Code


Replace the left hand side color codes with right hand side colors in your theme.


#009de0 = #CF0404

#006ca7 = #ff3019

#007cc0 = #CF0404

#00679e = #ff3019

#e6f2f9 = #eaefb5

#dddddd = #666666


Source Code


below are the classes which i have overridden.
You can put these classes in your custom .css file and give reference of that .css file in your index page or you can put it in  your theme designer’s CSS panel.


.sapMGlobalBackgroundColor{background-image:linear-gradient(to bottom,#fcefec 0,#ffb9ab 100%);}
.sap-desktop .sapMBar.sapMPageHeader{background-color:#CF0404 !important; }
.sapMBar-CTX .sapMLabel{color:#ffffff;}
.sapMTile{-moz-border-radius: 10px;  -webkit-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px;
  background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top,  #ffffff 0%, #f3f3f3 50%, #ededed 51%, #ffffff 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(50%,#f3f3f3), color-stop(51%,#ededed), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%); /* IE10+ */
background: linear-gradient(to bottom,  #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}
.sapMPullDown{background-color:#ffffff;}
.sapMList .sapMLIB.sapMGHLI{background-color:#e9d4b3;}
.sapMSFB{background:#d6dbbf}
.sapMBar-CTX .sapMBtnContent>.sapUiIcon,.sapMBar-CTX .sapMBtn{color:#ffffff;}
.sapMPageHeader.sapMBar-CTX .sapMBtn, .sapMPageHeader.sapMBar-CTX .sapMSlt{border-image:linear-gradient(#000000 8.33%,#666666 8.33%) 0 100%;}
.sapMSplitContainerMaster:not(.sapMSplitContainerMasterVisible):before{border-right:1px solid #000000;}
.sapMShellBrandingBar{background-color:#000000;}
.sapMBar.sapMPageHeader:before{border-top:0.25rem solid #000000;}
.sapMFooter-CTX .sapMSegBBtn{border-color:#000000;}
.sap-desktop footer.sapMBar, .sap-desktop footer.sapMBar.sapMBarTranslucent{background-color:#000000; !important}






Suggestions


Make sure that your change will affect only to those controls, of which, you want to change the style

for example : giving border-radius to .sapMBtn will give rounded border to all buttons irrespective of their location and types.

                   

Next


Colorful Fiori – Part 2 -Yellow Green


Hope you liked it 🙂

Happy Learning 🙂

To report this post you need to login first.

15 Comments

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

  1. Jiri Neuzil

    Hi,

    many thanks for yor style, I copied it, everything is fine, but only the header texts in m.Page are still grey (SAPUI 1.20), I need the white ones as you have

     

    Thanks Jiri

    (0) 
    1. Krishnakant Joshi Post author

      Hi Jiri,

       

      Thanks for using it .

       

      Put the below class in your style sheet.

       

      .sapMBar{color : #ffffff !important;}

       

      If you have crated a custom theme then you can also make changes using theme builder.

       

      Regards,

      KK

      (0) 
      1. Jiri Neuzil

        Hi Krishnakant,

        many thanks! Works like charm, and the last problem is that red background color is not shown when running on mobile device (emulated in desktop chrome)…I’ve tried to find the standard color (#f2f2f2) in library.css, I’ve found some classes but no sucess when I’ve overwritten them…..What is the recommended process how to find css class for given element?

         

        Many thanks Jiri

        (0) 
        1. Krishnakant Joshi Post author

          Hi Jiri,

           

          You can use the same css class for background color also.


          .sapMBar{color:#fff !important; background-color:#ff3019 !important;}


          The best and the simple way to find the css class attached to any element is “Inspect Element” in your browser.


          For google chrome :

           

          1. Right click on you element,
          2. Click on Inspect Element.
          3. Check the style tab in right panel.
          4. You can see all the applied css classes.

           

          Please see the below image for your reference.

           

           

          Image.JPG

          (0) 
  2. Kalpana Tyagi

    Hi KK,

     

    I have created a custom theme using the theme designer .

    I can see some changes taking effect in the preview but not all. For e.g. the tile title color, icon color did not change.

    When I use the sap-theme parameter with the fiori launchpad url, I do not see any of the tiles. Only button I see is the logout button.

    Appreciate your help, in identifying what I might be doing wrong.

     

    Thanks

    Kalpana

    (0) 
    1. Krishnakant Joshi Post author

      Hi Kalpana,

       

      I have few suggestions for you,

       

      1. Check whether the style you have applied to any of the control has taken place or not?

         

          How to do that?

       

          You can right click on that control and click on inspect element.

       

          /wp-content/uploads/2014/06/1_467876.png

          

              Check the source of the style attributes.

       

           /wp-content/uploads/2014/06/2_467878.png

       

             If it is not reflecting which you have applied then recheck that you have properly published the theme.

       

      2. Clear browser cache.

       

      3. Reload page using ctrl+F5

       

      4. Check the current version of the SAPUI5 runtime library and the version when you created the theme.

       

      Please let me know if you still face a problem with theme after cross checking above points.

       

      Regards,

      KK

      (0) 
  3. Sakthivel Elango

    I dont think, it’s is a better way to customize the entire theme by overriding CSS Classes! UI5 team doesn’t guarantee the CSS class names to be stable across all the versions. So, when the UI5 version is upgraded, it might break (if class names are changed) ! Not recommended for productive applications, Instead create a new theme

    (0) 
    1. Krishnakant Joshi Post author

      Hi Sakthivel Elango

       

      I appreciate your inputs in customizing theme. The above document shows how you can use that Custom CSS panel in Theme Builder. The option is given for overriding or adding some additional CSS Styles to existing classes or elements. Now its up to you which way use choose to define your CSS.

       

      As per my experience, Sometimes it is required to put some Custom CSSs for some complex UX requirements which can be achieved through CSS easily.

       

      Regarding those class name changes or additional classes in the new version of theme, Your custom theme will also not work in that case if you have made changes at class level instead. I do not think that UI5 team will come with such solutions where they are changing the old classes. They will add new classes instead.

       

       

      Regards

      KK

      (0) 
  4. M B

    Thanks Joshi,

    the color combination seems to be perfect across the screens.

    Can you suggest where can the source code of the css files are found in a custom developed UI5 app. also please mention where and how to install theme designer .

    (0) 
    1. Krishnakant Joshi Post author

      Hi Suresh,

       

      Thanks for your comment.

       

      Can you please give me some more details about your requirement regarding grouped table?

       

      You want to define style or a new Table control ?

       

      Regards,

      KK

      (0) 
      1. Suresh Kumar

        Hi KK,

         

        Thanks for your quick response. We have a similar requirement to design the same as mentioned in the screen shot below Figure 2 in this blog. Can you please let me know the way to achieve this?sdaa.JPG

         

        Regards,

        Suresh

        (0) 

Leave a Reply