Step by step to change ABAP webdynpro

background color
Theme Editor related topics on page 1
Manual change the CSS file on page 1
Step1: Download the standard theme from Mime repository on page 2
Step2: Identify the real theme currently being used on page 4
Step3: Manual change the css file on page 5
Step4: Upload and deploy the modified theme on page 8
Step5: Invalidate client and server cache on page 10
How to change other UI styles on page 11
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:

Generated by Jive on 2014-11-03+01:00

1

Step by step to change ABAP webdynpro background color

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.

Generated by Jive on 2014-11-03+01:00

2

Step by step to change ABAP webdynpro background color

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?

Generated by Jive on 2014-11-03+01:00

3

Step by step to change ABAP webdynpro background color

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:

Generated by Jive on 2014-11-03+01:00

4

Step by step to change ABAP webdynpro background color

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.

Generated by Jive on 2014-11-03+01:00

5

Step by step to change ABAP webdynpro background 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.

Generated by Jive on 2014-11-03+01:00

6

Step by step to change ABAP webdynpro background color

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.

Generated by Jive on 2014-11-03+01:00

7

Step by step to change ABAP webdynpro background color

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

Generated by Jive on 2014-11-03+01:00

8

Step by step to change ABAP webdynpro background color

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

Generated by Jive on 2014-11-03+01:00

9

Step by step to change ABAP webdynpro background color

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.

Generated by Jive on 2014-11-03+01:00

10

Step by step to change ABAP webdynpro background color

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:

Generated by Jive on 2014-11-03+01:00

11