Skip to Content
Author's profile photo Jan Rumig

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”.

Home Screen Blue Crystal.PNGIf 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”.

Start Theme Designer.png

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

Add target Page.png

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.

Color palette.png

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.

After changes.png

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

Save Theme.png

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

Save&build.png

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

Logon Page.PNG

Good luck when defining your own color scheme.

Looking forward to hearing your opinion.

Cheers,

Jan

Assigned Tags

      2 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      Hi,

      how to remove the SAP Logo ?

       

      Thanks

      Author's profile photo Lucile OLIER
      Lucile OLIER

      Hello,

      Thank you for this useful post.

      To apply the new theme by default, is there another way than changing the URL?

      Thank you!