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 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.
Hi Krishnakant,
I have followed the steps below:
1. In Theme Designer “Target Pages” I have added the application link to launchpad
2. Pasted the CSS in CSS tab of theme designer
3. If I click on apply then I can see the header color change in the preview of launchpad
4. If I click on “Save & Build” and launch the Launchpad, the change is not applied here
I am trying to find out why the change is not being reflected when I run the launchpad application. Can you please let me know if there is any additonal steps to apply the CSS theme.
Thanks and Regards,
Anand