Page tree
Skip to end of metadata
Go to start of metadata

Here instead of listing different component and path to customize skins, I am describing different trouble shooting case. Among these cases you will be able to understand more and more about the skin architecture which will help you understand how to make skin changes according to your requirement.

This article assumes that you have basic knowledge about CSS, Cascading Style Sheet.

And we focus on using IE Developer Toolbar as the tool to do the trouble shooting.


[What is IE Developer Toolbar]

This is a tool provided by Microsoft, and within SAP world we can use it to trouble shoot applications opened using a browser. And IE Developer Toolbar is designed to be used together with Internet Explorer, while firebug for Firefox. But we are only talking about IE Developer Toolbar in this article.

This tool can provide quick checking regarding CSS. It is able to do JavaScript debugging, and so on.

[Prepare your PC with IE Developer Toolbar]

If you are using IE 7 or lower, this needs to be downloaded and installed. Please check link

If you are using IE 8 or above, it is delivered together with browser itself. No extra installation needed. We will make testing with IE 8 in our article.

[How to start IE Developer Toolbar]

Take IE 8 as example, it will show in the following menu. You can call it via F12 also. For that in IE 7, it will be in the similar place.


[Case Study 1]

[What is the problem]

Symptom description: Using IC_AGENT business role, and click on work center E-Mail, and enter a name in the To field for example, then click on Check button. Depends on the master data you might get one or two popups:

And you can notice that for the Street field since my data is long, it has been swapped, but the text box is not resized according to it, it is only showing as like of one line only. And the above happens with Signature Design(NOVA) skin. If change skin to Default, we cannot see the problem:

Question: why when using different skin, the swapped address does not have the text box with proper size?

[Let’s analyze]

Let’s start IE Developer Toolbar. Use Ctrl+P to pin it in the same window which will make the operation bit easier. It will look like the following

Make sure the HTML tab is shown up, and click on “refresh” button in case it is not working as you expected, this will ensure the current page’s info has been correctly recognized by IE Developer Toolbar. Click on the mouse icon which is shown in the above screen shot, and move your mouse to hover above the Street field until you see a blue rectangular as following, and click within the area of the blue rectangular, the below part get refreshed with data related to the selected element:

Click “Trace Styles” to get a easy view about all the css attributes applied to the current element, and if we do the same for the same street field in Signature Design skin also, we can see something different in the css determined

This means for DEFAULT skin, the text box were drawn based on the text required size. There is definition for border-bottom, border-left, border-right and border top.

But for Signature Design(NOVA) skin, the border-bottom-width for example were set as 0px, which means it will not show. And instead it is displaying a background-image, and the height of this image cannot be changed, which leads to the issue.

[What is the solution]

If you are using CRM 7, you may try the following.

For Signature Design(NOVA) skin, let’s expand the “background-image” definition

On the right side, you are able to see a css file name, which means the background-image was defined within this file. And also the class id used to locate the definition.

Let’s goto CRM backend and transaction se80 to display bsp application thtmlb_styles, and go by path:

MIMEs->sap_skins->nova-> thtmlb_stand.css

Double click on it, a note book will be displayed. Please search with “th-if”.

If we do the same for DEFAULT skin

And then check in MIMEs->sap_skins->default-> thtmlb_stand.css

They are using the same class id, but different definition.

For this case, since it is not correct, there is a note which correct this.

Note 1597472  Address alignment not correct in Signature Design skin

In this note, it changes the class id this text box used, which forced the text box will be drawn with bottom, left, right and top.

[What we can learn from this case]

We can know “How to locate the css definition of a screen element”. From screen to css file and class id. And in case we would like to introduce different background image or different border color for example, it will be very easy.

[Case Study 2]

[What is the problem]

For Interaction Center, if I don’t want to show any tool bar button related to Telephony, Chat or E-mail, I can make customizing in toolbar profile like the following

Then when I open the Interaction Center, there will be a strange blue. This happens to all skins.

For normal cases, at the same location, there is the channel switch icon like the following

Question: Why there is such blue? And whether it is possible to remove this meaningless blue?

[Let’s analyze]

Given the experience in the first case, we use IE Developer toolbar and click on the blue. And check the Trace Styles. Unfortunately, there is not any definition regarding color, or any definition regarding used any images.

Before being desperate, let’s try to look into the left part of IE Developer Toolbar, which we didn’t touch for the first case. The highlighted line shown as following:

Surprisingly we found that the blue is also an image, and it was written in the html instead of css file. And the image is with location: /sap/bc/bsp/sap/ic_base/images/cti/ico16_none_popup.gif

