Fiori-Inspired Letterbox Theme
Fiori-Inspired Letterbox Theme
Guides - Updated on
Intro
In web design, it is common practice to restrict the page content to a certain width. This way the content does not stretch too wide and become unreadable. If a screen gets wider than this maximum width, blank areas to the left and right are shown. In many cases, these areas are used to display advertisements.
This design element is called letterboxing because it restricts the contents to a certain width similar to the width of letterbox format. Letterboxing is often used in films to transfer of a widescreen film image to a videotape.
Today, you can easily adjust contents to different screen size by using responsive layouts and controls to account for the increased average screen sizes in our customers IT infrastructures.
Theming
SAP Screen Personas offers Theming as a way to impliment letterboxing.
Fiori Letterbox Theme
There are three areas that you need to adjust, the Window, User area and the Statusbar.
Window
Use the Fiori_Gradient as the Window Image to get the blue look and feel.
User Area
Align the user area is in the middle of your screen, make the width 1280px.
Panel Color: RGB configuration - rgba(255,255,255,0.8)
Status Bar
Now you will adjust the background color and font of the Status Bar to be consistent with the Fiori look and feel.
Layout
Style
Final
The final look when the Fiori Letterbox Theme is applied.
Resources
