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!
cancel
Showing results for 
Search instead for 
Did you mean: 
nol_hendrikx
Active Contributor

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!!!

Happy branding!

/*

nol.hendrikx - SAP Portal consultant @ Peppie Portals.

Specialized in Corporate branding SAP Portal / Adobe Interactive Forms.

UI Theming blog series

Portal theming - also waited a couple of years?

How to... UI Theme Designer - Installation

How to... UI Theme Designer - Migration

How to... UI Theme Designer - Locating elements

How to... UI Theme Designer - Transportation

How to... UI Theme Designer - Make use of the Custom CSS tab in the Portal!

Other blogs:

Tired of zipping / unzipping portal theme?

Tips for the Portal Content Studio

DSM Terminator and popup blockers (or not)

My best development friend - Autoresponder FTW

/*

53 Comments
Labels in this area