Customizing the portal using the new UI Theme Designer - Part 1

[Former Member]

Recent Enterprise portal versions include the new UI Theme designer, the official documentation can be found at:

http://help.sap.com/saphelp_nw73ehp1/helpdata/en/8e/a763272dcd4b4ba6ea347050b1f3fc/content.htm?frame...

Also before you start using it I strongly recommend to read the official limitation note 1890375,

In addition, before starting to use this solution. you need to apply the following note:

Note 1839261 - Application displayed without theme (UI Theme Designer)

In this blog I wanted to share with you a hands on experience, in the part 1 I will show simple branding of the portal with the UI Theme Designer and on part 2 I will show advanced branding using the Web Resource Repository: http://scn.sap.com/community/netweaver-portal/administration-and-development/blog/2013/10/15/customi...

So let's begin :smile: The prerequisite for this blog is that you already configured the portal to work with the new theming (this can be easily found in the documentation).

Step 1

launch the new UI Theme Designer

Step 2

Select the base theme you would like to customize

Step 3

Select the Portal Control Previews and then select the AJAX Framework Page preview

This step is very important since you can select additional previews to work on simultaneously, as you can see you have not only portal previews but also Unified Rendering previews!

Now Let's start customizing :cool:

Step 4

Quick theming is the first thing you would usually change, this will affect the basic coloring in few clicks.

Currently the quick theming is not supported for portal controls (it is planned to be supported in the future) and because of that we will use the quick theming to change Unified Rendering controls.

Step 5

Expert theming is the next step, here you will see all the existing parameters and once you change them you will see it reflected in the preview.

Since there are a lot of parameters in the expert view my tip is to work with the categories:

Lets's change the logo image in the Masthead category, the property is: sapPrtAFPMastheadLogoImage:

Looks tight up there, let's give it some space :wink: the properties are: sapPrtAFPMastheadLogoImageHeight and sapPrtAFPMastheadLogoImageWidth

Now lets play with the Top Level Navigation, select the Top Level Navigation category:

Change the parameter: sapPrtAFPTlnFirstLevelTabStandardTextColor

Change the parameter: sapPrtAFPNewTLNFirstLevelTabDownColor

Now lets play with the Detailed Navigation, select the Detailed Navigation category:

Change the parameter: sapPrtAFPNewDTNTreeTextStandardColor

Step 6

That's it, now what's left to do is to publish the new theme 

The new theme is in the portal now and you can use it the same way as in the past (Assign it to your desktop). If you want to see your changes quickly just add the following parameter to the portal's URL: theme=<new theme id>

Good Luck :cool:

Itzik