Skip to Content

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.
     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.
smartphone_d1.PNG
  • 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!
To report this post you need to login first.

6 Comments

You must be Logged on to comment or reply to a post.

  1. Sebastian Radeiski

    Hi Vadim,

    I really like this idea. I have three questions that you may be able to help me with and I would appreciate it if you could give it a shot:

    1. In my WRR, the “css” folder doesn’t contain a “palette.css” file, although the “less” folder contains a “palette.less” file. Is that normal?

    2. Your sentence “After then you need to compile the LESS files to CSS and upload it to Web Resource Repositoty (WRR).” implies that I only have to upload the compiled CSS file. Is that true?

    3. I downloaded all “less” files and changed the accent-color in the “palette.less” file. When I compile it with SimpLESS, I get an empty “palette.css” file.

    Any help would be greatly appreciated!

    Best regards,

    Sebastian

    (0) 
    1. Vadim Ribak Post author

      Hi Sebastian,

       

      Palette css doesn’t exist and it’s a normal, because the palette.less contain definitions only (also mixin.less).These color definitions will be used in others .less files in the style definitions. And compilation result will be .css file with parameters from palette.

      So,

      1. it’s normal
      2. true
      3. empty files it’s ok and no need upload it

      Best regards,

      good luck!

      Vadim.

      (0) 
      1. Sebastian Radeiski

        Hi Vadim,

        thanks for your quick response. I was suspecting something like this, so I searched for my hex color string in all the generated css files, but it didn’t show up anywhere. The keyword “parameter” helped out a lot – now I know that it is using the parameter name in the other css file.

        Thanks a lot!

        Sebastian

        (0) 
  2. Jan Thomas Nygaard

    Hi,

    Thanks a lot for your blog but I can’t get it to work 😐

    I have changed palette file properties to:

    @main-color: white;

    @secondary-color: black;

    And uploaded into a folder called sap_tradeshow_plus as that is the theme_id of my mobile desktop but no changes when I log in again.

    The less file compiled to empty .css so I didn’t upload any new .css files.

    Do I need to clear any cache or restart server for this to take effect?

    Br Jan

    (0) 
    1. Gitit Sagiv

      Hi Jan,

      The palette less file uses as a template for the other less files. Meaning, any changes done on this file affects the other less files as well.

      You should locate all less files under the same folder and compile them together (by executing the WinLess on the folder level).

      Then, you should upload the updated less files and css files (the ones that are not empty-size 0) to WRR (as part of the customized root folder and all its files).

      Regards,

      Gitit

      (0) 

Leave a Reply