Step by Step to Change ABAP Webdynpro Background Color

8/21/2019 Step by Step to Change ABAP Webdynpro Background Color

1/11

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

1

Step by step to change ABAP webdynprobackground 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 anotherapproach.

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:

http://scn.sap.com/thread/3468667http://scn.sap.com/docs/DOC-19649http://scn.sap.com/docs/DOC-19649http://scn.sap.com/thread/3468667


2/11

Step by step to change ABAP webdynpro background color


2

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.


3/11



3

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?

http://scn.sap.com/servlet/JiveServlet/showImage/102-55152-1-456011/clipboard2.png


4/11



4

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:


5/11



5

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.

http://rgb.phpddt.com/


6/11



6

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.


7/11



7

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.


8/11



8

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


9/11



9

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


10/11



10

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.


11/11



11

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:

Documents

Step by Step to Change ABAP Webdynpro Background Color