Skip to Content
Author's profile photo Krishnakant Joshi

Colorful Fiori – Part 1 – Red


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



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


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

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


                                             Figure 2. Tiles


Figure 3. List


Figure 4. Tab 1


Figure 5. Tab 2


          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 */
.sapMList .sapMLIB.sapMGHLI{background-color:#e9d4b3;}
.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;}
.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}


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.



Colorful Fiori – Part 2 -Yellow Green

Hope you liked it 🙂

Happy Learning 🙂

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Chandrashekhar Mahajan
      Chandrashekhar Mahajan

      Nice Job Krishnakant Joshi !


      Look and feel is one of the important aspect of web application and it is also crucial for branding!




      Author's profile photo Krishnakant Joshi
      Krishnakant Joshi
      Blog Post Author

      Thanks Chandrashekhar

      Author's profile photo Former Member
      Former Member


      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

      Author's profile photo Krishnakant Joshi
      Krishnakant Joshi
      Blog 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.




      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Krishnakant Joshi
      Krishnakant Joshi
      Blog 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.




      Author's profile photo Former Member
      Former Member

      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.




      Author's profile photo Krishnakant Joshi
      Krishnakant Joshi
      Blog 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.




              Check the source of the style attributes.




             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.




      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Krishnakant Joshi
      Krishnakant Joshi
      Blog 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.





      Author's profile photo Former Member
      Former Member

      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 .

      Author's profile photo Former Member
      Former Member

      Good one Krishnakanth. Can you please tell me how we can achieve grouped table in UI5?

      Author's profile photo Krishnakant Joshi
      Krishnakant Joshi
      Blog 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 ?




      Author's profile photo Former Member
      Former Member

      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




      Author's profile photo Former Member
      Former Member



      How can you give a background image to a tile (neither the colors and nor the subtitle fields) ?




      Author's profile photo sam jon
      sam jon



      It's not working .

      Kindly help me.