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.
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.
Additional Reference / Links / |
||
# |
Description |
Location |
1 |
Web Resource repository |
http://help.sap.com/saphelp_nw73/helpdata/en/51/1fcc73dba141888489f3f316b1026f/frameset.htm |
Thanks
Sathya
Hi Sathyamoorthi,
this is a very nice blog and will surely compliment the others by showing precisely what to change to implement custom branding on Portal on Device.
I was really expecting and looking forward at the end of the blog to a see a photograph of a phone and/or a tablet with some nice branding style which you had created.
When you have time, can you add some photo's of interesting branding you've done and how it looks on a smartphone or tablet.
Thank you and best regards,
Andy.
Hi Andy,
Thanks for your reply on this!
Even I was about to share those screen shots but it's Branding content right so, we cannot share the full version of screens.
Anyhow here I am sharing couple screens of Home page and Launcher for Tablet Desktop.
HomePage:
Launcher
Thanks & Regards
Sathya
Hi Sathyamoorthi,
thanks, good job,
Andy.