Skip to Content

Recently one local customer requires that they could like to change the background color from blue to others for example green.

Theme Editor related topics

I searched SCN and found there are many threads to recommend the usage of Theme Editor. Then I tried the download links contained in note 854870 – Netweaver 04 Web Dynpro Theme Editor Download and found none of them are valid any more.

In thread I got information from Samuli Kaski that theme editor is no longer supported. So I plan to try another approach.

Manual change the CSS file

Then I find the document “Custom themes for Web Dynpro ABAP applications without SAP Enterprise Portal integration“. However when I try it in my CRM 7.0 EHP2 system, I found the instructions in that document could not directly work without some minor adaptations. In this document I will explain the step by step investigation to find all necessary adaptations.

The default background color changed before looks like below:

/wp-content/uploads/2014/05/clipboard1_455974.png

Step1: Download the standard theme from Mime repository

use tcode SE80, tab “MIME Repository”, follow the path /PUBLIC/BC/UR/ur_mines_nw7.zip, download it locally.

/wp-content/uploads/2014/05/clipboard2_456011.png

Unzip the zip file and we can observe several themes inside it. In the document Custom themes for Web Dynpro ABAP applications without SAP Enterprise Portal integration it contains the steps how to create a custom theme. However for the very case of my local customer, it is ok to directly change the standard theme. So the next task is which of the following themes is the currently being used one?

/wp-content/uploads/2014/05/clipboard3_456012.png

Step2: Identify the real theme currently being used

Launch the webdynpro application as usual, click F12 to open the development tool of IE. ( Of course you could also use Chrome )

Here we can find the working theme is “sap_tradeshow_plus” and css file is ls_ie6.css.

The CSS class for body DOM element is urBdyStd.

/wp-content/uploads/2014/05/clipboard4_456013.png

With these information at hand now it is ready to change the CSS file ls_ie6.css, which is located in the folder below:

/wp-content/uploads/2014/05/clipboard5_456014.png

Step3: Manual change the css file

Before the change, we should identify which DOM node in the CSS file should be changed. In IE development tool, click on body node, and here we can find the element attribute “background-color” which controls the current background color.

/wp-content/uploads/2014/05/clipboard6_456015.png

The current rgb value is (234, 241, 246). I use an online tool http://rgb.phpddt.com/

to verify whether this color is just the current default background color. In this online tool after I maintain the rgb value and click ok button, the right area of the tool is rendered with the specified color.

/wp-content/uploads/2014/05/clipboard7_456016.png

I plan to change the default color to rgb value (86, 255, 170) which display as green colow below:

/wp-content/uploads/2014/05/clipboard8_456017.png

It is very convenient to verify whether the change on CSS file could really take effect, since we could directly change the attribute in IE development tool.

Just click the attribute “background-color” and then it will switch to edit mode. Change the value to (86, 255,170) and click enter.

/wp-content/uploads/2014/05/clipboard9_456018.png

Soon we can see the background color is changed to green as expected.

/wp-content/uploads/2014/05/clipboard10_456019.png

However this change is not persisted, we should change the CSS file via text editor or any other CSS editor.

I just use the Notepad to change the color. Note that the development tool translates the HEX color to rgb color automatically for us, but in the CSS file, we should maintain the corresponding HEX color #56FFAA for rgb value( 86, 255, 170 ).

/wp-content/uploads/2014/05/clipboard11_456020.png

Save the css file after change.

Step4: Upload and deploy the modified theme

Zip the folder ur_mimes_nw7 again with modified css file. I just delete the original css file from zip file via context menu->Delete files, the drag the modified css file from my desktop to zip file.

/wp-content/uploads/2014/05/clipboard12_456021.png

Then run report WDG_MAINTAIN_UR_MIMES( not the report BSP_UPDATE_MIMEREPOS mentioned in the document Custom themes for Web Dynpro ABAP applications without SAP Enterprise Portal integration ).

Double click on Menu “Upload MIME archive to server”:

/wp-content/uploads/2014/05/clipboard13_456022.png

after successfully upload, double click on “Deploy MIMEs”:

/wp-content/uploads/2014/05/clipboard14_456026.png

Step5: Invalidate client and server cache

in transaction code SMICM you could observe many server side cache for performance improvement:

/wp-content/uploads/2014/05/clipboard15_456027.png

Invalidate them via HTTP Plugin->Server Cache->Invalidate Globally to clear cache otherwise you might still see the color before the change.

Global invalidation could ensure the invalidation is distributed to all other application server instances.

/wp-content/uploads/2014/05/clipboard16_456028.png

Clear your browser cache in client side as well.

Then launch webdynpro application, and you could see the background color is changed to green as expected:

/wp-content/uploads/2014/05/clipboard17_456029.png

How to change other UI styles

It is very convenient to change other UI styles as well via the same steps. When you expand the HTML dom node tree in the left part of the development tool, the corresponding UI element will be automatically highlighted in the browser so that you can know which UI element currently are being edited by you. Then you could try to change its CSS attribute value in the right part. The change is done via a “what you see is what you get” mode.

For example I change the border color and borth width of the table tool bar below:

/wp-content/uploads/2014/05/clipboard18_456030.png

To report this post you need to login first.

14 Comments

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

  1. Samuli Kaski

    Great job Jerry although I would advice you (and your customers) to use the UI Theme Designer instead which is the only supported tool for creating custom themes for Web Dynpros (and others).

    (0) 
    1. Jerry Wang Post author

      Hello Samuli,

      Thanks a lot for your reply. I tried all download links in SCN for Theme Editor but none of them works. Would you please kindly share any valid link to download “Theme Designer”? Thank you very much for your help!

      Best regards,

      Jerry

      (0) 
        1. Jerry Wang Post author

          Hello Samuli,

          Thanks a lot, that’s really helpful. I have informed our consultant to have a try 🙂

          Best regards,

          Jerry

          (0) 
      1. VR V

        Hi Kerry,

        I achieved changing the background color through this document but somehow search helps and drop downs are not working as before.

        What would be the change happened after customising the CSS?

        (0) 
      2. VR V

        Hi Jerry,

        Good document  but i am facing two issues described below;

        Two issues:

        1.)By doing this way even standard WD applications(WDR_TEST_UI_ELEMENTS etc) are getting changed with background color.

        So if we want to change themes only for custom WD Application apart from?

        2.)Also some UI elements such as dropdown and Search help are not working? How to resolve this.

        (0) 
  2. VR V

    Hi Jerry,

    In the similar way can we add images to this theme list thereby on selecting that particular theme a background image will be displayed.

    (0) 
  3. Supriya Dandapat

    Hello Jerry,

    We are facing custom theme issue after system upgrade. We have created custom theme folder inside sap standard folder ur_mimes_nw7.zip. It use to work but after upgrade, custom folder was overwritten. Now we are trying to create custom folder  again but its not getting deployed. what could be the reason ? need your help.

    Regards,

    Sagar

    (0) 

Leave a Reply