Step by step to change ABAP webdynpro background color

[JerryWang]

• Theme Editor related topics


• Manual change the CSS file

• Step1: Download the standard theme from Mime repository


• Step2: Identify the real theme currently being used


• Step3: Manual change the css file


• Step4: Upload and deploy the modified theme


• Step5: Invalidate client and server cache


• How to change other UI styles

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:

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.

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?

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.

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

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.

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.

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

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.

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

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

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.

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

after successfully upload, double click on "Deploy MIMEs":

Step5: Invalidate client and server cache

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

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.

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:

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: