My first experience with SAP Fiori Theme Designer

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.

SAP Fiori Theme Designer preview

 

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.

SAP Fiori Theme Designer set a brand logo

 

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.

 

SAP Fiori Theme Designer set the background


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.

 sapBlockLayer_Background

 

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 😉

sapBrandColor


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_Background

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_BorderColor

 

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_Background

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_BorderColor search button's border and background color

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.

sapButton_TextColor


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_ContrastFocusColor

sapContent_ContrastIconColor
Alternative icon color switched to by a threshold to keep contrast for icons

sapContent_ContrastIconColor

sapContent_ContrastShadowColor
Alternative Shadow Color

(This will confuse your eyes so never change it to a “neon” color, like on picture please.)

sapContent_ContrastShadowColor

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_ContrastTextColor

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_FocusColor

sapContent_FocusColor App Finder dropdown

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_IconColor

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!

sapContent_ShadowColor

 

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_Background

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_Background

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_TextColor

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_ContentBackground

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.sapHighlightColor

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_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.

 

SAP Fiori Theme Designer Custom CSS section

 

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.

SAP Fiori Theme Designer Custom CSS section

 

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.

 

SAP Fiori Theme Designer Custom CSS section

 

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.

SAP Fiori Theme Designer Custom CSS section

 

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