Skip to Content

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.

Pod-1.jpg

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.    Pod-2.jpg

  2.  Pod-3.jpg  .  

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).

               Pod-4.jpg

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.

Pod-5.jpg

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.

Pod-6.jpg

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

To report this post you need to login first.

3 Comments

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

  1. Andy Silvey

    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.

    (0) 
    1. sathyamoorthi Kasinathan Post author

      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:

      /wp-content/uploads/2013/12/image1_345838.png

      Launcher

      /wp-content/uploads/2013/12/image2_345908.png

      Thanks & Regards

      Sathya

      (0) 

Leave a Reply