Technology Blogs by Members

Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!

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 :smile:

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

5) Migrate the theme

Go to System Administration > Transport > Transport themes.

Select your changed portal zip file and upload it.

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 :smile:

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.

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.