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.

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.