How-to: Customize the color theme of the SAP TM collaboration portal

Hi readers,

this “how-to” post shows how to use the Theme Designer to define custom colors for the SAP TM collaboration portal.

SAP provides the collaboration portal with a pre-defined color scheme which is called “SAP Blue Crystal”.

If you want to change certain colors, you can use the UI Theme Designer.

1. Start the UI theme designer using URL https://<server>:<port>/sap/bc/theming/theme-designer/?sap-client=<sap_client>.
Replace the server, port and sap_client placeholder with the values from your collaboration portal instance.

2. The Theme Designer starts with all pre-delivered SAP color schemes. Choose the one which most matches your requirements. As the collaboration portal comes with “SAP Blue Crystal”, I would recommend to take this one.

3. Select the theme of your choice and click “Open”.

4. On the upcoming screen provide the link to the collaboration portal and a name, e.g. “SAP TM collaboration portal”.

5. In the middle of the screen you can see the existing application with a preview of the new color scheme. At the beginning, this has the original colors of the chosen theme. On the right side, you find different menus to adjust the coloring.

These menus are: “Quick” for basic coloring, “Expert” for all available color switches, the “Palette” where you can define several fixed color constants and “CSS”, which allows you to provide own CSS styles. An example for the CSS menu is to overwrite the SAP logo in the top left corner of the collaboration portal (see the corresponding chapter in the admin guide).

6. Adjust the colors with the help of the “Quick” and “Expert” menus, until the new colors match your needs. As soon as you change one color, the preview automatically changes.

7. Save the color scheme by clicking Theme -> Save & Build in the top left.

8. Provide a meaningful name. Building the theme needs some time.

9. After the theme is built, the SAP TM collaboration portal instance can be started by your carriers with the new theme. For that, the collaboration portal URL should be changed to the following: https://<server>:<port>/sap/bc/ui5_ui5/tmui/coll_portal/?sap-theme=<themeID>@https://<server>:<port>/sap/public/bc/themes/~client-<sap_client>/&sap-client=<sap_client>. Replace server, port, themeID and sap_client with your specific values.

If you want to update the logon screen with your own custom logo, follow these steps:

1. Start transaction SICF.

2. Open path default_host -> sap -> bc -> ui5_ui5 -> tmui -> coll_portal.

3. In tab Error Pages, open up the configuration of system logon and then “Adjust Links and Images”:

Good luck when defining your own color scheme.

Looking forward to hearing your opinion.

Cheers,

Jan