This blog is about creating themes for SAP FIORI and for SAPUI5 custom applications.
In these series of blogs i will share different colors of fiori :smile: . I will try to create fiori themes using different colors. You all are most appreciated to mark your likes or dislikes :smile: . All suggestions are most welcome.
I always love to play around with CSS. I have worked as Web designer at my previous employer where i learnt web designing. Today i am happy that in SAP again i got something which i love to do :smile: .
In this blog i will share the images, color codes, css classes and how can we use those classes in application.
We will talk in the context of the "sap_bluecrystal"
Let us start with RED color for theme.
Figure 1. Full application preview
Figure 2. Tiles
Figure 3. List
Figure 4. Tab 1
Figure 5. Tab 2
Figure 6. Mix
Hmmmm... did you see something new?
Everything RED :smile: you may not like RED but yes we have something new.
What i did for this ?
How i achieved this?
I used standard blue_crystal theme for my application.
To create custom theme you can refer the document which i have referred at the beginning of this blog.
Apply that theme to your application and Bingo !!! You will Rock :smile:
Color Code
Replace the left hand side color codes with right hand side colors in your theme.
#009de0 = #CF0404
#006ca7 = #ff3019
#007cc0 = #CF0404
#00679e = #ff3019
#e6f2f9 = #eaefb5
#dddddd = #666666
below are the classes which i have overridden.
You can put these classes in your custom .css file and give reference of that .css file in your index page or you can put it in your theme designer's CSS panel.
.sapMGlobalBackgroundColor{background-image:linear-gradient(to bottom,#fcefec 0,#ffb9ab 100%);}
.sap-desktop .sapMBar.sapMPageHeader{background-color:#CF0404 !important; }
.sapMBar-CTX .sapMLabel{color:#ffffff;}
.sapMTile{-moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px;
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #f3f3f3 50%, #ededed 51%, #ffffff 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(50%,#f3f3f3), color-stop(51%,#ededed), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%); /* IE10+ */
background: linear-gradient(to bottom, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}
.sapMPullDown{background-color:#ffffff;}
.sapMList .sapMLIB.sapMGHLI{background-color:#e9d4b3;}
.sapMSFB{background:#d6dbbf}
.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}
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.
Colorful Fiori - Part 2 -Yellow Green
Hope you liked it :smile:
Happy Learning :smile:
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
37 | |
10 | |
7 | |
5 | |
5 | |
5 | |
4 | |
4 | |
3 | |
3 |