Portal on Device (PoD) – Branding in EP 7.3Ehp1

This blog talks about the Portal on device branding, we have certain blogs and SAP help link for creating POD contents, but we don’t have any direct guideline for only implementing POD Branding.

The Branding on POD is not like the Portal Desktop Branding like we can just edit them in Portal Display, this is bit different then PCD theme, theme edit option is not supplied with Theme Editor.

This purely defined in Styles sheet (CSS) and LESS desktop Layout (AJAX framework pages/desktop), which are provided in different option as part of “Web Resource Repository” under Content administration.

Let’s go with actual procedure to do POD Branding.

Refer the below screen shot to locate the CSS & SAP standard layouts in Web Resource Repository.

The “default” folder contains all POD branding source objects, wherein we will need to find the related objects that need to be modified.

Any sort of requirements related the “POD Desktop Background, Logo, any other theme changes” that can be modified in CSS & LESS file as mentioned in screen shots below.

1.   

  2.    .  

Note: the “Palette.less” file is provided with base color containers for all the POD layout, font & background style.

For an example, if we are changing a POD desktop background pattern, which is actually used as Image file and it’s multiplied into more than one numbers to fill the background (refer the below the following screen to locate the file).

To make the changes in CSS & LESS file, and to add the Custom related theme with Logo, we have to download the “Default” folder then we will have modify the standard them to our custom look and feel.

Eventually, the modified folder name has to be set with “Theme id” (which is currently referring in Smartphone and Tablet Desktops in Portal Content).

By default the Smartphone and Tablet Desktop are using only sap_tradeshow_plus. So, the same name needs to be set as Theme id to the Default folder.

Then upload the modified content to Web resource repository as follows.

Now, you will see a different Look and feel for your background and Logo in smartphone/Tablet Desktops

In order to validate the runtime behavior of you modified content of Smartphone & tablet.

You need to set the master rules in portal under System Administration to bring the smartphone & Tablet desktop to display.

For an optimal way, you need to create a separate User group for smartphone & Tablet.    

User Groups

To differentiate the Mobile/Tablet call, we need to create a Portal user Group for Smartphone & Tablet, so that it would not merge the content which have been created for both

It will be precisely connected if the access is granted through Portal Groups.

Smartphone_grp & Tablet_grp

Role Mapping

Two roles are required to map the Smartphone and Tablet roles, the corresponding role should be mapped with group.

Thanks

Sathya