Skip to Content

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.

LaunchPad.JPG

PO Approval.JPG

Tiles1.JPG

GroupTable.JPG

Details List.JPG

Tiles2.JPG

Alert.JPG

Dialog.JPG

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  

To report this post you need to login first.

1 Comment

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

  1. Kirupanand Venkatapathi

    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

    (0) 

Leave a Reply