My first experience with SAP Fiori Theme Designer (“How to”)
First of all I would like to state that I’m not an SAP developer. I’m a designer, so I use graphic design programs for my everyday work, and I haven’t seen any program codes yet. The only problem with it is there are lots of things to change in SAP Fiori Theme Designer… but you won’t use it. You can change everything on your UI with Theme Designer what you wouldn’t like to change. I will write every sequence what you can modify in this program, but I promise you’ll use the custom CSS option mostly. Alright, let’s begin.
SAP Fiori Theme Designer Tutorial
Getting started with the SAP Fiori Theme Designer
If you want so see every previews what you can then check every line like on picture:
(SAP Fiori Theme Designer) SAPUI5 Application Previews:
- SAP Fiori launchpad (we will use it mostly),
- Worklist,
- Explored,
- Master Detail,
- and Manage Products.
Quick edit option
First of all the mostly important, if you make a full unique design for your company is the logo. We use the Netlife logo in this case, but you can use anything what you want. In case you want to look this perfect, then you should use a picture without background (SAP Fiori Theme Designer can handle PNG or GIF file format so you can make it easily), because if you set a unique background to your theme then it may look ugly in case the logo has a background too.
In addition next option is background. We can make a background in Photoshop, or any other graphic program, and you can set it as background. I used this size: 1200 x 963 px PNG with low quality save. Yes, we prefer the low quality picture, because it loads more faster and this is very important user experience factor. But the best option is if you set a color, or a gradient as background, because this will the fastest option.
| sapBackgroundColor |
| Main Background Color of Screen |
OR
| Main Background Color of Screen |
| Gradient or URI of the background image |
We can set the opacity of this image too by this:
| sapBackgroundImageOpacity |
| Value between 0.0 and 1.0 to control opacity of background image |
And if we use a picure what is smaller then the screen we can set the repeat of this.
| sapBackgroundImageRepeat |
| Switch to turn on/off the repetition of the background image. Chose ‘true’ or ‘false’ as value. |
Expert edit option (All of Theme Designer’s Theme Parameters)
We will set every new option to red (#ff0000) to see what change in preview.
| sapBaseColor |
| Color used to derive most prominent background colors |
| sapBlockLayer_Background |
| Background Color of Block Layers |
This is an overlay color if we click on search button for example, and the black or a grey color will be a good choice for it.
| sapBrandColor |
| Color that builds your brand |
It will change a lot part of your screen (these signed with purple color), because there are lots of item in program code with “sapBrandColor” id. So if we would like to change these seperately we should use the custom CSS codes for it, and I will wire about this option too. Keep reading 😉
sapButton section (SAP Fiori Theme Designer)
| sapButton_Accept_Background |
| Background Color of “Accept” Buttons |
| sapButton_Background |
| Background Color of Buttons |
This will change your icons’ background as like you see on picture below. You can set it as your brand’s main color.
| sapButton_BorderColor |
| Color of Button Borders |
We cannot see it on the previous picture, because there’s no border on these. But if you click on for example App Finder then you can see the changes what these option cause to your design: Look at the top Button’s Border. We signed it with red color. This is a small change, but if we set it to the wrong color we can make a big UI mistake. So you should whatch for it!
| sapButton_BorderCornerRadius |
| Defines whether a button has rounded corners |
| sapButton_BorderWidth |
| Thickness of Button Borders |
| sapButton_Emphasized_Background |
| Background Color of Emphasized Buttons |
| sapButton_Emphasized_BorderColor |
| Border Color of Emphasized Buttons |
| sapButton_Emphasized_TextColor |
| Color of Texts on Emphasized Buttons |
| sapButton_Hover_Background |
| Background Color of Buttons on Hover |
This will change the color of these buttons if we rollover the cursor on it. We presented it on “More” button.
| sapButton_Hover_BorderColor |
| Color of Button Borders on Hover |
You can see the previous option in green color (active search button), and we signed the border with red.
| sapButton_Hover_TextColor |
| Color of Texts on Buttons on Hover |
| sapButton_Reject_Background |
| Background Color of “Reject” Buttons |
| sapButton_TextColor |
| Color of Texts on Buttons |
This is the sapButton’s dropdown menu text color like on picture. In Preview we see it only at “More” button.
sapChart section (SAP Fiori Theme Designer)
| sapChart_Bad |
| This color is used to visualize a ‘Bad’ value. |
| sapChart_Critical |
| This color is used to visualize a ‘Critical’ value. |
| sapChart_Good |
| This color is used to visualize a ‘Good’ value. |
| sapChart_Neutral |
| This color is used to visualize a ‘Neutral’ value. |
| sapChart_OrderedColor_1 |
| This color is used as a color set in a sequence of 11 chart colors. It has a defined contrast to its predecessor and successor. |
| sapChart_OrderedColor_10 |
| This color is used as a color set in a sequence of 11 chart colors. It has a defined contrast to its predecessor and successor. |
| sapChart_OrderedColor_11 |
| This color is used as a color set in a sequence of 11 chart colors. It has a defined contrast to its predecessor and successor. |
| sapChart_OrderedColor_2 |
| This color is used as a color set in a sequence of 11 chart colors. It has a defined contrast to its predecessor and successor. |
| sapChart_OrderedColor_3 |
| This color is used as a color set in a sequence of 11 chart colors. It has a defined contrast to its predecessor and successor. |
| sapChart_OrderedColor_4 |
| This color is used as a color set in a sequence of 11 chart colors. It has a defined contrast to its predecessor and successor. |
| sapChart_OrderedColor_5 |
| This color is used as a color set in a sequence of 11 chart colors. It has a defined contrast to its predecessor and successor. |
| sapChart_OrderedColor_6 |
| This color is used as a color set in a sequence of 11 chart colors. It has a defined contrast to its predecessor and successor. |
| sapChart_OrderedColor_7 |
| This color is used as a color set in a sequence of 11 chart colors. It has a defined contrast to its predecessor and successor. |
| sapChart_OrderedColor_8 |
| This color is used as a color set in a sequence of 11 chart colors. It has a defined contrast to its predecessor and successor. |
| sapChart_OrderedColor_9 |
| This color is used as a color set in a sequence of 11 chart colors. It has a defined contrast to its predecessor and successor. |
| sapChart_Sequence_1 |
| This color is the base chart color of sequence 1 |
| sapChart_Sequence_2 |
| This color is the base chart color of sequence 2 |
| sapChart_Sequence_3 |
| This color is the base chart color of sequence 3 |
| sapChart_Sequence_Neutral |
| This color is the base chart color of sequence ‘Neutral’ |
| sapCompanyLogo |
| URI of Your Company Logo |
| URI of Your Company Logo |
| Alternative Focus Color |
sapContent section (SAP Fiori Theme Designer)
| sapContent_ContrastFocusColor |
| Alternative Focus Color |
You can see this change on “Catalog” button’s border.
| sapContent_ContrastIconColor |
| Alternative icon color switched to by a threshold to keep contrast for icons |
| sapContent_ContrastShadowColor |
| Alternative Shadow Color |
(This will confuse your eyes so never change it to a “neon” color, like on picture please.)
| sapContent_ContrastTextColor |
| Alternative text color switched to by a threshold to keep contrast for texts |
This is the bottom text of the SAP tiles. Readability is an important UI factor, so I recommend to use different shades of grey color on tiles. If you want to use your brand color you should use it on tiles’ icons.
| sapContent_ContrastTextThreshold |
| Threshold for switching to alternative text color in order to keep contrast for texts |
| sapContent_DisabledTextColor |
| Color of texts on disabled screen elements in the content area |
| sapContent_FocusColor |
| Color of Focus |
This is another useless option. That’s why I think there are lots of item in SAP Fiori Theme Designer what you never use, but theres no other options, what you want to change. So that’s why we must use the Custom CSS codes to change these.
| sapContent_ForegroundBorderColor |
| Foreground Color of Borders of Content Area |
| sapContent_ForegroundColor |
| Foreground Color of Content Area |
| sapContent_ForegroundTextColor |
| Foreground Color of Texts in Content Area |
| sapContent_HelpColor |
| Color indicating that element has help content |
| sapContent_IconColor |
| Color of Icons |
The SAP Content section’s icon color is a main item in SAP Fiori Theme Designer, but there is another problem with this program. You can see that I change the color to full red, but icons looks more like a pink color. How is it possible?
There are lots of item in SAP Fiori Theme Designer what has an overlay. It’s another layer on an item what may affect the item’s color what your set on it. This feature built by SAP to this program, because they want to add importance, or priority to every single item. So you shouldn’t change every tiles’ items to the same color by design “codex”, but my question is: Why restrict this option me? If I started to change the Fiori UI, it is likely I am a UI designer, and I am aware of SAP’s design guideline. But of course you can outfox by set this change in CSS rather.
| sapContent_LabelColor |
| Color of Labels in Content Area |
| sapContent_MarkerIconColor |
| Color of Marker Icons |
| sapContent_NonInteractiveIconColor |
| Color of Non-Interactive Icons |
| sapContent_SearchHighlightColor |
| Color of Found Search Results in Content |
| sapContent_ShadowColor |
| Shadow Color |
There is another useless option: Shadow color. You should do it better if you set it on black, or maybe some kind of grey. Any other color looks like a lightsaber from Star Wars. Just look at my red color set!
| sapCriticalColor |
| Color for elements showing critical state |
sapField section (SAP Fiori Theme Designer)
| sapField_Background |
| Background Color of Input Fields |
You should set the SAP Field Background color to a light color, like a light grey with a darker grey text. For example the background set to #e7e7e7 and the text to #4d4d4d.
| sapField_BorderColor |
| Color of Input Field Borders |
| sapField_BorderCornerRadius |
| Defines whether an input field has rounded corners |
| sapField_BorderWidth |
| Thickness of Input Field Borders |
| sapField_Focus_Background |
| Background Color of Focused Input Field |
| sapField_Focus_BorderColor |
| Color of Borders of Focused Input Field |
| sapField_Focus_HelpBackground |
| Background Color of Value Help Icon of Focused Input Field |
| sapField_HelpBackground |
| Color of Value Help Icon |
| sapField_Hover_Background |
| Background Color of Input Fields on Hover |
This option cause changes to the same section like on previous picture, but with hover. If you rollover you mouse to the filter by tags box it change to the color what you set.
| sapField_Hover_BorderColor |
| Color of Input Field Borders on Hover |
| sapField_Hover_HelpBackground |
| Color of Value Help Icon on Hover |
| sapField_InvalidBackground |
| Background Color of Input Field with Invalid Value |
| sapField_InvalidColor |
| Base Color of Input Field with Invalid Value |
| sapField_ReadOnly_Background |
| Background Color of Read-Only Input Field |
| sapField_ReadOnly_BorderColor |
| Color of Borders of Read-Only Input Field |
| sapField_ReadOnly_HelpBackground |
| Background Color of Value Help Icon of Read-Only Input Field |
| sapField_RequiredColor |
| Color of Asterisk Next to Required Input Field |
| sapField_SuccessBackground |
| Background Color of Input Field Indicating Successful User Action |
| sapField_SuccessColor |
| Base Color of Input Field Indicating Successful User Action |
| sapField_TextColor |
| Text color of input fields |
That’s what I talk about. If you set your search box to a light color, you can change it to a darker color. But of course there is an overlay too, so you should better, if you set this color with Custom CSS too.
| sapField_WarningBackground |
| Background Color of Input Field Indicating Warning |
| sapField_WarningColor |
| Base Color of Input Field Indicating Warning |
sapGroup section (SAP Fiori Theme Designer)
| sapGroup_ContentBackground |
| Background Color of Content Area of Group |
This option indicated with red color. I think it should be white.
| sapGroup_ContentBorderColor |
| Color of Borders of Group Content Area |
| sapGroup_TitleBackground |
| Background Color of Group Header Area |
| sapGroup_TitleBorderColor |
| Color of Borders of Group Header Area |
| sapGroup_TitleTextColor |
| Text Color of Group Title |
| sapHighlightColor |
| Color used for highlighting screen elements |
This option has an overlay too what cause a darker color than what you set.
| sapHighlightTextColor |
| Text Color of Highlighted Screen Elements |
| sapInfobar_Background |
| Background Color of Info Bars |
| sapLinkColor |
| Color of Link Text |
sapList section (SAP Fiori Theme Designer)
| sapList_Background |
| Background Color for Lists |
The following section is the SAP List, what you can see on picture with a red background.
| sapList_BorderColor |
| Color of Border in List Separating Entries |
| sapList_BorderWidth |
| Thickness of Border in List Separating Entries |
| sapList_HeaderBackground |
| Background color of the column header area of lists |
| sapList_HeaderBorderColor |
| Color of the borders of the column header area of lists |
| sapList_HeaderTextColor |
| Color of texts in the column header area of lists |
| sapList_HighlightColor |
| Color of Highlighted Elements in List |
| sapList_Hover_Background |
| Background Color of List on Hover |
| sapList_SelectionBackgroundColor |
| Background Color of Selected Elements in List |
| sapNegativeColor |
| Color for elements showing negative state |
| sapNeutralColor |
| Color for elements showing informative state |
| sapObjectHeader_Background |
| Background Color of Object Headers |
sapPage section (SAP Fiori Theme Designer)
| sapPageFooter_Background |
| Background Color of Object Headers |
| sapPageFooter_TextColor |
| Color of Texts on Page Footers |
| sapPageHeader_Background |
| Background Color of Page Headers |
| sapPageHeader_BorderColor |
| Border Color of Page Headers |
| sapPageHeader_TextColor |
| Color of Texts on Page Headers |
| sapPositiveColor |
| Color for elements showing positive state |
sapScrollBar section (SAP Fiori Theme Designer)
| sapScrollBar_BorderColor |
| Color of Scrollbar Borders |
| sapScrollBar_FaceColor |
| Color of Scrollbar Surface |
| sapScrollBar_Hover_FaceColor |
| Hover Color of Scrollbar Surface |
| sapScrollBar_SymbolColor |
| Color of Scroll Arrows in Scrollbar |
| sapScrollBar_TrackColor |
| Color of Scrollbar Track |
| sapSelectedColor |
| Color of Selected Elements |
sapShell section (SAP Fiori Theme Designer)
| sapShell_Background |
| Background Color of Shell |
| sapShell_BackgroundImage |
| Background image or gradient of the shell |
| sapShell_BackgroundImageOpacity |
| Value between 0.0 and 1.0 to control the opacity of the shell background image |
| sapShell_BackgroundImageRepeat |
| Switch to turn on/off the repetition of the shell background image. Chose ‘true’ or ‘false’ as value |
| sapShell_BackgroundPatternColor |
| Background pattern color of the shell. To turn off the pattern, set the value to ‘transparent’ |
| sapShell_BorderColor |
| Color of Shell Borders |
| sapShell_Favicon |
| URI to the favorite or shortcut icon displayed for the shell |
| sapShell_TextColor |
| Color of Shell Texts |
| sapShellColor |
| Color of Shell Header Bar |
| sapTextColor |
| Preferred Text Color |
sapTile section (SAP Fiori Theme Designer)
| sapTile_Background |
| Background Color of Tiles |
| sapTile_BorderColor |
| Border Color of Tiles |
| sapTile_IconColor |
| Color of icons on tiles |
| sapTile_TextColor |
| Color of Texts on Tiles |
| sapTile_TitleTextColor |
| Color of title texts on tiles |
| sapTitleColor |
| Text Color of Application Title |
| sapToolbar_Background |
| Background Color of Toolbar |
| sapToolbar_SeparatorColor |
| Color of Toolbar Separators |
| sapUiContentImagePlaceholderBackground |
| The background color of Image Placeholders. |
| sapUiContentImagePlaceholderForegroundColor |
| The foreground color of Image Placeholders. |
| sapUiContentMarkerTextColor |
| The color of Marker Texts. |
| sapUshellAnchorItemTextColor |
| Anchor bar text color |
| sapUshellGroupHeaderTitleColor |
| Group header title text color |
| sapUshellLoadingFlowerLeafBackgroundColor |
| Background color for the loading animation |
| sapUshellLoadingFlowerLeafBorderColor |
| Border color for the loading animation |
CSS part (SAP Fiori Theme Designer)
If you are not a CSS developer then this part look the scariest. But looks can be deceiving! Follow my instructions, and you will enjoy the endless possibilities what allows by Custom CSS.
Click on the right sidebar to the bottom icon: CSS. You get a message, accept it. After is you get a “notepad” where you can write CSS codes.
But what kind of CSS code should I write to here? Here is a good trick for make your work easier:
Right click on the element what you want to change (in our example to the “pin” button, because we want to change the background to a lighter color, to separate it from tile). Click on “Inspects element” (Ctrl+Shift+I) and search the same color what you see on your screen.
We find it in this class: .sapMSegB .sapMSegBBtn
This color is appear in the eighth line of this section: “color:”
If you not sure this is the element and color what you looking for you can click on checkbock next to this line. If the element disappeard you find it! You can write over the color to another color what you want to use. Is it look good on preview? Great! At that time you find everything what you have to copy and modify.
So the next step is to copy the name of this section: .sapMSegB .sapMSegBBtn
And write after it the line what you want to modify like this:
.sapMSegB .sapMSegBBtn {
color: #ffffff;
}
Furthermore sometimes the element color made by background-color not just color. You can set it like my second element what you see on this picture.
So finally all in all you can set every color, font, border, hover by this smart supplement. I know it’s maybe more time-consuming like you set it by theme designer, but I think it could be more clear what you want to change. With this option you can fully personalize the SAP Fiori.
written by Tibor Birta
