Mobile Framework Page Branding Using the Palette File

[Former Member]

Note:

The information in this blog refers to a feature that is deprecated.

For a list of deprecated features and possible alternatives that you can use instead, see SAP note 2204286

Mobile Framework Page Branding Using the Palette File

Overview of MFP UI Structure

The framework pages for smart phones and tablets are designed with predefined assets for simple branding
customization based on LESS technology. So,  almost of the color and font style definitions are collected in the palette.less file.

Quick branding customization

For quick and easy color customization, it is enough change only the basic colors in the palette file.

• Download all *.less files from Portal Web Resource Repositoty (WRR), find files by following path:

     Web Resources/Application Branding/~com.sap.portal.navigation.mfp.resources/<maxversion number>/default/less/

     Find in the palette.less file following parameters:

// Base colors of color scheme, from which all the rest of the colors are derived
@main-color: white;
@secondary-color: black;
@accent-color: #faba00;

• where:
  • @main color: defines header, footer and background colors.
  • @secondary-color: defines menus .
  • @accent-color: defines accent to branding color.

• So, you as can see in the screen shots, the main color is black, the secondary is white and the accent color is a gold. All other  colors are calculated automatically in relation to the preset based colors.
  Important! @main-color and @secondary-color should be opposite or contrasting colors.
• An additional parameter is the gradient direction. This parameter defines the vertical gradient direction for the vertical gradient direction for the header, footer and buttons for a correct visual effect
  
  // Gradient direction
  @start-location: bottom;
  Important! When @main-color is a dark color use @start-location: bottom;
  and for a light @main-color use @start-location: top;
• After then you need to compile the LESS files to CSS and upload it to Web Resource Repositoty (WRR).

Good luck!