How to... UI Theme Designer - Locating elements

Technology Blogs by Members

Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!

11,570

SAP Managed Tags:
SAP Enterprise Portal

Part 2 of more to come 🙂

One of the features that is missing right now is a functionality to select the proper class. In Chrome or IE you can use the Developer Toolbar to inspect an element. In the UI Theme Designer this functionality is not present (yet?).

This blog will explain how to select the correct elements. First find out which CSS class you would like to change by selecting the Developer Toolbar (F12) in Chrome or IE. In my case I have selected the title (urPgHTTxtSmall).

If you search in the UI Theme Designer you will not find anything. Open Notepad++ (or any text editor that can search in files as well) and press CTRL+F, select Find in Files and search for urPgHTTxtSmall. Select as source two directories (download the applications from the server):

- com.sap.portal.design.portaldesigndataless

- com.sap.portal.design.urdesigndataless

I have placed the two applications in directory c:\nwds\sap less (see below):

There are 62 hits:

com.sap.portal.design.urdesigndataless\servlet_jsp\com.sap.portal.design.urdesigndataless\root\theming\UR\ls\baseTheme\ie6.less

IE6 is for IE, NN7 for chrome and so on. But the most important thing is that we can look at the definition:

.urPgHTTxtSmall {

width: @sapUrPgHTTxtWdth;

color: @sapUrPgHTTxtColor;

font-size: @sapUrPgHTTxtFSSmall;

@sapURPgHTtxtWdth is a LESS variable. In the UI Theme Designer go to your theme and select Expert mode. Search for sapURPgHTtxtWdth and there is the element!