Skip to Content

Introduction

In my previous post Colorful Fiori – Part 1 – Red, we have seen how can we change fiori theme from traditional to different color.

 

This blog will show you a different color of fiori. In this blog i have also changed the theme of new launchpad. you can see the images below and try to make your fiori colorful. 🙂

 

1.JPG

 

Content

In this blog i will share the images, color codes, css classes.

Here We Go

We will talk in the context of the “sap_bluecrystal”

Yellow Green is the color of the day 🙂

5.JPG

Figure 1 : Tiles

2.JPG

Figure 2 : Split App

3.JPG

Figure 3 : Tiles – 2

4.JPG6.JPG

Figure 4 : List 1                                                                                   Figure 5 : List 2

16.JPG/wp-content/uploads/2014/04/14_424881.jpg

Figure 6 : Header Data                                                                       Figure 7 : Select

13.JPG

Figure 8 : List 3

7.JPG

Figure 9 : Tab

11.JPG

Figure 10 : Slider

10.JPG

  Figure 11 : Segmented Button

8.JPG

Figure 12 : Check Box

9.JPG

Figure13 : Radio Button

12.JPG

Figure 14 : List 1

Color Codes

 

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

Existing New
#009de0 #9acd32
#006ca7 #9acd32
#007cc0 #9acd32
#00679e #9acd32
#e6f2f9 #f4ffd7
#e2ecf3 #f4ffd7

Css Class


.sapMPageScroll{
background: -moz-linear-gradient(top,  #f4fff4 0%, #d6dbbf 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f4fff4), color-stop(100%,#d6dbbf)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #f4fff4 0%,#d6dbbf 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #f4fff4 0%,#d6dbbf 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #f4fff4 0%,#d6dbbf 100%); /* IE10+ */
background: linear-gradient(to bottom,  #f4fff4 0%,#d6dbbf 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4fff4', endColorstr='#d6dbbf',GradientType=0 ); /* IE6-8 */
}
.sapMGlobalBackgroundColor{background-image:linear-gradient(to bottom,#3D3D3D 0,#7d7e7d 100%);}
.sapMGlobalBackgroundImage{background-image:none;}
.sap-desktop .sapMBar.sapMPageHeader{background-color:#9acd32 !important; }
.sapMBar-CTX .sapMLabel{color:#ffffff;}
.sapMTile{
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  -khtml-border-radius: 10px;
  border-radius: 10px;
background: -moz-linear-gradient(top,  #ffffff 0%, #f6f6f6 47%, #ededed 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(47%,#f6f6f6), color-stop(100%,#ededed)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* IE10+ */
background: linear-gradient(to bottom,  #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-8 */}
.sapMPullDown{background-color:#ffffff;}
.sapMList .sapMLIB.sapMGHLI{background-color:#F0FFC9;}
.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}
.sapUshellTileInner{ -moz-border-radius: 10px;
-webkit-border-radius: 10px;
 -khtml-border-radius: 10px;
border-radius: 10px;
border:1px solid black;
background: -moz-linear-gradient(top,  #ffffff 0%, #f6f6f6 47%, #ededed 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(47%,#f6f6f6), color-stop(100%,#ededed)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* IE10+ */
background: linear-gradient(to bottom,  #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-8 */}

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.

 

 

Happy Learning 🙂

 

Krishnakant Joshi | (external link removed)

To report this post you need to login first.

2 Comments

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

Leave a Reply