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

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