Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
cancel
Showing results for 
Search instead for 
Did you mean: 
former_member9607
Active Participant
5,843

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. :smile:

 



 

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 :smile:



Figure 1 : Tiles



Figure 2 : Split App



Figure 3 : Tiles - 2



Figure 4 : List 1                                                                                   Figure 5 : List 2



Figure 6 : Header Data                                                                       Figure 7 : Select



Figure 8 : List 3



Figure 9 : Tab



Figure 10 : Slider



  Figure 11 : Segmented Button



Figure 12 : Check Box



Figure13 : Radio Button



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 :smile:


 


Krishnakant Joshi | (external link removed)



2 Comments
Labels in this area