A CSS class locates in THTMLB_STYLES/Style.css? But exactly where?

[corrine_guan]

In this document, let's demonstrate three points:

• How to find out the exact CSS class and property which controls the attribute of an element? For example, which property under which CSS class is controlling the alignment of a label?


• What is the CSS file which contains the CSS class definition?


• What is the exact CSS file if the CSS file shows styles.css?

Prerequisite: If F12 tool crashes, or breakpoint in thtmlb_styles/styles.css doesn't stop, please implement SAP Note 2395408. Steps are:

1. Implement both manual and correction parts in SAP Note 2395408 - Developer Tools crashes on Internet Explorer 11 on Windows 10


2. Execute T-code SU3 to set user parameter 'WCF_IE11_DBG' to X

-- How to find out the exact CSS class and property?

sample: Who is controlling the alignment of these label texts?


What we can do are:

1. Click F12 to open 'Developer Tools'.


2. Click 'Select element (Control+B)' button on 'DOM Explorer' tab.
   


3. Once 'Select element' button is clicked, the WebUI page will be navigated back. Some lines around cursor will appear. Move your cursor to a label field, like 'Description' and click.
   


4. Once clicked, the 'Developer Tools' will be navigated again. From left side, the related source codes for the label are highlighted. From right side, we can see all the relevant styles.
   


5. Since we want to find out which property controls the alignment, we can make a change on a suspected property to see if the change affects the alignment on WebUI. For example, we change the value on 'text-align' to value 'left' under CSS class 'th-lb-txtlblrgh':
   
   
   
   • A. Click on value 'right'.
   
   
   • B. Once clicked, the field becomes editable.
   
   
   • C. Input a space. Then we will see all values which can be used for 'text-align'
   
   
   • D. Input a value, for example 'left', and click Enter.
     
   
   
   
   


6. Once the 'text-align' is changed to 'left', on WebUI, the labels who are using this property are left-aligned.
   


7. In this way, we can identify the CSS class 'th-lb-txtlblrgh', the property is 'text-align'.

-- What is the CSS file which contains the CSS class definition?

1. Right click the hyperlink on 'styles.css' left to the CSS class 'th-lb-txtlblrgh'
   


2. The styles.css file will be opened under 'Debugger'. Right click on the tab and select 'Copy URL'.
   


3. Paste into a notepad, the link will look like this:
   ...../SAP(====)/BC/BSP/SAP/thtmlb_styles/styles.css?sap-thtmlb-skin=DEFAULT&sap-thtmlb-theme=&sap-thtmlb-rtl=&sap-thtmlb-visuals=X&sap-thtmlb-browser=IE11....


4. From this URL link, we can see the CSS file is styles.css, thtmlb_styles is BSP Application name. Sometimes, the BSP Application might be your own custom BSP Application.


5. Go to SAPGUI, execute T-code SE80, display 'BSP Application' thtmlb_styles.


6. Expand 'Pages with Flow Logic', double click on 'styles.css' to display the content.

-- How to find out the exact CSS file if it is shown that the CSS class is in styles.css?

Usually, CSS files contain the CSS classes definitions. But if it is styles.css, it is some kind of special. For performance reasons, several CSS files are aggregated into a single minimized chunk. This is good for performance, but on the other hand, it makes it difficult to tell in which real CSS file the CSS class is.

Now we introduce two ways to find out the exact CSS file if it is styles.css.

For both of the ways, prerequisite is authorization on S_DEVELOP/DEBUG.

Way 1(by setting a user parameter, no need to debug):

1. In T-code SU3, set user parameter WCF_THTMLB_CSS_DEBUG to X.


2. Restart WebUI page, login, access the expected page.


3. Click F12 to open the Developer tool.


4. Find out the property following the steps as previously introduced.


5. Click the hyperlink 'styles.css'. File 'styles.css' will be opened.


6. Select the menu 'Copy URL' again.


7. Paste it into notepad. The link will look like this: .../SAP(====)/BC/BSP/SAP/thtmlb_styles/styles.css?sap-thtmlb-skin=DEFAULT&sap-thtmlb-theme=&sap-thtmlb-css-filename=thtmlb_core_stand.css&sap-thtmlb-rtl=&....


8. Notice that in this url, parameter sap-thtmlb-css-filename has a value thtmlb_core_stand.css. This thtmlb_core_stand.css is the real place where the CSS class is defined.

 

Way 2(by debugging, no need to set user parameter):

1. Set breakpoint in line of 'lv_css_code = cl_thtmlb_css_util=>prepare_minimized_css( '.
   


2. Restart the WebUI page from the beginning and logon again.


3. When breakpoint stops here, check the lt_css_fiels:
   


4. Click F8 to finish the debugging.


5. You can go to these CSS files to search the CSS class and property. For example:
   
   
   
   • a). Execute SE80, display the BSP Application thtmlb_styles.
   
   
   • b). Open a css file, for example, thtmlb_core_stand.css.
   
   
   • c). Click Ctrl+F, search the name 'th-lb-txtlblrgh'.
   
   
   • d). If 'th-lb-txtlblrgh' is in this file, congratulation, you get it. But if it is not in thtmlb_core_stand.css.css, then repeat steps b) and c) on other css files.