Skip to Content

New quick and easy-to-use tool allows you to create your own colored portal theme!

This is a new feature coming in SAP NetWeaver Portal 7.30 SP8 and higher that will allow you to generate a theme using one “leading color”. Just 3 easy steps and you have it!

1. Select a “leading color” from the palette

AjaxThemeStudio.PNG

2. Click preview to see how the portal will look with the new color scheme

3. Click Done, choose a name and then click Export

After a few seconds you will get a zip file containing your new custom theme. Using the Transport Themes tool, you can import this theme to any portal and use it, (or continue editing it in the Theme Editor).

That’s it!

Here’s an example of a “gold” theme that I created, running in the portal.

gold.PNG

Some notes:

  • The naming conventions for all portal themes also apply here. The theme name can contain only [a-z][A-Z][_][ ] and cannot start with “SAP”.
  • The theme can only be imported to the same version, or higher, of the portal.
  • This tool only applies to Ajax themes and only affects the portal framework style. Themes created with this tool will not affect the look and feel of other SAP applications running in the portal.
To report this post you need to login first.

22 Comments

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

  1. Amar Bhagat Challa

    Thanks for sharing this information, helps to maintain a uniform look and feel of Portal. Just curious, will this feature be a part of SAP EHP 1 for SAP NetWeaver 7.3 – SP 05 ?


    (0) 
  2. Robin van het Hof

    This is a pretty neat feature! This will save a huge amount of time by creating a theme’s starting point this way, and continue subsequent fine-tuning in Theme Editor!

    Just to clarify, if you say “This tool only applies to Ajax themes and only affects the portal framework style” I assume this also applies to applications running under control of the portal framework, such as Web Dynpro applications?

    (0) 
    1. Ido Fishler Post author

      Thanks for the positive feedback!

      I’m afraid the answer to your question is no. This tool only filter the portal images, applications running in the portal will not be affected. You can modify applications style via the normal Theme Editor

      (0) 
      1. Sigiswald Madou

        Can you please give some more details concerning “filter the portal images“? Does it actually generates new images starting from the original images? What are the original images: the ones included in the SAP Tradeshow theme or some “hidden” master images? Which tool/framework is used for the image processing (e.g. ImageMagick)?

        I tried changing the main color of alle AFP SAP Tradeshow images with an ImageMagick script, but the results were not exactly great. But I’m certainly no image(magick) expert either!.

        tnx!

        (0) 
        1. Ido Fishler Post author

          Hi,

          I’m actually generating a new image according to an HSB filter value. The filter is changing the images from SAP_tradeshow (pixel by pixel) and also some relevant CSS values are being changed.

          I don’t know this ImageMagic filter you are mentioning. I use my one filter which I wrote.

          cheers,

          Ido.

          (0) 
  3. Gilles JUNG

    Thansk for this very usefull information (detail is also available in note 1736874.

    Unfortunatly, my SAP EP current release is 7.31 SP004, so ajax theme studio is not yet available.

    Could you kindly provide an example ?

    Rgds

    Gilles

    (0) 
  4. Lawrence Waterhouse

    Hi Ido,

    idea is not bad at all, but implementation is far away from customer needs: companies have CD guides, that contains color codes (hex or rgb) and in the most cases its strictly predetermined to work with them. There is no possibility to define an own base color, or did I missed something? Also, Web DynPro’s seems to be common on EP (UWL, configuration iViews etc). Generating AJAX themes (doesnt matter if in Theme Editor oder with this tool) should also work for WD content. I guess ist a difficult job, but unfortunately it changes nothing on real business conditions: no one of my customer have even thought about conforming their EP look&feel with this tool, I gave up showing it if they asks for available tools. But good try, I think its going in the right direction.

    regards

    (0) 
    1. Ido Fishler Post author

      Hi Lawrence,

      The Ajax Theme Studio is a solution only for the Ajax Frame work page. It was build due to the fact that 99% of the Ajax page colors are based on small images and not CSS files. For customizing all SAP UI technologies in one place we have the new UI Theme Designer.

      Cheers,

      Ido

      (0) 
      1. Samuli Kaski

        Ido, it isn’t possible to theme every AJAX property with the UI Theme Designer. Especially the SmallTabs are giving me a hard time. My sandbox portal has the latest patches (NW731 SPS13 patch 1), six months later it is still not possible to specify a custom value (RGB) for the leading color. Can you share a workaround? Even if it involves modifying SAP files. Thanks.

        (0) 
  5. Lars Hoffmann

    Hi Ido,

    as Lawrence said, companies have CD guides….is it possible to select at least the leading color (wiht hex or rgb) instead of selecting one of the colors from the table?

    regards,

    Lars

    (0) 
  6. Srikanth Chandroo

    Hi Ido,

    That’s a valid question which Lars Hoffmann and Lawrence Waterhouse are asking regarding CD guides to specify colors using hex or rgb, as its how it is used mostly.

    I have additional question regarding this feature. We are on SAP NW 7.4 where we have access to LESS based new UI Theme Designer from the portal that is enabled. In this case, is this tool to theme just the Ajax themes and the portal framework style still relevant or is it redundant?

    I am still playing around with the new theme designer tool to theme AJAX Framework pages, but I haven’t had any luck yet with themeing the navigation panel and background colors.


    I also followed the steps you have mentioned in the blog above( also SAP Help) to change the leading color and have imported the custom theme, restarted the portal. But still we dont see the themes to be taking effect. This makes me wonder if I did anything wrong.

    Can you provide any insight into this?

    Thanks a lot in advance!

    Regards,

    Srikanth

    (0) 
    1. Ido Fishler Post author

      Hi,

      About the RGB/HSB request, it is indeed a valid request and it is in our development bucket…

      The ATS is still valid with the new theme structure (LESS) and can be used in parallel with the new UI Theme Designer. Same as before the ATS is a good start point when you want to customize your AFP main colors since it is mostly image based and not CSS based.

      Thanks for your interest,

      Ido

      (0) 
      1. Michael Wecker

        Hello Ido,

        is it really true that you can not use an own leading colour (even with hex) and that you have to stick to the colours of the palette?

        Thak you for your support

        Best regards

        Michael Wecker

        (0) 
      2. Michael Wecker

        Hello Ido,

        I really searched now for a long time and I did not find any solution maybe you can help me? 

        I want to change the leading color according to CD of the customer. I do not have access to an installition of NWDS or UI Theme Designer, I have to use theme editor. At least I would like to change the deep blue colour. In the meanwhile I checked, that you can not edit the surrounding border colour within theme editor at all and even when you change directly within the css files you can not change the blue border. In the guide “How to customize your Ajax Framework page with SAP NetWeaver Portal 7.30 ” I can also not find a solution. There must be a way to change the leading colour from ajax theme to another colour than the colour palette.My problem is that I can change everything accept from the deep blue left side navigation and the surrounding border.


        I already opend a thread AJAX Theme Editor Customize leading colour

        but up to now with no success.

        Desktop.jpg

        Do you have any idea where I can edit this.


        Thank you for your support


        Best regards


        Michael Wecker

        (0) 
        1. Ido Fishler Post author

          Hi,

          The Ajax theme’ colors are mainly based on images. There are 100+ small images that repeat them selves in the page. That’s why we have the Ajax theme studio; it simply changes all the image colors and returns a new theme export.

          Using the Ajax Theme Studio will change the leading color of the theme including the DTN and the frame as you requested.

          I read the thread you mentioned and I see that you got that already but want to have a custom color (not from the pallet). If the color you need is not in the pallet – it’s a problem. I’m afraid I can’t offer you a quick solution there…

          BR,

          Ido

          (0) 
          1. Michael Wecker

            Thank you very much anyway for your honest response;

            solution for me is to get a complementary colour and then change the frame by myself. But I would realy like to ask you about this feature. As said in other posts you must have the opportunity to change the color in every possible colour you want otherwise the complete feature is useless because we all have to stick to design guideline and not the colour palllet of sap >;-)

            Michael Wecker

            (0) 
          2. Samuli Kaski

            Ido Fishler wrote:

            The Ajax theme’ colors are mainly based on images. There are 100+ small images that repeat them selves in the page. That’s why we have the Ajax theme studio; it simply changes all the image colors and returns a new theme export.

            Are there as many images as there are preset colors in to color palette, meaning that the images aren’t dynamically generated based on the color selection? If that is the case I can understand why it’s not possible to select a custom color outside of the palette. Is SAP developing a solution to dynamically create the images based on the color selection? I remember doing something similar with PHP several years ago so it shouldn’t be too complex.

            (0) 

Leave a Reply