Skip to end of metadata
Go to start of metadata

 Fiori-Inspired Letterbox Theme


 


Last Update: Regina Sheynblat

Error rendering macro 'page-info'

com.atlassian.confluence.user.ConfluenceUserPreferences.getDateFormatter(Lcom/atlassian/confluence/core/FormatSettingsManager;)Lcom/atlassian/confluence/core/DateFormatter;

Fiori-Inspired Letterbox Theme


Guides - Updated on

Error rendering macro 'page-info'

com.atlassian.confluence.user.ConfluenceUserPreferences.getDateFormatter(Lcom/atlassian/confluence/core/FormatSettingsManager;)Lcom/atlassian/confluence/core/DateFormatter;

 

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

FioriGradient.zip

 

 

  • No labels