Colorful Fiori – Part 1 – Red

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

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.

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 */
}
.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 🙂