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!
Please note this is undocumented! Use it at your own risk!!!
Index:
How to... UI Theme Designer - Installation
How to... UI Theme Designer - Locating elements (you are here)
How to... UI Theme Designer - Transportation
Happy branding!
Noël Hendrikx
Peppie Portals