In CRM backend, open se80, and display the bsp application ic_base, and open path


Here you are able to find all the images which is displayed for the channel selector, including email, chat, phone.

Regarding where the image was written into the html, let’s try to locate it. For the interaction center, the header level area is configured using Layout profile. Thus some quick test can narrow down the scope. Open the layout profile, test by deselecting certain flag, then re-launch the same business role to observe what becomes missing on the screen. Given some guess and testing, it shows that if I deselect “Context Area Display”, the tool bar together with the channel selector will disappear. Then record down the component ID SSCONTEXTAREA

In Define Layout Components, locate the component SSCONTEXTAREA, check the detail, it is pointing to bsp application ICCMP_HEADER. In transaction bsp_wd_cmpwb, check the only view in this bsp application: ICCMP_HEADER/HeaderViewSet, configuration shows channel selector can be configured. And the channel selector itself points to another view

In runtime repository, we can find the view points to bsp application ICCMP_HDR_CNTNR

Then in bsp_wd_cmpwb, open the ICCMP_HDR_CNTNR, check the view’s html coding ICCMP_HDR_CNTNR/ViewsetFrame. According to the coding, it seems the component is loaded dynamically.

Let’s put breakpoint in this html file and debug, while debug we located further info, which points to ICCMP_HDR_CNTNT/ChannelSelWindow.

Check it in bsp_wd_cmpwb transaction, we feel we are approaching the destination, we checked the view ICCMP_HDR_CNTNT/ChannelSelector, when checking the html, we located the source which introduced the image


[What is the solution]

For this case, since no communication specific button are used, actually there is no need to switch in different channels. Thus we can remove the channel selector to solve this issue. Steps are:

Transaction bsp_wd_cmpwb

 component = ICCMP_HEADER

 view      = HeaderViewSet

 "Configuration" tab

 please copy the standard configuration into Z role configuration key, and delete the "ChannelSelector" block use the minus button.

Or we might have to enhance the view ICCMP_HDR_CNTNT/ChannelSelector, to change the logic of inserting the  ico16_none_popup.gif.


[What we can learn from this case]

Not only CSS is controlling the layout, and using IE developer tool bar could help you to locate the relevant html coding more quickly.

[Case Study 3]

[What is the problem]

For this case, this is a requirement raised by customer: Is it possible to replace the broadcasting bar with customer defined elements?

[Let’s analyze]

Actually the answer is YES, but instead of calling it as “replace”, we might have to do it like:

  1. hide the broadcasting bar and
  2. add customer defined bsp application

Let’s try to analyze the first step. Let’s open IE developer tool bar again, and select the the broadcasting bar. And when we go upper levels, until we found a tag iframe with src value.  It shows


And if we go upper further, we are able to see another src

And if we check the second src, it points to crm_ui_frame

Let’s check the detail of this htm file in se80 using the above info. BSP application crm_ui_frame, and htm is broadcast_bar.htm. But in order to find who calls boardcast_bar.htm took me sometime, and also some discussion between colleagues. Finally I come to mcmain.htm under folder “Pages with Flow Logic” of crm_ui_frame. It has the following coding:

We got it, and if we check the before and after, we can see that this part of layout has been hardcoded, which means we does not have customizing options to hide it. If we would like to hide it, we might have to make modification in this htm. For example to change the height from 20px into 0px.

Then how about the second step which is to include the customer defined bsp application? Given the above info, maybe you are thinking of inserting the view directly into the mcmain.htm file. Yeah, this can be one option. Besides this, we have customizing option to make it more easier. Please check the following screen shots. In this testing, I made customizing in layout profile in “Footer App. Name” and “Footer Page” and “Footer Height” fields. My testing uses a not ready bsp application, which lead to bsp error. If the page is well defined, it will show right above the broadcasting bar if it is still there.

[What is the solution]

  1. hide the broadcasting bar – modification in crm_ui_frame/ mcmain.htm
  2. add customer defined bsp application – customizing in layout profile for Footer

[What we can learn from this case]

IE developer toolbar is not only possible to locate fonts/images/etc, but can also locate the htm file which might  be useful for customer to understand the standard architecture and make the needed adjustment.

[More about IE Developer Toolbar]

Please check more regarding IE Developer Toolbar, which is not specific to CRM web UI.

Microsoft Help document

SDN blog


Author: Hongyan Shao

Role: Support Consultant - SAP China

Session Date: Jun. 2nd, 2011

Publish Date: Jan. 27th, 2012

  • No labels