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.

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

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.