Fiori Theme Designer: How to get a different look and feel for ipad, iphone and desktop using only a single custom theme

[Former Member]

Motivation:

1. You want to show a different background on ipad and a different one on the iphone based on the orientation. If you are familiar with xcode, you would know that you actually require different images for iPhones and iPads. It further requires different images for the orientation(portrait or landscape).

2. Fiori apps use sap.m library. The controls of this library are designed with mobile touch devices in mind. Some controls occupy a lot of space on the screen although the fiori app on the desktop doesn't need those empty spaces. You would like to redesign the theme just for desktop to differentiate the mobile apps and the desktop version.

3. You want to use a strong color contrast on your mobile devices which is used by field personnel in the outdoors. But simultaneously, you want to have a soothing theme similar to sap_bluecrystal for you desktop users who are always indoors.

How do you do that?

Use the 'Theme Designer'. Refer Fiori Theme Designer for more basic info on how to use the tool.

Once you are in the tool, jump right into the CSS tab.

To start writing our custom CSS, we will first need the element class. I would recommend using chrome's developer tools. use the inspect element option when you right click on the element to desire to theme.

Find out the class attribute for the element you desire to theme. in this case, i have selected the tile on the launchpad.

Make sure you select the class from the root most element. otherwise there is change of some properties getting over-written by parent element's class properties.

So, here we have the class sapUshellTileBase and on the right side you can see the properties.

.sapUshellTileBase {

color: #333333;

height: 100%;

-webkit-box-sizing: border-box;

}

Here you can change the color of the tiles or actually you can add an image to the tile using background-image property. You can add all your images into the MIME repository in the backend.

You can add this to your CSS tab and change any parameter or add any new styling parameter.

Now the good stuff

To ensure the same theme behaves differently in different devices, you need to use CSS media queries.

Media queries can be used to determine what type of device is being used. It uses parameters like pixel ratio, width, height, orientation of the device and others to determine the type of device. This is how it looks

This media query would work for iPad 3, iPad 4, iPad Mini 2, iPad Air. iPad Air 2 when it is in 'landscape' mode. So, if you have you css defined inside the media query, it will be considered only when run on an ipad when it is in landscape mode

@media only screen

and (min-device-width : 768px)

and (max-device-width : 1024px)

and (orientation : landscape)

and (-webkit-min-device-pixel-ratio: 2) {

/*your css goes here */

}

Similarly, any CSS written inside this media query would run on iphone 5 in 'Portrait' mode and sets the background to a corresponding portrait image with an opacity of 72% and scaled to fit the entire screen.

@media only screen

and (min-device-width : 320px)

and (max-device-width : 568px)

and (orientation : portrait)

and (-webkit-min-device-pixel-ratio: 2) {

.sapMGlobalBackgroundImage {

display: block;

position: absolute;

box-sizing: border-box;

left: 0;

top: 0;

bottom: 0;

right: 0;

opacity: 0.72222222;

background-image: url("http://<server>:<port>/content/iPhone5-Port-640x1136.png");

background-repeat: no-repeat;

background-position: left top;

background-size: 100% 100%;

}

}

Similarly you can handle for desktops which have considerably higher pixel widths than most of the mobile devices.

A good reference for device heights, widths and pixel ratios can be found here. Note that the width here is the css-pixel width and not the device pixel width. Many devices don't share the same number.