Introduction

This is a part 3 of the colorful fiori series. In my previous posts we have seen the shades of red and green color. In this document we will see the blue shade of the fiori.

Previous

Colorful Fiori – Part 1 – Red

Colorful Fiori – Part 2 -Yellow Green

Screens

We will use the ‘Blue_Crystal’ theme again.

CSS

.sapMGlobalBackgroundColor{background-color:#fff !important; opacity:0.9} 
.sapMGlobalBackgroundImage{background:url('bg.jpg') no-repeat center bottom ;}
.sapMTile{background-color:rgba(255,255,255,0.55) !important;
-webkit-box-shadow: 7px 7px 20px 0px rgba(0,0,0,0.3); /* Safari and Chrome */
-moz-box-shadow: 7px 7px 20px 0px rgba(0,0,0,0.3); /* Firefox */
-ms-box-shadow: 7px 7px 20px 0px rgba(0,0,0,0.3); /* Internet Explorer */
-o-box-shadow: 7px 7px 20px 0px rgba(0,0,0,0.3); /* Opera */
box-shadow: 7px 7px 20px 0px rgba(0,0,0,0.3); /* CSS3 */
-webkit-border-top-right-radius: 2em;
-webkit-border-bottom-left-radius:2em;
-moz-border-radius-topright: 2em;
-moz-border-radius-bottomleft: 2em;
border-top-right-radius: 2em;
border-bottom-left-radius: 2em;}
.sapMStdTileTitle{color:#FE0404;}
.sapMStdTileInfo{color:#000 !important;}
.sapMStdTileIconDiv{color:#014300  !important;}
.sap-desktop .sapMBar.sapMPageHeader{background-color:#3688CB !important;}
.sapMBar-CTX .sapMLabel{text-shadow:none !important;color:#FFFFFF !important;font-weight:bold !important;    }
.sapMShellBrandingBar{background-color:#000 !important;}
.sapMBar.sapMPageHeader:before{border-top:0.25rem solid #000;}
.sapMBar-CTX .sapMBtnContent>.sapUiIcon{color:#000000;}
.sap-desktop footer.sapMBar, .sap-desktop footer.sapMBar.sapMBarTranslucent{background-color:rgba(0, 0, 0, 0.99);}
.sapMHeader-CTX{background-color:#3688CB !important;}
.sap-desktop .sapMDialog>footer.sapMDialogActions{background-color:rgba(0, 0, 0, 0.99);}
.sapMStdTileNum, .sapMStdTileNumM, .sapMStdTileNumS{color:#000 !important;}
.sapMBar-CTX .sapMBtn{color: #000 !important;
text-shadow: none !important;}
.sapMFooter-CTX .sapMSegBBtn.sapMSegBBtnSel{background:#3688CB !important;}
.sapMBtnContent>span{color: #fff !important;
text-shadow: none !important;}
.sapMListBGSolid .sapMLIB{background:rgba(255,255,255,0.8);}
.sapMSLIDescription,.sapMSLITitle{color: #000 !important;}
.sapMListHdr{background-color:#3688CB !important;text-shadow:none;color:#fff;}
.sapUshellTile{background-color:rgba(255,255,255,0.65) !important;
-webkit-box-shadow: 7px 7px 20px 0px rgba(0,0,0,0.3); /* Safari and Chrome */
-moz-box-shadow: 7px 7px 20px 0px rgba(0,0,0,0.3); /* Firefox */
-ms-box-shadow: 7px 7px 20px 0px rgba(0,0,0,0.3); /* Internet Explorer */
-o-box-shadow: 7px 7px 20px 0px rgba(0,0,0,0.3); /* Opera */
box-shadow: 7px 7px 20px 0px rgba(0,0,0,0.3); /* CSS3 */
-webkit-border-top-right-radius: 2em !important;
-webkit-border-bottom-left-radius:2em !important;
-moz-border-radius-topright: 2em !important;
-moz-border-radius-bottomleft: 2em !important;
border-top-right-radius: 2em !important;
border-bottom-left-radius: 2em !important; }
 .sapUshellDashboardGroupsContainer .sapUshellTileContainer .sapUshellContainerTitle{color:#FFFB00 !important;
 font-weight:900 !important; border-botton:3px solid black !important;}
 .sapUshellDynamicTile .sapUshellDynamicTileData.Negative{color:#FF0017 !important;}
 .sapUshellDynamicTile .sapUshellDynamicTileData.Negative .Up{border-bottom-color:#FF0017 !important;}
 .sapUshellDynamicTile .sapUshellDynamicTileData.Negative .Down{border-bottom-color:#FF0017 !important;}
 .sapUshellDynamicTile .sapUshellDynamicTileData.Positive{color:#1ABB00 !important;}
 .sapUshellDynamicTile .sapUshellDynamicTileData.Positive .Up{border-bottom-color:#1ABB00 !important;}
 .sapUshellDynamicTile .sapUshellDynamicTileData.Positive .Down{border-bottom-color:#1ABB00 !important;}
 .sapUshellDynamicTile .sapUshellDynamicTileData.Neutral{color:#373737 !important;}
 .sapUshellDynamicTile .sapUshellDynamicTileData.Neutral .Up{border-bottom-color:#373737 !important;}
 .sapUshellDynamicTile .sapUshellDynamicTileData.Neutral .Down{border-bottom-color:#373737 !important;}
 .sapUshellTileBase .sapUshellTileBaseInfo.Neutral, .sapUshellTileBase .sapUshellTileBaseInfo.None {color:#373737 !important;}
 .sapUshellDynamicTile .sapUshellDynamicTileData.Critical{color:#FF7500 !important;}
 .sapUshellDynamicTile .sapUshellDynamicTileData.Critical{border-bottom-color:#FF7500 !important;}
 .sapUshellDynamicTile .sapUshellDynamicTileData.Critical{border-bottom-color:#FF7500 !important;}
.sapUshellTileBase .sapUshellTileBaseInfo.Critical, .sapUshellTileBase .sapUshellTileBaseInfo.Warning{color:#FF7500 !important;}
.sapUshellTileBase .sapUshellTileBaseIcon{color:#00649A !important;}
.sapUiUfdShellHeadItm.sapUiUfdShellHeadItmSel>span{color:#FFFFFF !important;}
.sapUshellTileBase .sapUshellTileBaseSubtitle{color:#000 !important;}
.sapUiUfdShellBrand{background-color:#000 !important;}
.sapUiUfdShellHeadItm>span{color:#000;}
.sapUiUfdShellIco,.sapUiUfdShellHead>div>.sapUiUfdShellCntnt>*{background-color:#3688CB !important;
-webkit-box-shadow: 7px 7px 20px 0px rgba(0,0,0,0.3); /* Safari and Chrome */
-moz-box-shadow: 7px 7px 20px 0px rgba(0,0,0,0.3); /* Firefox */
-ms-box-shadow: 7px 7px 20px 0px rgba(0,0,0,0.3); /* Internet Explorer */
-o-box-shadow: 7px 7px 20px 0px rgba(0,0,0,0.3); /* Opera */
box-shadow: 7px 7px 20px 0px rgba(0,0,0,0.3); /* CSS3 */    }
.sapUshellLogoutButton{background-color:#000 !important;}

How to Apply

Please read the previous documents to learn how to apply the above css to your theme.

Happy Learning