Skip to Content

Migrating from an old theme version to the new UI Theme Designer is new for me. Previously I had the chance to start from scratch and build a new theme from the sap_goldreflection. Now my customer has a current theme and I need to migrate it from an 7.30 SP08 to SP10 version.

This blog will describe the step by step instructions I followed.

1) Backup old theme

Since I have some CSS hacks in the old theme, I am not convinced these hacks will be migrated as well. So before starting, I have copied the old portal theme – even before the technical upgrade – and saved it locally (twice).

It is important that you make a local copy before upgrading / activating the new UI Theme Designer! Otherwise migration will fail.

2) Write down all CSS hacks

Now I need to know which elements are not standard (e.g. the famous css hack in the old theme studio => add a semicolumn and add new css styles to the element).


If you don’t have CSS hacks, just proceed with step 3.

Screenshot - 1-4-2014 , 9_29_22.png

In this example the border-width of every iview is 10 pixels and has been added to the definition of the borders color (#CCC).

I am not sure if these hacks will survive the migration, so I need to write them down and remove them. I have created a folder with the old theme in it. I have unzipped the theme.  If you unzip/zip it often, check this blog: Tired of zipping / unzipping portal theme?

Now go to the folder UR and open the default.properties. This file has all the definitions in it for unified rendering (UR) elements. Search for a semi-column for any css hacks. In my example you will see a lot of hacks 🙂

Screenshot - 1-4-2014 , 9_43_46.png

Do the same for the portal elements: open the portal folder and the default.properties. Now I know all the elements that might fail during migration. To be sure I will remove them all!

After doing this I will zip the theme.

Upload the portal theme again in the portal. After a successfull import, export it again. Now you are ready for the upgrade.

3) Upgrade the portal and enable the LESS functionality

Make sure you have the latest patch levels for EP_BASIS. Enabling the lafservice is something I did before -> How to… UI Theme Designer – Installation

Don’t forget to restart the portal.

4) Check if UI Theme Designer is working

Login to the portal and go to Content Administration > Portal Display. The UI-themedesigner should be visible.

Screenshot - 1-4-2014 , 10_07_55.png

5) Migrate the theme

Go to System Administration > Transport > Transport themes.

Select your changed portal zip file and upload it.

2014-04-01 10_35_16-Transportmotieven - SAP NetWeaver Portal.png

Please note: this takes a while – in my case several minutes!

Now open the Theme Designer and your theme should be listed.



6) Reimport the css hacks 🙂

I have made an excel for my own purpose with all css semicolumn hits in it (as described in step 2). Since there is no direct match between the old property name and the new css name, you will have to search for it.


2014-04-02 10_58_53-Microsoft Excel - css_vergelijking.xlsx.png

In this case I will need to find the “parLnkReportColor” in the UI Theme Designer. Search in the UI Theme Designer for “LnkReportColor”, so remove the word par.


Don’t forget to select UR Controls and Portal, since some properties belong to the Prt definition and some to the Ur definition.


2014-04-02 11_02_13-UI-themedesigner - SAP NetWeaver Portal.png


Now you can edit the base.less file as described in How to… UI Theme Designer – Locating elements.

I might write a new blog for editing the less files. For now, also read the blog of Itzik.Customizing the portal using the new UI Theme Designer – Part 2



Happy branding!


/*

Noël Hendrikx – SAP Portal consultant @ Peppie Portals.

Specialized in Corporate branding SAP Portal / Adobe Interactive Forms.

UI Theming blog series

Portal theming – also waited a couple of years?

How to… UI Theme Designer – Installation

How to… UI Theme Designer – Migration

How to… UI Theme Designer – Locating elements

How to… UI Theme Designer – Transportation

How to… UI Theme Designer – Make use of the Custom CSS tab in the Portal!

Other blogs:

Tired of zipping / unzipping portal theme?

Tips for the Portal Content Studio

DSM Terminator and popup blockers (or not)

My best development friend – Autoresponder FTW

/*

To report this post you need to login first.

3 Comments

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

  1. Noël Hendrikx Post author

    If you cannot open the new theme but the UI Theme Designer creates a new copy, your theme is marked as a SAP theme.

    In the WRR you can go to theming\Base\baseLib\<YOURTHEME>

    Edit the .theming file

    {

      “sEntity”: “Theme”,

      “sId”: “umculatest”,

      “sLabel”: “<YOURTHEME>”,

      “sVendor”: “SAP”,

      “oExtends”: “Base.baseLib.sap_tradeshow”

    }

    If you remove the sVendor entry, you can edit your own theme. Don’t forget to upload the .theming file and overwrite the correct entry!

    I am investigating now if you will have to remove every sVendor from all .theming files as well…

    I have removed the sVendor only from the theming\Base\baseLib\.theming file and my theme works finally.

    Don’t forget to assign your theme to the portal desktop!

    (0) 
  2. Daniel Rothmund

    Hi ,

    one question how does the migration works for custom images ?

    After migration all the navigation tabs have default image and also the blue detail navigation.

    Regards

    (0) 
    1. Noël Hendrikx Post author

      Hi Daniel,

      I assume you have a backup of the old theme, right? In this theme the custom images are located. Since these standard SAP images are overwritten with the custom ones in the old theme, they will be lost during the migration steps.

      But you can extract the old theme and re-upload them into the UI Theme Designer. I suggest to rename the custom images as well and upload them.

      Cheers,

      Noel

      (0) 

Leave a Reply