Mobile Framework Page Branding Using the Palette File
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.
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;
@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!
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
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,
Best regards,
good luck!
Vadim.
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
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
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
Arh great that works. Thanks a lot Gitt - saved my day 🙂